/* =====================================================================
   BOOOT · DESIGN TOKENS · v1.2.0
   Fonte única da verdade do sistema visual BOOOT.
   Direção: COMUNIDADE · CONQUISTA · CRESCIMENTO.
   Carvão técnico · creme quente · laranja de ignição · geometria pesada.

   Proveniência: brand board "booot-prancha-rascunho.png" + DS B2B v1.3.0
   (referencia.html). Correções canônicas: terracota → #FF3F02 · creme
   realinhado à ref (#E9DCC9 · hsl 36 42% 85%): o brand-board #FFF4EA (96% L)
   lia quase branco; a ref é creme quente (85% L). v1.2.0.
   Regra-mãe: BOOOT não é colorido. É carvão e creme. Laranja é o botão
   de partida · acento pontual, nunca cor dominante.

   NÃO editar valores soltos. Mude aqui e o sistema inteiro herda.
   ===================================================================== */

:root {
  /* ---- CORE COLORS ------------------------------------------------- */
  --booot-carvao: #1D1D1F;       /* cor principal · logo · fundo escuro     */
  --booot-creme: #E9DCC9;        /* fundo claro · negativo da marca · texto · creme quente (alinhado à ref DS B2B v1.3.0) */
  --booot-laranja: #FF3F02;      /* ignição · CTA · números · bullets       */
  --booot-cinza-claro: #E6E2DA;  /* linhas · divisórias · cards claros      */
  --booot-cinza-medio: #B8B4AC;  /* texto secundário (só sobre carvão)      */
  /* laranja derivado (ramp de estado) · via color-mix, sem hex novo */
  --booot-laranja-press: color-mix(in srgb, var(--booot-laranja) 88%, var(--booot-carvao)); /* hover/pressed */
  --booot-laranja-tint: color-mix(in srgb, var(--booot-laranja) 10%, transparent);          /* wash de outline */

  /* ---- HSL TRIPLETS (espelho das 5 cores · NÃO é cor nova) ---------- */
  /* o hex acima é a fonte canônica; estes tripletos são a MESMA cor em HSL
     pra permitir hierarquia por opacidade: hsl(var(--booot-creme-hsl)/.62).
     verify-tokens prova que cada um round-trippa pro hex (±3/canal). */
  --booot-carvao-hsl: 240 3% 12%;
  --booot-creme-hsl: 36 42% 85%;
  --booot-laranja-hsl: 15 100% 50%;
  --booot-cinza-claro-hsl: 40 19% 88%;
  --booot-cinza-medio-hsl: 40 8% 70%;

  /* ---- SEMANTIC COLORS --------------------------------------------- */
  --bg-dark: var(--booot-carvao);
  --bg-light: var(--booot-creme);
  --fg-dark: var(--booot-creme);   /* foreground sobre superfície escura (bg carvão) */
  --fg-light: var(--booot-carvao); /* foreground sobre superfície clara (bg creme) */
  --accent: var(--booot-laranja);
  --muted: var(--booot-cinza-medio);
  --line: color-mix(in srgb, var(--booot-carvao) 16%, transparent);

  /* ---- LADDER DE TEXTO SOBRE ESCURO (bg carvão) -------------------- */
  /* hierarquia por opacidade do creme · base creme/carvão ~12.5:1, então
     mesmo os níveis baixos seguem legíveis no escuro. Use o NÍVEL, não opacidade solta.
     AA: -body(.72) e acima = corpo AA · -muted(.55) = secundário · -faint/-dim = rótulo/decorativo. */
  --fg-on-dark: var(--booot-creme);                              /* 100% · títulos, ênfase máxima */
  --fg-on-dark-strong: hsl(var(--booot-creme-hsl) / .92);       /* quase cheio · frase de fecho */
  --fg-on-dark-body: hsl(var(--booot-creme-hsl) / .72);         /* corpo, lead, sub */
  --fg-on-dark-muted: hsl(var(--booot-creme-hsl) / .55);        /* secundário */
  --fg-on-dark-faint: hsl(var(--booot-creme-hsl) / .42);        /* rótulo, eyebrow, micro */
  --fg-on-dark-dim: hsl(var(--booot-creme-hsl) / .28);          /* placeholder, o mais fraco */
  --surface-on-dark: hsl(var(--booot-creme-hsl) / .05);         /* card sobre carvão */
  --hairline-on-dark: 1px solid hsl(var(--booot-creme-hsl) / .08); /* borda sobre carvão */
  /* creme near-white SÓ sobre LARANJA: o creme padrão #E9DCC9 dá 2.6:1 no CTA (sub AA-grande, laranja é claro);
     este dá ~3.25:1 (AA-grande pra rótulo bold >=17px). Sobre carvão NUNCA usar este (use a ladder fg-on-dark). */
  --fg-on-laranja: hsl(29 100% 96%);

  /* ---- TYPOGRAPHY -------------------------------------------------- */
  --font-sans: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --lh-display: 1.05;
  --lh-heading: 1.18;
  --lh-body: 1.6;

  --tracking-display: -0.038em;
  --tracking-tight: -0.025em;
  --tracking-caps: 0.18em;

  --fs-eyebrow: clamp(.75rem, 1vw, .875rem);
  --fs-body: clamp(.9375rem, 1.3vw, 1.0625rem);
  --fs-body-lg: clamp(1.0625rem, 1.5vw, 1.1875rem);
  --fs-h3: clamp(1.25rem, 2.2vw, 1.55rem);
  --fs-h2: clamp(1.6rem, 3.4vw, 2.4rem);
  --fs-display: clamp(2.25rem, 6vw, 3.5rem);

  /* ---- SPACING (escala 0.5/1/1.5/2/3/4/5/7 rem) -------------------- */
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5rem;
  --space-9: 7rem;

  /* ---- RADIUS ------------------------------------------------------ */
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;

  /* ---- SURFACES (elevação sutil sobre fundo) ----------------------- */
  --surface-dark-lift: color-mix(in srgb, var(--booot-creme) 8%, transparent);
  --surface-light-lift: color-mix(in srgb, var(--booot-carvao) 4%, transparent);

  /* ---- LINES (hairlines por contexto) ------------------------------ */
  --hairline-dark: 1px solid color-mix(in srgb, var(--booot-creme) 8%, transparent);
  --hairline-light: 1px solid color-mix(in srgb, var(--booot-carvao) 12%, transparent);

  /* ---- SHADOW / GLOW ----------------------------------------------- */
  --glow-accent-soft: 0 12px 32px color-mix(in srgb, var(--booot-laranja) 14%, transparent);
  /* sombra neutra de superfície flutuante (modal/dropdown/menu) · NÃO usa laranja (glow = só ignição) */
  --shadow-overlay: 0 16px 48px color-mix(in srgb, var(--booot-carvao) 22%, transparent);

  /* ---- Z-INDEX (camadas · evita magic numbers) --------------------- */
  --z-base: 0;
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ---- MOTION (derivado · ritmo do sistema) ------------------------ */
  --motion-fast: 180ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --ease-standard: cubic-bezier(.2, .6, .2, 1);

  /* ---- A11Y (recomendado · ver foundations/02-color.md) ------------ */
  --focus-ring: 2px solid var(--booot-laranja);
  --focus-offset: 2px;

  /* ---- FORMA & COMPONENTE ------------------------------------------ */
  --cut-angle: 62deg;          /* corte diagonal canônico (crescimento) · sobe da esquerda p/ direita */
  --cta-min-size: 1.0625rem;   /* rótulo CTA laranja: mínimo 17px E peso >=700 (AA grande · creme/laranja 3.25:1) */

  /* ---- APP-UI v1.1 (Painel, formulário, tabela · composição, ZERO cor nova) -- */
  /* divisórias semânticas por superfície (substituem o --line ambíguo, deprecado) */
  --line-on-light: color-mix(in srgb, var(--booot-carvao) 12%, transparent);
  --line-on-dark: color-mix(in srgb, var(--booot-creme) 8%, transparent);
  /* texto secundário legível por superfície (cinza-medio só vale sobre carvão) */
  --text-secondary-on-light: color-mix(in srgb, var(--booot-carvao) 72%, transparent); /* 6.4:1 · AA */
  --text-secondary-on-dark: var(--booot-cinza-medio);
  /* estado · valência por ícone+peso, NUNCA só por cor (ver 06-iconography) */
  --state-positive: var(--booot-laranja);
  --state-attention: var(--booot-laranja);
  --state-negative: var(--booot-carvao);
  /* formulário (o form de onboarding é a etapa B do método) */
  --field-bg: var(--surface-light-lift);
  --field-border: color-mix(in srgb, var(--booot-carvao) 12%, transparent);
  --field-border-focus: var(--booot-laranja);
  --field-disabled: color-mix(in srgb, var(--booot-carvao) 38%, transparent);
  --placeholder-color: color-mix(in srgb, var(--booot-carvao) 50%, transparent);
  /* tabela (o Painel de Alunos Novos é primariamente tabela) */
  --table-header-bg: var(--booot-carvao);
  --table-header-fg: var(--booot-creme);
  --row-stripe: var(--surface-light-lift);
  --row-hover: color-mix(in srgb, var(--booot-carvao) 6%, transparent);
}