:root {
  /* Plataforma Arcade Kiz: grafite + amarelo (identidade global). */
  --platform-bg: #111114;
  --platform-surface: #1D1D22;
  --platform-surface-elevated: #17171B;
  --platform-surface-hover: #26262D;
  --platform-border: #33333B;
  --platform-border-strong: #4A4A55;
  --platform-primary: #FFD23F;
  --platform-primary-hover: #FFDD66;
  --platform-primary-muted: #B8972E;
  --platform-on-primary: #111114;
  --platform-text: #F5F5F2;
  --platform-text-secondary: #C2C2C8;
  --platform-muted: #8A8A94;

  /* Acentos de universo: dot, eyebrow, borda, estado ativo e arte;
     nunca em superfícies grandes nem no CTA global. */
  --cat-sports: #3DDC84;
  --cat-entertainment: #FF5C8A;
  --entertainment-accent: var(--cat-entertainment);
  --cat-geek: #9D8CFF;
  --geek-accent-hover: #B6A9FF;
  --geek-accent-muted: #7564CF;

  /* Domínio Futebol: accent lime dos jogos, ativo só em .fa-scope--football. */
  --football-accent: #B8F34A;
  --football-accent-hover: #C9FA6A;
  --football-accent-muted: #82AE39;

  /* Base palette usada pelos componentes (aponta para a plataforma). */
  --bg: var(--platform-bg);
  --bg-elevated: var(--platform-surface-elevated);
  --surface: var(--platform-surface);
  --surface-hover: var(--platform-surface-hover);
  --border: var(--platform-border);
  --border-strong: var(--platform-border-strong);
  --accent: var(--platform-primary);
  --accent-hover: var(--platform-primary-hover);
  --accent-muted: var(--platform-primary-muted);
  --text: var(--platform-text);
  --text-secondary: var(--platform-text-secondary);
  --text-muted: var(--platform-muted);
  --success: #70E58B;
  --error: #FF6B6B;
  --warning: #F5C451;

  /* v2: campo do Monte o XI */
  --pitch: #11201A;
  --pitch-line: rgba(245, 245, 242, .16);
  --slot-label-bg: rgba(17, 17, 20, .84);

  /* Semantic aliases */
  --on-accent: var(--platform-on-primary);
  --surface-page: var(--bg);
  --surface-card: var(--surface);
  --surface-card-hover: var(--surface-hover);
  --surface-sunken: var(--bg);
  --track: var(--bg);
  --focus-ring: var(--accent);
  --text-body: var(--text);
  --text-supporting: var(--text-secondary);
  --text-caption: var(--text-muted);
  --state-selected: var(--accent);
  --state-hover-border: var(--accent-muted);
}

/* Tema de universo: aplicar a classe no container; componentes leem var(--cat). */
.fa-theme--sports { --cat: var(--cat-sports); }
.fa-theme--ent { --cat: var(--cat-entertainment); }
.fa-theme--geek { --cat: var(--cat-geek); }

/* Accent de domínio: dentro das páginas do Futebol, CTAs, HUD e seleção usam o
   lime dos jogos. Aliases dependentes precisam ser redeclarados no escopo. */
.fa-scope--football {
  --accent: var(--football-accent);
  --accent-hover: var(--football-accent-hover);
  --accent-muted: var(--football-accent-muted);
  --focus-ring: var(--football-accent);
  --state-selected: var(--football-accent);
  --state-hover-border: var(--football-accent-muted);
}

/* Séries usa o rosa do universo Entretenimento na landing e no jogo. */
.fa-scope--series {
  --accent: var(--entertainment-accent);
  --accent-hover: color-mix(in srgb, var(--entertainment-accent) 80%, white);
  --accent-muted: color-mix(in srgb, var(--entertainment-accent) 72%, var(--platform-bg));
  --on-accent: var(--platform-bg);
  --focus-ring: var(--entertainment-accent);
  --state-selected: var(--entertainment-accent);
  --state-hover-border: var(--accent-muted);
}

/* Os jogos de Pokémon usam o roxo do universo Games & Geek. */
.fa-scope--pokemon {
  --accent: var(--cat-geek);
  --accent-hover: var(--geek-accent-hover);
  --accent-muted: var(--geek-accent-muted);
  --on-accent: var(--platform-bg);
  --focus-ring: var(--cat-geek);
  --state-selected: var(--cat-geek);
  --state-hover-border: var(--geek-accent-muted);
}

/* Elementos da plataforma (header, rodapé, Desafio do dia) mantêm o amarelo
   global mesmo dentro de um domínio. */
.fa-platform {
  --accent: var(--platform-primary);
  --accent-hover: var(--platform-primary-hover);
  --accent-muted: var(--platform-primary-muted);
  --focus-ring: var(--platform-primary);
  --state-selected: var(--platform-primary);
  --state-hover-border: var(--platform-primary-muted);
}