/* ==========================================================================
   Vidya · tokens v1.0 · 23 de outubro de 2026
   Fonte de verdade das decisões visuais. Conceito: "folha de resultados".
   Regras que os tokens carregam:
   1. Cor só onde tem dado: --cor-marca (o marca-texto amarelo) aparece
      atrás de número medido e da frase que importa; nunca em fundo,
      botão secundário ou decoração. O resto é tinta sobre papel.
   2. Papel milimetrado só como superfície de plotagem (--cor-grade),
      nunca como textura de fundo de página. O ponto plotado é tinta.
   3. Duas famílias, uma delas em três larguras: Archivo larga diz,
      normal opera, estreita mede; Source Serif 4 explica.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Cor: papel e tinta ------------------------------------------------ */
  --cor-papel: #ffffff;          /* a folha: onde algo é plotado ou lido   */
  --cor-bancada: #eff2ee;        /* fundo de página: bancada de laboratório */
  --cor-tinta: #141a17;          /* texto principal (17,6:1 sobre papel)    */
  --cor-tinta-2: #5b635d;        /* texto secundário, legendas (6,2:1)      */
  --cor-ponto: #141a17;          /* o ponto do logotipo: tinta no claro      */
  --cor-linha: #dde2dc;          /* eixos, bordas, divisores: suave, quase papel */
  --cor-linha-forte: #9aa39d;    /* eixo principal, foco de teclado         */
  --cor-marca: #f7e84b;          /* marca-texto: fundo atrás de dado medido */
  --cor-marca-texto: #141a17;    /* texto sobre o marca-texto (13,2:1)      */
  --cor-marca-tinta: #8a7a00;    /* o amarelo escurecido, para traço fino   */
  --cor-marca-viva: #f7e84b;     /* o amarelo que não escurece à noite: barra, ponto, caneta, azulejo */
  --cor-grade: rgba(20, 26, 23, 0.10);          /* milimetrado, linha fina */
  --cor-grade-forte: rgba(20, 26, 23, 0.22);    /* milimetrado, a cada 10  */

  /* Semântica de interface: estado, não marca. Nunca como acento. */
  --cor-ok: #1e7f4f;
  --cor-alerta: #b86e00;
  --cor-erro: #b3261e;

  /* --- Tipo: três vozes --------------------------------------------------- */
  --fonte-titulo: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fonte-texto: "Source Serif 4", Georgia, "Times New Roman", serif;
  --fonte-dado: "Archivo", "Helvetica Neue", Arial, sans-serif;   /* a mesma família, estreita */

  /* Largura (eixo wdth, via font-stretch) e peso por papel. Archivo: 62–125%. */
  --titulo-wdth: 112%;            /* títulos: largo e pesado                 */
  --titulo-wght: 760;
  --interface-wdth: 100%;         /* botões, menus, rótulos de formulário    */
  --interface-wght: 540;
  --tabela-wdth: 75%;             /* cabeçalho de tabela, rótulo denso       */
  --dado-wdth: 88%;               /* dado medido: Archivo semi-estreita      */

  /* Escala de tipo (rem). Base 17 px no texto corrido. */
  --t-xs: 0.78rem;   /* 12,5  rótulo de dado                  */
  --t-s: 0.875rem;   /* 14  legenda, interface densa         */
  --t-m: 1rem;       /* 16  interface                        */
  --t-texto: 1.0625rem; /* 17 texto corrido                  */
  --t-l: 1.25rem;    /* 20  destaque de texto, h4            */
  --t-xl: 1.5rem;    /* 24  h3                               */
  --t-2xl: 2rem;     /* 32  h2                               */
  --t-3xl: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem); /* h1, 40–68 */
  --t-numero: clamp(2rem, 1.4rem + 2vw, 3rem);     /* número de resultado */

  --entrelinha-texto: 1.6;
  --entrelinha-titulo: 1.05;
  --entrelinha-interface: 1.3;

  /* --- Espaço, medida, forma --------------------------------------------- */
  --passo: 8px;
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 16px;
  --esp-4: 24px;
  --esp-5: 32px;
  --esp-6: 48px;
  --esp-7: 64px;
  --esp-8: 96px;
  --esp-9: 144px;

  --medida: 64ch;                /* largura máxima de texto corrido         */
  --largura-max: 1200px;
  --coluna-margem: 176px;        /* a margem do caderno: rótulos à esquerda */
  --gutter: max(16px, env(safe-area-inset-left, 0px));

  --raio: 10px;                  /* caixa de conteúdo: suave, sem virar bolha (v2: era 2 px) */
  --raio-controle: 8px;          /* botão, campo, seletor                   */
  --raio-app: 14px;              /* cartão de produto da loja               */
  --borda: 1px solid var(--cor-linha);
  --borda-forte: 1px solid var(--cor-tinta);

  /* Papel milimetrado: 8 px a linha fina, 80 px a grossa (1:10, como a folha). */
  --grade-passo: 8px;
  --grade-passo-forte: 80px;

  /* Movimento: um gesto, o do plotter. */
  --dur-curta: 120ms;
  --dur-media: 240ms;
  --dur-plot: 900ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);

  --foco: 0 0 0 2px var(--cor-papel), 0 0 0 4px var(--cor-tinta);

  /* Padrão "campo de pontos": nove pontos plotados num tile de 80 px. Só em faixas, nunca atrás de texto corrido. */
  --padrao-pontos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath fill='%23141a17' fill-opacity='.14' d='M4 4h4v4H4zM28 12h4v4h-4zM60 4h4v4h-4zM12 36h4v4h-4zM44 28h4v4h-4zM68 44h4v4h-4zM20 60h4v4h-4zM52 68h4v4h-4zM36 52h4v4h-4z'/%3E%3C/svg%3E");
  --padrao-pontos-quadro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath fill='%23ffe95c' fill-opacity='.22' d='M4 4h4v4H4zM28 12h4v4h-4zM60 4h4v4h-4zM12 36h4v4h-4zM44 28h4v4h-4zM68 44h4v4h-4zM20 60h4v4h-4zM52 68h4v4h-4zM36 52h4v4h-4z'/%3E%3C/svg%3E");
  --cor-quadro: #141a17;         /* a lousa: faixa escura dentro do tema claro */
  --cor-quadro-texto: #edefec;
  --cor-quadro-texto-2: #a7afa9;
  --cor-quadro-linha: #2a332e;
  --cor-giz: #ffe95c;
}

