/* ═══════════════════════════════════════════════════════════════════
   CLAIRO v2 — Tokens de design compartilhados
   ═══════════════════════════════════════════════════════════════════
   As 3 variantes estéticas compartilham cores base, tipografia e
   fallbacks. O que varia entre elas é ESCALA, DENSIDADE e COMPOSIÇÃO
   — não as cores primárias nem a stack tipográfica.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* superfícies — escala 6 níveis dark */
  --bg:   #09090d;
  --s1:   #0e0e15;
  --s2:   #13131c;
  --s3:   #191924;
  --s4:   #20202e;
  --s5:   #282838;

  /* bordas (rgba branco — funcionam em qualquer superfície) */
  --b1: rgba(255,255,255,.055);
  --b2: rgba(255,255,255,.11);
  --b3: rgba(255,255,255,.19);

  /* textos — do brilhante ao apagado */
  --t1: #ededf5;
  --t2: #9898b8;
  --t3: #58587a;
  --t4: #35354e;

  /* acento principal — laranja quente */
  --ac:  #e05c30;
  --acg: rgba(224,92,48,.16);

  /* secundários funcionais (usar com parcimônia) */
  --gr:  #3a9e58;
  --grg: rgba(58,158,88,.12);

  /* cores por plataforma free-to-keep (banners e badges dos cards de jogo) */
  --epic:   #4a90f5;
  --epic-g: rgba(74,144,245,.14);
  --prime:  #f0a030;
  --prime-g:rgba(240,160,48,.14);
  --luna:   #9146ff;
  --luna-g: rgba(145,70,255,.14);
  --gog:    #c078d8;
  --gog-g:  rgba(192,120,216,.14);
  --steam:  #4cbcff;
  --steam-g:rgba(76,188,255,.14);

  /* cores por serviço de assinatura (cards estáticos do bloco 2)
     Luna usa --luna acima; as demais são exclusivas dos cards de assinatura */
  --gamepass:    #107c10;
  --gamepass-g:  rgba(16,124,16,.14);
  --psplus:      #0070d1;
  --psplus-g:    rgba(0,112,209,.14);
  --apple-arcade:   #1d1d1f;
  --apple-arcade-g: rgba(245,245,247,.08);
  --netflix:     #e50914;
  --netflix-g:   rgba(229,9,20,.14);
  --playpass:    #3ddc84;
  --playpass-g:  rgba(61,220,132,.14);

  /* raios */
  --r1: 8px;
  --r2: 12px;
  --r3: 16px;
  --r4: 24px;

  /* fontes (carregadas por cada variante) */
  --font-display: 'Barlow', system-ui, sans-serif;
  --font-tech:    'Rajdhani', 'Barlow', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
}

* , *::before , *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

button { font-family: inherit; }

/* fallbacks de cor para cards sem imagem */
.tc-teal   { background: linear-gradient(135deg, #061a14, #04120d); }
.tc-coral  { background: linear-gradient(135deg, #260a06, #1a0604); }
.tc-blue   { background: linear-gradient(135deg, #060e24, #040918); }
.tc-purple { background: linear-gradient(135deg, #14062a, #0e041c); }
.tc-green  { background: linear-gradient(135deg, #061a0a, #041206); }
.tc-amber  { background: linear-gradient(135deg, #24170a, #180e05); }

/* pulse de "ao vivo" — amplitude generosa, não epiléptico */
@keyframes clairo-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .18; }
}

/* scrollbar dark coerente */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--s4); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--s5); }