/* Tokens do site do Greg: os do estilo Papel do painel (app/templates/_base.html), herdados, mais os de página.
   Único arquivo com cor literal; o resto usa var(--token). O site é só claro (pedido do dono, 10/11/2026): color-scheme light faz o light-dark() resolver sempre no claro;
   os pares escuros ficam guardados para o dia em que o tema escuro voltar. */
:root {
  color-scheme: light;
  --fonte: -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --mono: "SF Mono", Menlo, ui-monospace, monospace;
  /* a voz do Greg: única serifa do site, só no que ele "fala" (docs/design/marca-greg). Arquivo local, licença em vendor/fontes/OFL.txt */
  --voz: "Instrument Serif", ui-serif, Georgia, serif;

  /* cores do Papel */
  --fundo: light-dark(#FFFFFF, #1E2024);
  --fundo-2: light-dark(#F6F7F9, #26282D);
  --fundo-3: light-dark(#E8EAEE, #2B2E34);
  --fio: light-dark(rgba(16,24,40,.10), rgba(255,255,255,.10));
  --fio-fraco: light-dark(rgba(16,24,40,.07), rgba(255,255,255,.06));
  --texto: light-dark(#1B1F27, #E8EAEE);
  --texto-2: light-dark(#3B4453, #C5CAD3);
  --meta: light-dark(#5B6472, #B0B6BF);
  --acento: light-dark(#007AFF, #0A84FF);
  --acento-topo: light-dark(#1E8CFF, #2B95FF);
  --acento-texto: light-dark(#0071E3, #3B9BFF);
  --sobre-acento: #FFFFFF;
  --foco: light-dark(rgba(0,122,255,.5), rgba(10,132,255,.6));
  --selecao: light-dark(rgba(0,122,255,.12), rgba(10,132,255,.22));
  --ok: light-dark(#1F7A45, #6FD39A);
  --alerta-fundo: light-dark(#FBF1D6, #3A2E12);
  --alerta-texto: light-dark(#7A5300, #E9C46A);
  --erro-texto: light-dark(#9B1C12, #F29C92);
  --codigo-fundo: light-dark(#F6F7F9, #17181B);
  /* as quatro classes do Greg: as únicas cores com significado */
  --classe-demanda: light-dark(#0071E3, #4D8EF0);
  --classe-lembrar: light-dark(#6B4FBB, #9D86F0);
  --classe-atencao: light-dark(#0E7C7B, #3FBFB6);
  --classe-aviso: light-dark(#5B6472, #B0B6BF);

  /* bezel e sombras do Papel */
  --bezel: 0 0 0 .5px light-dark(rgba(16,24,40,.24), rgba(255,255,255,.12)), 0 1px 1px light-dark(rgba(16,24,40,.08), rgba(0,0,0,.4));
  --sombra-captura: 0 0 0 .5px light-dark(rgba(16,24,40,.2), rgba(0,0,0,.6)), 0 18px 50px light-dark(rgba(16,24,40,.16), rgba(0,0,0,.55));

  /* animação do hero (cascata de notificações): palco, aparelho, cartões e as sombras deles */
  --palco: light-dark(#D6E1F2, #17181B);
  --palco-fio: light-dark(rgba(16,24,40,.06), rgba(255,255,255,.06));
  --aparelho: light-dark(#1B1F27, #0E0F12);
  --aparelho-aro: light-dark(#5B6472, #5B6472);
  --aparelho-tela: light-dark(#222B3A, #17181B);
  --aparelho-tela-2: light-dark(#2E3A4E, #26282D);
  --aparelho-texto: #FFFFFF;
  --aparelho-texto-2: rgba(255,255,255,.66);
  --aparelho-vidro: rgba(255,255,255,.14);
  --aparelho-vidro-2: rgba(255,255,255,.30);
  --balao: light-dark(#27B050, #2DB742);
  --selo-novo: light-dark(#D1343A, #D1343A);
  --sobre-acento-2: #FFFFFF;
  --sobre-acento-vidro: rgba(0,0,0,.14);
  --cartao-lado: light-dark(#C3CCDA, #3A3F48);
  --cartao-baixo: light-dark(#E4E9F1, #26282D);
  --aparelho-lado: light-dark(#39414F, #26282D);
  --aparelho-lado-2: light-dark(#10131A, #0E0F12);
  --chao: light-dark(rgba(27,43,74,.34), rgba(0,0,0,.6));
  --chao-meio: light-dark(rgba(27,43,74,.10), rgba(0,0,0,.2));
  --sombra-cartao: 0 3px 0 var(--cartao-lado), 0 0 0 .5px light-dark(rgba(16,24,40,.18), rgba(255,255,255,.1)), 0 14px 26px light-dark(rgba(27,43,74,.24), rgba(0,0,0,.5));
  --sombra-azul: 0 4px 0 light-dark(#0050B4, #0A5BD0), 0 22px 44px light-dark(rgba(0,113,227,.42), rgba(10,132,255,.4));
  --sombra-aparelho: inset 0 0 0 2px var(--aparelho-aro), inset 2px 2px 0 1px rgba(255,255,255,.22), 4px 1px 0 var(--aparelho-lado), 8px 2px 0 var(--aparelho-lado-2);
  --raio-aparelho: 40px;
  --raio-aparelho-tela: 31px;
  --raio-cartao: 16px;
  --raio-icone: 9px;
  --raio-miudo: 2px;

  /* raios do Papel */
  --raio-controle: 6px;
  --raio-grupo: 8px;
  --raio-bolha: 14px;

  /* tipografia de página, corpo 17/27,2 px. Título de seção = 2,6× o corpo (regra da casa: ≥ 2,5×); a altura de linha de
     todo título é múltipla de meia linha do corpo (0,8 rem), para o texto cair na mesma grade de base */
  --t-display: 700 clamp(2.6rem, 6vw, 4.25rem)/clamp(3.2rem, 6.8vw, 4.8rem) var(--fonte);
  --t-h1: 700 clamp(2rem, 4.4vw, 3rem)/clamp(2.4rem, 4.9vw, 3.2rem) var(--fonte);
  --t-h2: 700 clamp(1.75rem, 3.6vw, 2.6rem)/clamp(2.4rem, 4.4vw, 3.2rem) var(--fonte);
  --t-h3: 600 1.25rem/1.6rem var(--fonte);
  --t-lead: 400 clamp(1.1rem, 1.6vw, 1.3rem)/1.5 var(--fonte);
  --t-corpo: 400 1rem/1.6 var(--fonte);
  --t-meta: 400 .875rem/1.45 var(--fonte);
  --t-rotulo: 700 .75rem/1.3 var(--fonte);
  --t-codigo: 400 .875rem/1.6 var(--mono);
  --t-voz: italic 400 clamp(1.5rem, 2.7vw, 2.1rem)/2.4rem var(--voz);

  /* movimento: resposta de controle e entrada de seção */
  --mov-toque: .14s;
  --mov-entrada: .6s;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --veu: light-dark(rgba(16,24,40,.62), rgba(0,0,0,.72));
  --acento-fundo: light-dark(#0068D6, #2B95FF);

  /* espaço: 6 passos */
  --e1: 4px; --e2: 8px; --e3: 16px; --e4: 24px; --e5: 48px; --e6: 96px;
  --largura: 1120px;
  --largura-texto: 680px;
  --topo: 56px;
}