/* ═══════════════════════════════════════════════════════════
   FAROL · tokens — a única fonte da verdade do visual.
   Um destaque, neutros frios, dois temas nascidos juntos.
   Tema: segue o sistema; a escolha no sol/lua (data-tema) vence.
   ═══════════════════════════════════════════════════════════ */

/* ── escala, tipografia, raios, movimento (iguais nos dois temas) ── */
:root {
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --f-display: 'Instrument Sans', -apple-system, 'SF Pro Display', system-ui, sans-serif;
  --f-texto:   'Onest', -apple-system, 'SF Pro Text', system-ui, sans-serif;
  --t-34: 34px; --t-28: 28px; --t-22: 22px; --t-17: 17px; --t-15: 15px; --t-13: 13px; --t-11: 11px;

  --r-s: 10px;  --r: 14px;  --r-l: 22px;  --r-pill: 999px;

  /* movimento: uma mola para retorno (ultrapassa e assenta), uma curva para entrada */
  --mola:    cubic-bezier(.2, .8, .2, 1);
  --retorno: cubic-bezier(.34, 1.56, .64, 1);
  --d-toque: 60ms;
  --d-volta: 320ms;
  --d-tela:  280ms;
  --d-folha: 320ms;

  --aba-h: 64px;
  --col-aluno: 520px;
  --col-resp: 880px;
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-t: env(safe-area-inset-top, 0px);
}

/* ── tema claro (base) ── */
:root {
  color-scheme: light;
  --bg:     #F5F6F8;
  --sup:    #FFFFFF;
  --sup-2:  #ECEEF2;
  --txt:    #111318;
  --txt-2:  #5C6370;   /* 5.0:1 sobre --bg */
  --txt-3:  #667085;   /* 4.9:1 sobre --sup */
  --sep:    #E3E6EB;

  --acc:      #2F6BFF;   /* 4.6:1 sobre branco */
  --acc-txt:  #FFFFFF;
  --acc-soft: rgba(47, 107, 255, .12);
  --acc-line: rgba(47, 107, 255, .35);

  --ok:   #1E9E62;
  --erro: #D93A3F;
  --aten: #B87A00;

  /* vidro: fundo translúcido, borda e brilho especular */
  --vidro:        rgba(255, 255, 255, .58);
  --vidro-borda:  rgba(255, 255, 255, .75);
  --vidro-brilho: rgba(255, 255, 255, .95);
  --vidro-sombra: rgba(17, 19, 24, .14);
}

/* ── tema escuro: pelo sistema (sem escolha) ou pela escolha ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --bg:     #0E0F12;
    --sup:    #17191E;
    --sup-2:  #1F2229;
    --txt:    #F2F3F5;
    --txt-2:  #9AA0AB;   /* 8:1 */
    --txt-3:  #7C838E;   /* 5:1 */
    --sep:    #26292F;

    --acc:      #5B8CFF;   /* 6.5:1 sobre --bg */
    --acc-txt:  #08122B;   /* 7:1 sobre o azul claro */
    --acc-soft: rgba(91, 140, 255, .16);
    --acc-line: rgba(91, 140, 255, .40);

    --ok:   #3CCB84;
    --erro: #F0616A;
    --aten: #E8B54D;

    --vidro:        rgba(23, 25, 30, .58);
    --vidro-borda:  rgba(255, 255, 255, .12);
    --vidro-brilho: rgba(255, 255, 255, .35);
    --vidro-sombra: rgba(0, 0, 0, .45);
  }
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --bg:     #0E0F12;
  --sup:    #17191E;
  --sup-2:  #1F2229;
  --txt:    #F2F3F5;
  --txt-2:  #9AA0AB;
  --txt-3:  #7C838E;
  --sep:    #26292F;

  --acc:      #5B8CFF;
  --acc-txt:  #08122B;
  --acc-soft: rgba(91, 140, 255, .16);
  --acc-line: rgba(91, 140, 255, .40);

  --ok:   #3CCB84;
  --erro: #F0616A;
  --aten: #E8B54D;

  --vidro:        rgba(23, 25, 30, .58);
  --vidro-borda:  rgba(255, 255, 255, .12);
  --vidro-brilho: rgba(255, 255, 255, .35);
  --vidro-sombra: rgba(0, 0, 0, .45);
}

/* ── modo sóbrio: menos movimento e sem transparência (sistema ou aparelho fraco) ── */
@media (prefers-reduced-motion: reduce) {
  :root { --d-toque: 0ms; --d-volta: 120ms; --d-tela: 0ms; --d-folha: 120ms; --retorno: ease-out; }
}
:root.sobrio { --d-volta: 150ms; --retorno: ease-out; }