/* ─── Design System: Tokens ─────────────────────────────────── */
:root {
  /* Primary — escala completa a partir do teal de marca */
  --primary-50:  #e9f7fa;
  --primary-100: #c8ecf2;
  --primary-200: #96dbe6;
  --primary-300: #55c2d4;
  --primary-400: #1ba3c2;
  --primary-500: #008ea8;
  --primary-600: #007690;
  --primary-700: #006b85;
  --primary-800: #045268;
  --primary-900: #093c4c;

  /* Identidade do tenant (UX_ALUNO_SAAS.md §2.1/§2.2) — injetados por
     GET /api/theme em <style id="tenant-theme"> no boot (index.html),
     ANTES deste arquivo carregar. Os valores abaixo são só o fallback:
     tenant padrão (IBC) ou qualquer contexto sem tema resolvido (páginas
     fora do SPA, /api indisponível) renderiza EXATAMENTE como hoje — e
     batem com o que core.theming realmente calcula para a cor do IBC
     (#008ea8), então o fallback e o valor injetado nunca divergem. */
  --brand-primary:         #008ea8;
  --brand-primary-hover:   #00839b;   /* escurecer(#008ea8, 8%) — ver core/theming.py */
  --brand-primary-subtle:  rgba(0, 142, 168, 0.10);
  --brand-gradient:        linear-gradient(120deg, #008ea8 0%, #0056a8 100%);   /* +20° de matiz */
  --brand-on-primary:      #0a0f1e;

  --primary:         var(--brand-primary, var(--primary-500));
  /* --primary-dark NÃO segue --brand-primary-hover: é usado hoje em ~10
     componentes (hero, trails, badges, onboarding) com o tom --primary-700
     desenhado manualmente — a fórmula genérica de hover (escurecer 8%)
     produz um teal visivelmente diferente. Componentes NOVOS que queiram
     hover reagindo ao tema do tenant usam --brand-primary-hover
     diretamente; --primary-dark fica como está até um design pass dedicado. */
  --primary-dark:    var(--primary-700);
  --primary-light:   var(--primary-400);
  --primary-lighter: #e8f4f8;

  /* Violeta — parceiro de gradiente do teal (não é o clichê roxo→azul:
     é ancorado na marca, usado com moderação em CTAs/destaques/glow). */
  --violet-300: #b9a6fb;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6423c7;

  /* Ciano elétrico — realce "neon" do próprio teal, só em brilhos/glow. */
  --neon-cyan: #22e3ee;

  /* Streak (GAM-02, UX_ALUNO_SAAS.md §2.1/§2.3): cor FIXA da plataforma —
     o tenant nunca configura isto. Igual em todo tenant de propósito
     (vira reconhecível, é assinatura da marca da plataforma, não do
     tenant, ao contrário de --brand-primary). */
  --streak-flame: #f97316;

  /* Semantic — escalas com tint/shade para badges, alerts, ícones */
  --success-100: #d7f5e3; --success-500: #1fa96a; --success-700: #0f7a4a;
  --warning-100: #fdf0d5; --warning-500: #e8a13d; --warning-700: #b57519;
  --danger-100:  #fbe2e1; --danger-500:  #e0533f; --danger-700:  #ab3423;
  --info-100:    #dbeafe; --info-500:    #3d82c4; --info-700:    #1f5a91;

  --success: var(--success-500);
  --warning: var(--warning-500);
  --danger:  var(--danger-500);
  --info:    var(--info-500);

  /* Grays */
  --dark:          #2c3e50;
  --gray-dark:     #34495e;
  --gray:          #7f8c8d;
  --gray-light:    #ecf0f1;
  --gray-lighter:  #f5f7fa;
  --white:         #ffffff;

  /* Decorative */
  --gold-100: #fdf3d1;
  --gold-300: #f6d757;
  --gold-500: #f1c40f;
  --gold-700: #b3900a;
  --gold:   var(--gold-500);
  --silver: #95a5a6;
  --bronze: #cd7f32;

  /* Sombras coloridas (glow) — hover de CTA/cards de destaque; não
     substituem --shadow-* (elevação neutra) no resto da interface. */
  --glow-primary: 0 0 1px rgba(34,227,238,.8), 0 0 24px rgba(0,142,168,.45), 0 0 56px rgba(124,58,237,.25);
  --glow-violet:  0 0 24px rgba(139,92,246,.45);
  --glow-ember:   0 0 22px rgba(255,107,53,.5);

  --gradient-brand: linear-gradient(120deg, var(--primary-500) 0%, var(--violet-600) 100%);
  --gradient-btn:   linear-gradient(135deg, var(--primary-400), var(--primary-600) 55%, var(--violet-600));

  /* Ícones — tamanhos padronizados */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;

  /* Typography — Sora (única família, pesos 400–800, display + corpo) */
  --font-display: 'Sora', -apple-system, sans-serif;
  --font-body:    'Sora', -apple-system, sans-serif;

  /* P0.2 (GAM-05): número de pontos do dashboard precisa ser o maior
     texto da página (48-56px) — maior que qualquer --text-h*/--text-2xl
     existente, então entram dois degraus novos na escala em vez de
     "inventar" um valor solto direto no componente.

     Nomeados --text-display-lg/xl (não "5xl"/"6xl" no estilo Tailwind):
     achado real durante o teste E2E desta PR — nesta stack de browser
     (chromium headless, sandbox de teste), UMA custom property chamada
     literalmente --text-5xl ou --text-6xl faz o var() usado em
     `font-size` computar pro valor inicial (16px) mesmo com
     getComputedStyle().getPropertyValue() retornando o valor certo
     (3rem) — outras propriedades (font-weight) na MESMA regra aplicam
     normalmente, e renomear a custom property (mantendo o valor idêntico)
     resolve na hora. Não foi possível isolar a causa raiz (não há
     colisão de nome em lugar nenhum do repo, nem @property, nem @layer,
     nem !important concorrente — CDP CSS.getMatchedStylesForNode mostra
     só a regra esperada ganhando). Documentado aqui pra não reintroduzir
     esse padrão de nome por engano numa próxima escala tipográfica. */
  --text-display-xl: 3.5rem;   /* 56px */
  --text-display-lg: 3rem;     /* 48px */
  --text-2xl: 2.5rem;
  --text-xl:  2rem;
  --text-lg:  1.5rem;

  /* GAM-05 PR 3 (P1.4): escala explícita 14/16/20/28/40/56px pedida pro
     polimento do dashboard. 14/16px já existiam (--text-sm/--text-base),
     40/56px também já existiam (--text-2xl/--text-display-xl) — só 20px e
     28px faltavam como degrau nomeado (existia --text-h4 em 1.3rem/20.8px,
     perto mas não exato). Nomes numéricos de propósito (não "-md"/"-xl2"
     etc.): ver o achado documentado acima sobre --text-5xl/--text-6xl não
     aplicarem em font-size neste ambiente de teste — evita reintroduzir
     esse padrão de nome por engano. */
  --text-20: 1.25rem;  /* 20px */
  --text-28: 1.75rem;  /* 28px */

  /* Escala tipográfica corajosa (rev 2) */
  --text-h1: 3.4rem;
  --text-h2: 2.2rem;
  --text-h3: 1.6rem;
  --text-h4: 1.3rem;
  --text-base:1rem;
  --text-sm:  0.875rem;
  --text-xs:  0.75rem;

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

  --lh-tight:   1.2;
  --lh-snug:    1.3;
  --lh-normal:  1.4;
  --lh-relaxed: 1.6;
  --lh-loose:   1.8;

  /* Spacing (8px scale) */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Tracking (letter-spacing) — leve aperto em títulos grandes */
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.04em;

  /* Shadows — 3 níveis de profundidade */
  --shadow-sm: 0 1px 2px rgba(0, 30, 40, 0.05),
               0 2px 4px rgba(0, 30, 40, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 142, 168, 0.08),
               0 8px 16px rgba(0, 142, 168, 0.08);
  --shadow-lg: 0 12px 24px rgba(0, 142, 168, 0.15),
               0 20px 40px rgba(0, 142, 168, 0.12);
  --shadow-xl: 0 20px 40px rgba(0, 142, 168, 0.18),
               0 32px 64px rgba(0, 142, 168, 0.14);
  /* P0.2 (GAM-05): card "Sua pontuação" precisa se destacar mais que os
     outros cartões de --shadow-lg do dashboard — reaproveita a MESMA
     progressão de cor (teal) e só aprofunda o alcance/opacidade, em vez
     de introduzir uma cor de sombra nova. */
  --shadow-elevated: 0 16px 32px rgba(0, 142, 168, 0.20),
                      0 28px 56px rgba(0, 142, 168, 0.16);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ── Legacy variable aliases (backward-compat with JS-generated HTML) ── */
  --navy:        #006b85;
  --navy-light:  #008ea8;
  --cream:       #f9f6f0;
  --cream2:      #f0ebe0;
  --text:        #2c3e50;
  --muted:       #7f8c8d;
  --radius:      var(--radius-lg);
  --gold-light:  #33adc0;
  --success-bg:  #d4edda;
  --danger-bg:   #f8d7da;

  /* ── Marca da plataforma XR Educação (fixa, não muda por tenant) ── */
  --xr-black:    #07070d;
  --xr-ink:      #11111c;
  --xr-cyan:     #12e1f2;
  --xr-violet:   #8b5cc4;
  --xr-magenta:  #f0168a;
  --xr-gradient: linear-gradient(120deg, var(--xr-cyan) 0%, var(--xr-violet) 50%, var(--xr-magenta) 100%);

  /* ── Admin surface tokens (UX_ADMIN_SAAS §5) ── */
  --bg-base:     #f5f7fa;
  --bg-surface:  #ffffff;
  --bg-hover:    #f0f2f5;
  --text-primary:   #1a2332;
  --text-secondary: #64748b;
  --text-muted:     #94a3b8;
  --border:      #e2e8f0;
  --border-strong: #cbd5e1;

  /* ── Density (UX_ADMIN_SAAS §5) ── */
  --table-pad-y: 8px;
  --table-pad-x: 12px;
  --table-font:  .85rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-base:     #0f172a;
    --bg-surface:  #1e293b;
    --bg-hover:    #334155;
    --text-primary:   #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;
    --border:      #334155;
    --border-strong: #475569;
  }
}
:root[data-theme="dark"] {
  --bg-base:     #0f172a;
  --bg-surface:  #1e293b;
  --bg-hover:    #334155;
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --border:      #334155;
  --border-strong: #475569;
}

.density-compact {
  --table-pad-y: 4px;
  --table-pad-x: 8px;
  --table-font:  .78rem;
}