/* ============================================================
   PROFESSOR LEÃO — DESIGN SYSTEM (fonte única de tokens)
   design-system.css

   ESPELHA o export oficial do Claude Design do dono
   (tokens/colors.css + typography.css + spacing.css). É a base do
   vínculo Code↔Design: editar aqui = editar o sistema inteiro.

   COMO USAR: carregar POR ÚLTIMO no <head> (depois do styles.css
   e/ou do <style> inline da página) — o :root daqui vence a cascata
   e todas as regras que usam var(--token) adotam o sistema, sem
   reescrever cada regra. Jogos individuais (jogos/*.html) usam um
   verde local e NÃO carregam este arquivo (de propósito).
   ============================================================ */

:root {
  /* ───────── CORES (tokens/colors.css) ───────── */
  /* Azul marinho — identidade principal */
  --navy:       #0A1628;  --navy-2:     #0F1E38;  --navy-3:     #152545;
  --navy-4:     #1B2E6B;  --navy-mid:   #243580;  --navy-light: #2D4299;
  /* Accent azul brilhante */
  --accent:       #4A6CF7;  --accent-light: #6B89FF;  --accent-dark: #3356E0;
  --accent-glow:  rgba(74,108,247,0.25);
  /* Cinza / prata (a juba do leão) */
  --silver:       #8892B4;  --silver-light: #A8B4D0;  --silver-dark: #7E8CB0;
  /* Dourado (marca / marketing) */
  --gold:         #F5B301;  --gold-light:   #FBBF24;  --gold-soft:   #FFD36B;
  /* Branco e neutros */
  --white:      #FFFFFF;  --white-off:  #F0F4FF;  --gray-light: #CBD5E1;
  --gray-mid:   #94A0BE;  --gray-dark:  #334155;
  /* Cyan */
  --cyan:       #38BDF8;  --cyan-dim:   rgba(56,189,248,0.15);
  /* Estado */
  --ok:   #22c55e;  --good: #16a34a;  --bad:  #ef4444;  --err:  #dc2626;  --warn: #f59e0b;
  --whatsapp: #25D366;
  /* Accents de jogos (Arena) — um por matéria */
  --game-emerald: #10b981;  --game-emerald-l: #34d399;
  --game-violet:  #8b5cf6;  --game-violet-l:  #a78bfa;
  --game-amber:   #f59e0b;  --game-amber-l:   #fbbf24;
  --game-cyan:    #06b6d4;  --game-cyan-l:    #22d3ee;
  --game-rose:    #f43f5e;  --game-rose-l:    #fb7185;
  /* Aliases semânticos (prefira estes em telas novas) */
  --bg-page:      var(--navy);   --bg-surface:   var(--navy-2);
  --bg-surface-2: var(--navy-3); --bg-input:     var(--navy-3);
  --text-strong:  var(--white);  --text-body:    rgba(255,255,255,0.72);
  --text-muted:   var(--gray-mid); --text-accent: var(--accent-light);
  --border-soft:   rgba(74,108,247,0.12);  --border-mid:    rgba(74,108,247,0.25);
  --border-strong: rgba(74,108,247,0.45);  --border-hairline: rgba(255,255,255,0.08);
  --focus-ring:    0 0 0 3px rgba(74,108,247,0.15);

  /* ───────── TIPOGRAFIA (tokens/typography.css) ───────── */
  /* Fallback de EMOJI/SÍMBOLOS no fim de toda cadeia: garante ícones (🦁🎖️🔥▶…)
     em qualquer computador (inclusive corporativos/antigos), sem CDN/offline-safe.
     Só entra em ação para glifos que a fonte de texto não tem (não muda o texto). */
  --emoji: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', 'Segoe UI Symbol', 'Noto Emoji', sans-serif;
  --font-heading: 'Montserrat', var(--emoji);
  --font-body:    'Open Sans', var(--emoji);
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', var(--emoji);
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --fw-black: 900;
  --fs-display: clamp(32px,4.5vw,56px); --fs-h1: clamp(30px,5vw,52px); --fs-h2: clamp(28px,4vw,42px);
  --fs-h3: 19px; --fs-h4: 17px; --fs-lg: 17px; --fs-body: 15px; --fs-sm: 13.5px; --fs-xs: 12.5px; --fs-2xs: 11px;
  --lh-tight: 1.2; --lh-snug: 1.45; --lh-base: 1.65; --lh-loose: 1.8;
  --ls-badge: 2px; --ls-label: 1px; --ls-tight: 0.3px;

  /* ───────── ESPAÇAMENTO / RAIO / SOMBRA / MOVIMENTO (tokens/spacing.css) ───────── */
  --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --radius-pill: 100px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --container: 1200px; --container-pad: 24px; --section-y: 96px;
  --shadow-sm: 0 4px 16px rgba(0,0,0,0.3); --shadow: 0 8px 40px rgba(0,0,0,0.45);
  --shadow-accent: 0 4px 24px rgba(74,108,247,0.35); --shadow-pop: 0 16px 48px rgba(0,0,0,0.6);
  --transition: 0.3s ease; --transition-fast: 0.15s ease; --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --lift: -4px;

  /* ───────── COMPAT — nomes já usados no código → tokens oficiais ───────── */
  --al: var(--accent-light); --sil: var(--silver);
  --fh: var(--font-heading); --fb: var(--font-body);
  --font-h: var(--font-heading); --font-b: var(--font-body);
  --success: var(--ok); --danger: var(--bad); --tr: var(--transition);
  --accent-deep: var(--accent-dark);
  --silver-c: #94A3B8; --bronze: #B87333;
}

/* ───────── Acabamentos globais seguros ───────── */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(74,108,247,0.30); color: #fff; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Barra de rolagem discreta no tema escuro */
* { scrollbar-width: thin; scrollbar-color: rgba(107,137,255,0.35) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(107,137,255,0.30); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(107,137,255,0.5); background-clip: padding-box; }

/* ───────── Enhancements ADITIVOS (não alteram cor/forma; só hover/realce) ───────── */
.btn-continue, .btn-play, .btn-rank, .btn-gerar-plano, .btn-ver-plano,
.btn-submit-plano, .btn-pdf, .btn-refazer, .lh-btn, .ph-btn, .materiais__cta {
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn-continue:hover, .btn-play:hover, .btn-rank:hover, .btn-gerar-plano:hover,
.btn-ver-plano:hover, .btn-submit-plano:hover, .lh-btn:hover, .ph-btn:hover, .materiais__cta:hover {
  transform: translateY(-2px); filter: brightness(1.05);
}
.course-card, .plano-summary-card, .plano-empty-card {
  border: 1px solid var(--border-hairline); box-shadow: var(--shadow);
}
