/* tokens.css — Identidade Viggo Sistemas.
   Valores extraídos de www.viggo.digital (2026-07-23). Não são preferências:
   são a marca. Ver DESIGN.md §2 e a tabela de tokens do site.

   Regra crítica: #F4C100 sobre branco = 1.68:1. O amarelo é acento sobre
   navy/escuro, nunca cor de texto em fundo claro. */

:root {
  /* ---------- primitivos da marca ---------- */
  --viggo-yellow:    #F4C100;  /* --yl no site: cor primária, 56 usos */
  --viggo-navy:      #031653;  /* --nd: âncora institucional, theme-color */
  --viggo-navy-mid:  #012B75;  /* --nv */
  --viggo-blue:      #0676BD;  /* --bl: links e interativos */
  --viggo-ink:       #0D1B2A;  /* --tx */
  --viggo-slate:     #5A6A7A;  /* --mt */
  --viggo-offwhite:  #F5F7FA;  /* --of */
  --viggo-line:      #E2E8F0;  /* --br */
  --viggo-green:     #00C48C;  /* confirmação — uso restrito */

  /* ---------- papéis semânticos: tema claro (padrão) ----------
     Claro é o padrão porque o guia é lido no expediente, sob luz de
     escritório, e é impresso. Ver DESIGN.md §5. */
  --bg:           #F6F8FA;
  --surface:      #ffffff;
  --surface-alt:  var(--viggo-offwhite);
  --text:         var(--viggo-ink);          /* 17.39:1 */
  --muted:        var(--viggo-slate);        /*  5.56:1 */
  --border:       var(--viggo-line);

  /* Ação e marca */
  --brand:        var(--viggo-navy);         /* 16.89:1 — títulos, âncora */
  --accent:       var(--viggo-yellow);       /* acento: só sobre escuro */
  --interactive:  var(--viggo-blue);         /*  4.85:1 — links */

  /* Botão primário: replica .btn-yl do site → 10.03:1 (AAA) */
  --btn-bg:       var(--viggo-yellow);
  --btn-ink:      var(--viggo-navy);

  /* Superfície de destaque: onde o amarelo pode viver.
     Substitui o antigo --brand-grad em resultado, tabela e badge. */
  --highlight-bg:   var(--viggo-navy);
  --highlight-ink:  #ffffff;                 /* 16.89:1 */
  --highlight-accent: var(--viggo-yellow);   /* 10.03:1 sobre navy */

  /* Numeração de seção/passo — hierarquia por profundidade, não por matiz.
     DESIGN.md §2: as partes não recebem cores próprias. */
  --badge-bg:   var(--viggo-navy);
  --badge-ink:  #ffffff;

  /* Sobre superfície clara o amarelo dá 1.57:1 e some. Estes tokens
     dão ao acento e à confirmação uma variante legível em fundo claro,
     sem tirar o amarelo de onde ele é a marca (botão, faixa navy). */
  --accent-ink: #7A5C00;                     /*  5.83:1 sobre #F5F7FA */
  --success:    var(--viggo-green);
  --success-ink:#00734F;                     /*  5.89:1 sobre branco */

  --rail:       var(--viggo-navy);
  --railx:      clamp(16px, 4vw, 56px);   /* x do trilho de datas */
  --railgap:    clamp(30px, 5vw, 44px);    /* trilho -> texto */
  --progress:   var(--viggo-navy);         /* barra de leitura s/ fundo claro */
  --shadow:     0 10px 30px rgba(24,32,44,.08);
  --radius:     18px;
  --radius-sm:  8px;                              /* botões: valor do site */
  --header-h:   72px;
  --sidebar-w:  290px;

  /* Mundo 'Agenda Tributária' (DESIGN.md 2026-07-23, escolha do usuário):
     Bricolage Grotesque para datas/títulos, Schibsted Grotesk para leitura. */
  --font-sans:    'Schibsted Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* ---------- escala de papéis ----------
     DESIGN.md §3: peso é hierarquia e só funciona se for escasso.
     800 é exclusivo de título; corpo é 400; ênfase é 600. */
  --w-body:     400;
  --w-emphasis: 600;
  --w-heading:  700;
  --w-display:  800;

  /* Tamanhos por papel, não por valor solto. */
  --t-hero:     clamp(2.6rem, 6vw, 4.6rem);
  --t-part:     clamp(2rem, 4.4vw, 3rem);
  --t-section:  clamp(1.7rem, 3.4vw, 2.4rem);
  --t-sub:      1.15rem;
  --t-lead:     clamp(1.05rem, 2.2vw, 1.2rem);
  --t-body:     1.05rem;
  --t-meta:     .92rem;
  --t-micro:    .8rem;

  /* Medida de leitura — DESIGN.md §3: nunca acima de ~68ch. */
  --measure:    68ch;

  /* ---------- ícones ----------
     Traço inline como máscara, para herdar a cor do token. Emoji não
     serve como sistema de ícones: renderiza diferente por SO, ignora a
     paleta, não imprime e é lido pelo nome Unicode. DESIGN.md §4. */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,13 9.5,18.5 20,6'/%3E%3C/svg%3E");
}

/* ---------- tema escuro ----------
   Derivado do navy da marca, não de cinza-preto genérico. É a Viggo
   à noite, não outro produto. Composto explicitamente, não invertido:
   os azuis clareiam porque #0676BD some em fundo escuro. */
:root[data-theme="dark"] {
  --bg:           #020D2E;
  --surface:      #0A1A45;
  --surface-alt:  #0E2153;
  --text:         #F2F6FC;                   /* 17.61:1 */
  --muted:        #A9B8CE;                   /*  9.49:1 */
  --border:       #23366B;

  /* --brand é usado tanto como texto de destaque quanto como borda.
     Branco puro serve ao texto mas deixa a borda agressiva; o amarelo
     da marca resolve os dois (11.34:1 como texto) e mantém a
     continuidade com o tema claro e com o site. */
  --brand:        var(--viggo-yellow);       /* 11.34:1 */
  --accent:       var(--viggo-yellow);       /* não muda entre temas */
  --interactive:  #6FB6E8;                   /*  8.67:1 */

  --btn-bg:       var(--viggo-yellow);
  --btn-ink:      var(--viggo-navy);         /* 10.03:1 */

  --highlight-bg:     #0A1A45;
  --highlight-ink:    #F2F6FC;
  --highlight-accent: var(--viggo-yellow);

  --badge-bg:   var(--viggo-yellow);
  --badge-ink:  var(--viggo-navy);

  --accent-ink: var(--viggo-yellow);         /* 11.34:1 — no escuro o amarelo serve */
  --success:    #2FE0AC;
  --success-ink:#2FE0AC;

  --rail:       #8FA3C4;
  --progress:   var(--viggo-yellow);
  --shadow:     0 18px 50px rgba(0,0,0,.45);
}