/* --- Tema escuro: a bancada à noite. Mesmos papéis, mesmas regras. -------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cor-papel: #161c19;
    --cor-bancada: #0f1412;
    --cor-tinta: #edefec;
    --cor-tinta-2: #a7afa9;
    --cor-ponto: #ffe95c;          /* no escuro, o ponto é giz amarelo */
    --cor-linha: #252d29;
    --cor-linha-forte: #4a554f;
    --cor-marca: #2a2608;          /* no quadro, o marca-texto vira fundo escuro */
    --cor-marca-texto: #ffe95c;    /* e o texto vira giz amarelo (13:1)          */
    --cor-marca-tinta: #ffe95c;
    --cor-marca-viva: #ffe95c;
    --cor-grade: rgba(237, 239, 236, 0.10);
    --cor-grade-forte: rgba(237, 239, 236, 0.22);
    --padrao-pontos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath fill='%23edefec' fill-opacity='.14' d='M4 4h4v4H4zM28 12h4v4h-4zM60 4h4v4h-4zM12 36h4v4h-4zM44 28h4v4h-4zM68 44h4v4h-4zM20 60h4v4h-4zM52 68h4v4h-4zM36 52h4v4h-4z'/%3E%3C/svg%3E");
    --cor-quadro: #0a0d0b;
    --cor-ok: #5fcf93;
    --cor-alerta: #f0b25a;
    --cor-erro: #ff8a80;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --cor-papel: #161c19;
  --cor-bancada: #0f1412;
  --cor-tinta: #edefec;
  --cor-tinta-2: #a7afa9;
  --cor-ponto: #ffe95c;
  --cor-linha: #252d29;
  --cor-linha-forte: #4a554f;
  --cor-marca: #2a2608;
  --cor-marca-texto: #ffe95c;
  --cor-marca-tinta: #ffe95c;
  --cor-marca-viva: #ffe95c;
  --cor-grade: rgba(237, 239, 236, 0.10);
  --cor-grade-forte: rgba(237, 239, 236, 0.22);
  --padrao-pontos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath fill='%23edefec' fill-opacity='.14' d='M4 4h4v4H4zM28 12h4v4h-4zM60 4h4v4h-4zM12 36h4v4h-4zM44 28h4v4h-4zM68 44h4v4h-4zM20 60h4v4h-4zM52 68h4v4h-4zM36 52h4v4h-4z'/%3E%3C/svg%3E");
  --cor-quadro: #0a0d0b;
  --cor-ok: #5fcf93;
  --cor-alerta: #f0b25a;
  --cor-erro: #ff8a80;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-curta: 0ms;
    --dur-media: 0ms;
    --dur-plot: 0ms;
  }
}