/* ============================================================
   DETETIVE VIRTUAL — DESIGN TOKENS (fonte única de verdade)

   Direção: "Documento Desclassificado".

   Duas materialidades, e a diferença entre elas é o produto:
     · CHROME (busca, planos, checkout) — navy institucional. É o sistema.
     · DOCUMENTO (o dossiê) — papel de arquivo. É o que você comprou.

   A assinatura é a TARJA. Dado bloqueado não é borrado, é tarjado, como
   num documento desclassificado — e pagar levanta a tarja. Por isso o
   dossiê precisa ser papel: tarja preta sobre navy não lê como censura.

   Importado por css/style.css (site) e admin.html (painel).
   Produto dark-first; tema claro via [data-theme="light"].

   Organização em camadas:
     1. Primitivos  — a paleta e as escalas cruas
     2. Semânticos  — o que a cor/tamanho SIGNIFICA (use estes no CSS)
     3. Componentes — tokens de um componente específico
   ============================================================ */

:root {
  color-scheme: dark;

  /* ═══ 1. PRIMITIVOS ═══════════════════════════════════════ */

  /* ── Superfícies (navy institucional, viés frio) ── */
  --dv-bg:            #071322;
  --dv-surface:       #0E2137;
  --dv-surface-2:     #122844;
  --dv-surface-3:     #173154;
  --dv-border:        #20374F;
  --dv-border-strong: #2C465F;

  /* ── Texto ── */
  --dv-ink:      #EAF2FA;
  --dv-ink-soft: #AEC0D6;
  --dv-muted:    #7C8FA9;

  /* ── Marca: 1 acento teal contido (cor de "conexão segura") ── */
  --dv-brand:        #39BEDC;
  --dv-brand-strong: #78D6ED;
  --dv-brand-deep:   #1B7E9B;
  --dv-brand-tint:   #0F2C3E;

  /* ── Semânticas (separadas do acento de marca) ── */
  --dv-amber:   #E8A13A;
  --dv-success: #33B37E;
  --dv-warning: #E8A13A;
  --dv-danger:  #E5636D;

  /* ── Papel de arquivo ──
     Cinza levemente esverdeado, não o creme quente de papelaria: é a cor
     de papel de processo guardado, e sustenta a tarja preta sem sujar. */
  --dv-paper:        #ECEEE9;
  --dv-paper-2:      #E3E6DF;
  --dv-paper-3:      #D8DCD3;
  --dv-paper-rule:   #C3C9BC;
  --dv-paper-ink:    #141A20;
  --dv-paper-ink-2:  #3E4952;
  /* 5.7:1 sobre o papel — o #6B7681 anterior media 3.7 e reprovava. */
  --dv-paper-muted:  #545D69;

  /* Semânticas com peso suficiente para viver sobre papel. */
  --dv-paper-brand:   #0C6C88;
  --dv-paper-amber:   #8A5B08;
  --dv-paper-success: #16704B;
  --dv-paper-danger:  #A32833;

  /* ── A tarja. Um uso só: cobrir o que não foi pago. ── */
  --dv-redact: #10141A;

  /* ── Tipografia ── */
  /* Archivo é grotesca de uso institucional (formulários, sinalização
     oficial): pesada, levemente estreita, sem o ar editorial de uma
     serifada. IBM Plex foi desenhada para registro técnico — é a letra
     de "isto foi produzido por um sistema", que é o que um laudo é. */
  --dv-f-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --dv-f-ui:      'IBM Plex Sans', system-ui, 'Segoe UI', Arial, sans-serif;
  --dv-f-mono:    'IBM Plex Mono', ui-monospace, 'Consolas', monospace;

  /* Escala tipográfica fluida. O 2º valor do clamp cresce com a viewport,
     os extremos travam o tamanho em telas muito pequenas ou muito largas. */
  --dv-t-2xs: 0.6875rem;                          /* 11px — selos, metadados */
  --dv-t-xs:  0.75rem;                            /* 12px — rótulos */
  --dv-t-sm:  0.8125rem;                          /* 13px — texto auxiliar */
  --dv-t-base: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --dv-t-md:  clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --dv-t-lg:  clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --dv-t-xl:  clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --dv-t-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
  --dv-t-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);

  --dv-lh-tight: 1.2;
  --dv-lh-snug:  1.4;
  --dv-lh-base:  1.6;
  --dv-ls-wide:  0.06em;
  --dv-ls-wider: 0.1em;

  /* ── Espaçamento (escala de 4) ── */
  --dv-s-1: 0.25rem;   /*  4px */
  --dv-s-2: 0.5rem;    /*  8px */
  --dv-s-3: 0.75rem;   /* 12px */
  --dv-s-4: 1rem;      /* 16px */
  --dv-s-5: 1.25rem;   /* 20px */
  --dv-s-6: 1.5rem;    /* 24px */
  --dv-s-8: 2rem;      /* 32px */
  --dv-s-10: 2.5rem;   /* 40px */
  --dv-s-12: 3rem;     /* 48px */

  /* Padding interno de card/seção: aperta no celular, respira no desktop. */
  --dv-pad-card: clamp(1rem, 0.55rem + 2.2vw, 1.75rem);
  --dv-pad-page: clamp(0.75rem, 0.4rem + 1.6vw, 1.5rem);

  /* ── Raios ── */
  --dv-r-sm:   6px;
  --dv-r:      10px;
  --dv-r-lg:   16px;
  --dv-r-pill: 999px;

  /* ── Elevação (sombra real, nunca glow colorido) ── */
  --dv-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --dv-shadow:    0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.45);
  --dv-shadow-lg: 0 2px 4px rgb(0 0 0 / 0.4), 0 24px 56px rgb(0 0 0 / 0.55);

  /* ── Foco e movimento ── */
  --dv-ring:     color-mix(in oklab, var(--dv-brand) 55%, transparent);
  --dv-ring-w:   2px;
  --dv-ring-off: 2px;
  --dv-dur:      0.18s;
  --dv-dur-slow: 0.35s;
  --dv-ease:     cubic-bezier(0.2, 0, 0.2, 1);

  /* ── Layout ── */
  --dv-w-page:  62.5rem;  /* 1000px — largura do conteúdo */
  --dv-w-prose: 68ch;
  --dv-tap:     2.75rem;  /* 44px — alvo mínimo de toque */

  /* ═══ 2. SEMÂNTICOS (é o que o CSS deve usar) ═════════════ */

  --dv-text:         var(--dv-ink);
  --dv-text-soft:    var(--dv-ink-soft);
  --dv-text-muted:   var(--dv-muted);
  --dv-text-on-brand:   #04121A;
  --dv-text-on-success: #04170F;
  --dv-text-on-amber:   #1C1102;

  --dv-accent:        var(--dv-brand);
  --dv-accent-hover:  var(--dv-brand-strong);
  --dv-accent-quiet:  var(--dv-brand-tint);

  /* Fundos translúcidos derivados do token — evita rgba() solto no CSS. */
  --dv-fill-subtle:  color-mix(in oklab, var(--dv-ink) 4%, transparent);
  --dv-fill-quiet:   color-mix(in oklab, var(--dv-ink) 7%, transparent);
  --dv-fill-accent:  color-mix(in oklab, var(--dv-brand) 12%, transparent);
  --dv-fill-success: color-mix(in oklab, var(--dv-success) 12%, transparent);
  --dv-fill-amber:   color-mix(in oklab, var(--dv-amber) 12%, transparent);
  --dv-fill-danger:  color-mix(in oklab, var(--dv-danger) 12%, transparent);

  --dv-line-subtle: color-mix(in oklab, var(--dv-ink) 9%, transparent);
  --dv-line-accent: color-mix(in oklab, var(--dv-brand) 40%, transparent);
  --dv-line-amber:  color-mix(in oklab, var(--dv-amber) 40%, transparent);
  --dv-line-danger: color-mix(in oklab, var(--dv-danger) 40%, transparent);

  /* ═══ 3. COMPONENTES ══════════════════════════════════════ */

  --dv-card-bg:     var(--dv-surface);
  --dv-card-border: var(--dv-border);
  --dv-card-radius: var(--dv-r-lg);

  --dv-field-bg:     var(--dv-surface-2);
  --dv-field-border: var(--dv-border-strong);

  /* Alturas de referência do relatório (índice grudento + scroll-margin) */
  --dv-index-h: 3.5rem;
}

