/* ============================================================
   TOKENS — único lugar com valores brutos do design system.
   Camadas: tokens → base → layout → componentes/ → paginas/

   Tema claro e escuro: cada cor é um token por FUNÇÃO (superfície,
   texto, linha, marca, estado) com os dois valores em light-dark().
   O <html data-tema="sistema|claro|escuro"> só troca o color-scheme;
   o navegador escolhe o lado certo sozinho, já no primeiro desenho.
   Nenhum outro arquivo deve ter cor fixa: use estes tokens.
   ============================================================ */

/* Inter variável (latin, pesos 100–900) vendorada — sem Google Fonts em
   runtime. O arquivo antigo era só a Regular, então o bold sumia (ALU-1.1):
   o navegador não sintetiza negrito pra webface, precisa do peso real. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-latin-0555e090.woff2") format("woff2");
}

/* ── Qual tema vale ─────────────────────────────────────── */
:root { color-scheme: light dark; }          /* "sistema": segue o SO */
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }

/* ── Escala escura (comum ao aluno e ao admin) ──────────────
   Marinho profundo puxado do azul Mainô, e não cinza/preto puro:
   profundidade por superfícies mais claras, não por sombra. */
:root {
  --escuro-pagina: #0b141d;
  --escuro-sup: #111c27;
  --escuro-sup-sutil: #15212d;
  --escuro-sup-hover: #1b2835;
  --escuro-sup-elevada: #172431;
  --escuro-trilho: #24323f;

  --escuro-linha-suave: #1c2a37;
  --escuro-linha: #263545;
  --escuro-linha-forte: #34465a;
  --escuro-linha-input: #3e5267;

  --escuro-txt-1: #e8eef4;
  --escuro-txt-2: #c9d4de;
  --escuro-txt-3: #9aa9b8;
  --escuro-txt-4: #7c8c9d;
  --escuro-txt-5: #5b6b7c;
}

/* ── Tokens por função ─────────────────────────────────────
   Valores claros = área do aluno. O admin redefine os claros dele
   em paginas/admin-tema.css (.admin-shell); o escuro é o mesmo. */
:root {
  /* Superfícies */
  --sup-pagina: light-dark(#f3f4f4, var(--escuro-pagina));
  --sup: light-dark(#fff, var(--escuro-sup));
  --sup-sutil: light-dark(#f7f9fc, var(--escuro-sup-sutil));
  --sup-hover: light-dark(#f3f4f6, var(--escuro-sup-hover));
  --sup-elevada: light-dark(#fff, var(--escuro-sup-elevada));   /* menus, modais, popovers */
  --sup-trilho: light-dark(#e5e7eb, var(--escuro-trilho));      /* trilho de barras, toggles */
  --sup-invertida: light-dark(#242424, #e8eef4);               /* tooltip, toast neutro */
  --academy-on-azul: #42aaec;                                   /* selo "Ao vivo" (igual nos dois temas) */
  --ponto-sobre-foto: rgba(255, 255, 255, 0.6);                /* bolinhas do carrossel (sobre imagem) */
  --veu: light-dark(rgba(0, 0, 0, 0.5), rgba(2, 6, 12, 0.72));  /* fundo atrás do modal */

  /* Texto */
  --txt-1: light-dark(#242424, var(--escuro-txt-1));   /* títulos, corpo */
  --txt-2: light-dark(#393939, var(--escuro-txt-2));   /* labels, corpo secundário */
  --txt-3: light-dark(#6f6f6f, var(--escuro-txt-3));   /* descrições */
  --txt-4: light-dark(#8b8b8b, var(--escuro-txt-4));   /* ícones neutros, placeholders */
  --txt-5: light-dark(#b0b0b0, var(--escuro-txt-5));   /* rodapé, desativado */
  --sobre-cor: #fff;                                   /* texto sobre marca/estado cheio */
  --txt-invertido: light-dark(#fff, #0b141d);          /* texto sobre --sup-invertida */

  /* Linhas */
  --linha-suave: light-dark(#f0f0f0, var(--escuro-linha-suave));
  --linha: light-dark(#e6e6e6, var(--escuro-linha));
  --linha-forte: light-dark(#d4d4d4, var(--escuro-linha-forte));
  --linha-input: light-dark(#c1c1c1, var(--escuro-linha-input));
  --linha-hover: light-dark(#a0a0a0, var(--escuro-txt-5));      /* borda do campo no hover */

  /* Marca: no escuro, o #033860 some no fundo — o preenchimento clareia
     um pouco (texto branco segue AA) e o texto/link vira azul claro. */
  --marca: light-dark(#033860, #2f6fae);
  --marca-hover: light-dark(#125fa6, #3b80c2);
  --marca-pressed: light-dark(#022a48, #285f96);
  --marca-texto: light-dark(#033860, #8cc2f2);
  --marca-texto-hover: light-dark(#125fa6, #b5d8f8);
  --marca-suave: light-dark(#ebf2fa, rgba(125, 184, 238, 0.13));
  --marca-suave-2: light-dark(#ebf3fa, rgba(125, 184, 238, 0.19));
  --marca-suave-forte: light-dark(rgba(3, 56, 96, 0.12), rgba(125, 184, 238, 0.22));
  --marca-borda: light-dark(#bfdbfe, rgba(125, 184, 238, 0.35));

  /* Estados */
  --sucesso: light-dark(#2a7221, #2e8540);
  --sucesso-hover: light-dark(#1e5519, #36964a);
  --sucesso-vivo: light-dark(#11854c, #2e9a5c);        /* chips "Artigo", celebrações */
  --sucesso-texto: light-dark(#2a7221, #72d48b);
  --sucesso-suave: light-dark(#ebfaf2, rgba(114, 212, 139, 0.13));
  --sucesso-borda: light-dark(#bbf7d0, rgba(114, 212, 139, 0.32));

  --perigo: light-dark(#b23333, #c84444);
  --perigo-hover: light-dark(#8f2828, #d65656);
  --perigo-texto: light-dark(#d22121, #ff8f8f);
  --perigo-suave: light-dark(#fdecec, rgba(255, 143, 143, 0.13));
  --perigo-caixa: light-dark(#fdf0f0, rgba(255, 143, 143, 0.1));
  --perigo-borda: light-dark(#f3c2c2, rgba(255, 143, 143, 0.32));

  --alerta: light-dark(#e65100, #ff9a4d);
  --alerta-texto: light-dark(#b54708, #f7b955);
  --alerta-suave: light-dark(#fffaeb, rgba(247, 185, 85, 0.13));
  --alerta-borda: light-dark(#fedf89, rgba(247, 185, 85, 0.35));
  --alerta-borda-forte: light-dark(#f7af00, rgba(247, 185, 85, 0.55));

  --info-texto: light-dark(#1d4ed8, #8cc2f2);
  --info-suave: light-dark(#eff6ff, rgba(125, 184, 238, 0.13));

  --dourado: light-dark(#c8890a, #e3a83a);
  --dourado-vivo: light-dark(#e8a317, #f0b44a);
  --dourado-suave: light-dark(#fdf3e2, rgba(227, 168, 58, 0.14));
  --lilas-suave: light-dark(#e4dcf0, rgba(180, 150, 230, 0.16));  /* 4ª cor das capas sem imagem */

  /* Profundidade: no escuro a sombra só marca a borda inferior. */
  --sombra-cor: light-dark(rgba(16, 24, 40, 0.08), rgba(0, 0, 0, 0.45));
  --sombra-cor-forte: light-dark(rgba(16, 24, 40, 0.14), rgba(0, 0, 0, 0.6));
  --anel-foco: 0 0 0 4px light-dark(rgba(3, 56, 96, 0.12), rgba(125, 184, 238, 0.3));
}

/* ── Nomes antigos → tokens por função ──────────────────────
   Mantidos para o que ainda não migrou (estilos inline, JS). Código
   novo usa os nomes de cima. */
:root {
  /* área do aluno */
  --azul: var(--marca);
  --azul-hover: var(--marca-hover);
  --azul-pressed: var(--marca-pressed);
  --azul-suave: var(--marca-suave);
  --azul-suave-2: var(--marca-suave-2);
  --verde: var(--sucesso);
  --verde-escuro: var(--sucesso-hover);
  --verde-suave: var(--sucesso-suave);
  --verde-badge: var(--sucesso-vivo);
  --vermelho: var(--perigo-texto);
  --vermelho-btn: var(--perigo);
  --vermelho-btn-hover: var(--perigo-hover);
  --vermelho-toast: var(--perigo);
  --vermelho-suave: var(--perigo-suave);
  --vermelho-caixa: var(--perigo-caixa);
  --vermelho-borda: var(--perigo-borda);
  --laranja: var(--alerta);
  --texto: var(--txt-1);
  --texto-2: var(--txt-2);
  --texto-suave: var(--txt-3);
  --texto-fraco: var(--txt-4);
  --texto-apagado: var(--txt-5);
  --borda: var(--linha-forte);
  --borda-input: var(--linha-input);
  --borda-suave: var(--linha);
  --divisor: var(--linha-suave);
  --fundo: var(--sup-pagina);
  --fundo-suave: var(--sup-sutil);

  /* painel admin (família var(--color-*)) */
  --color-primary: var(--marca);
  --color-primary-soft: var(--marca-suave);
  --color-primary-border: var(--marca-borda);
  --color-success: var(--sucesso-texto);
  --color-success-soft: var(--sucesso-suave);
  --color-success-border: var(--sucesso-borda);
  --color-danger: var(--perigo-texto);
  --color-danger-soft: var(--perigo-suave);
  --color-danger-border: var(--perigo-borda);
  --color-warning: var(--alerta-texto);
  --color-warning-soft: var(--alerta-suave);
  --color-warning-border: var(--alerta-borda);
  --color-text-primary: var(--txt-1);
  --color-text-secondary: var(--txt-2);
  --color-text-tertiary: var(--txt-2);
  --color-text-muted: var(--txt-3);
  --color-text-faint: var(--txt-4);
  --color-bg-page: var(--sup-pagina);
  --color-bg-card: var(--sup);
  --color-bg-subtle: var(--sup-sutil);
  --color-bg-hover: var(--sup-hover);
  --color-border: var(--linha-forte);
  --color-border-light: var(--linha);
  --color-border-subtle: var(--linha-suave);
}

/* ── Escala (sem tema) ────────────────────────────────────── */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 7px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --radius-3xl: 12px;
  --radius-pill: 20px;

  --font-xs: 11px;
  --font-sm: 12px;
  --font-base: 13px;
  --font-md: 13.5px;
  --font-lg: 14px;
  --font-xl: 15px;
  --font-2xl: 16px;
  --font-3xl: 18px;

  --shadow-sm: 0 1px 3px var(--sombra-cor);
  --shadow-md: 0 2px 8px var(--sombra-cor);
  --shadow-lg: 0 4px 12px var(--sombra-cor-forte);
}

/* ── Imagens da marca (logo preta transparente): brancas no escuro ── */
:root[data-tema="escuro"] .logo-marca { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistema"] .logo-marca { filter: brightness(0) invert(1); }
}