/* ── Tema claro (painel e impressão futura) ── */
:root[data-theme='light'] {
  color-scheme: light;

  --dv-bg:            #E9EEF5;
  --dv-surface:       #FFFFFF;
  --dv-surface-2:     #F3F7FB;
  --dv-surface-3:     #EAF0F7;
  --dv-border:        #D5DEEA;
  --dv-border-strong: #BCCADB;

  --dv-ink:      #0C1B2A;
  --dv-ink-soft: #395069;
  --dv-muted:    #5E718A;

  --dv-brand:        #0F7E9B;
  --dv-brand-strong: #0B637A;
  --dv-brand-deep:   #084C5E;
  --dv-brand-tint:   #DDF0F6;

  --dv-amber:   #A96B12;
  --dv-success: #177954;
  --dv-warning: #A96B12;
  --dv-danger:  #B3303B;

  --dv-text-on-brand: #FFFFFF;

  --dv-shadow-sm: 0 1px 2px rgb(12 27 42 / 0.08);
  --dv-shadow:    0 1px 2px rgb(12 27 42 / 0.08), 0 12px 28px rgb(12 27 42 / 0.12);
  --dv-shadow-lg: 0 2px 4px rgb(12 27 42 / 0.1), 0 24px 48px rgb(12 27 42 / 0.16);
}

/* Respeita quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dv-dur: 0.01ms;
    --dv-dur-slow: 0.01ms;
  }
}