/* FIRST PRIME DIGITAL — tokens do design system. Toda cor, sombra, raio e espaçamento nasce aqui. */
:root {
  color-scheme: dark;

  /* Marca: azul-marinho */
  --navy-950: #040509;
  --navy-900: #080a10;
  --navy-800: #0f121b;
  --navy-700: #171c2a;
  /* Marca: azul secundário */
  --blue-500: #4a7de0;
  --blue-300: #9db8f2;
  /* Marca: dourado */
  --gold-500: #d9a63f;
  --gold-400: #ebc56a;
  --gold-300: #f0d9a1;
  /* Neutros */
  --white: #ffffff;
  --ink-100: #f2f5fc;  /* texto principal */
  --ink-300: #bcc7de;  /* texto secundário */
  --ink-500: #8c9bbd;  /* texto de apoio (só em tamanhos ≥ 14px) */
  /* Estados */
  --ok-400: #5fd3a0;
  --danger-400: #ff9a9a;

  /* Superfícies */
  --bg: var(--navy-900);
  --surface: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.095);
  --surface-solid: #0d1017;  /* fallback sem backdrop-filter */
  --border: rgba(255, 255, 255, 0.11);
  --border-gold: rgba(226, 178, 84, 0.55);

  /* Vidro e fundos translúcidos */
  --glow-blue: rgba(74, 125, 224, 0.14);
  --glow-gold: rgba(240, 190, 90, 0.16);
  --glass-sidebar-top: rgba(4, 5, 9, 0.94);
  --glass-sidebar-bottom: rgba(10, 12, 19, 0.9);
  --glass-topbar: rgba(6, 7, 12, 0.8);
  --glass-bottomnav: rgba(4, 5, 9, 0.94);
  --field-bg: rgba(4, 5, 9, 0.6);
  /* Estados: bordas e fundos */
  --ok-border: rgba(95, 211, 160, 0.4);
  --danger-border: rgba(255, 154, 154, 0.4);
  --danger-bg: rgba(255, 154, 154, 0.1);

  /* Sombras */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 48px rgba(0, 0, 0, 0.6);

  /* Raios */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* Espaçamento */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Tipografia (somente fontes do sistema: nada é baixado) */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Etapa 6 — identidade unificada (portal novo + site atual): azul-marinho, ouro e branco */
  --gold-600: #b8862b;
  --gold-700: #8a5f18;
  --grad-gold: linear-gradient(180deg, var(--gold-300), var(--gold-500) 55%, var(--gold-600));
  --grad-gold-h: linear-gradient(90deg, var(--gold-600), var(--gold-300), var(--gold-500));
  --grad-chrome: linear-gradient(180deg, #ffffff 10%, #c8d3ea 48%, #8d9cbd 52%, #e9eefb 100%);
  --grad-sala:
    radial-gradient(60% 55% at 50% 30%, rgba(240, 190, 90, 0.16), transparent 70%),
    linear-gradient(180deg, #121520, #06070c);
  --scrim: rgba(4, 5, 9, 0.66);
  --scrim-forte: rgba(4, 5, 9, 0.85);
  --brilho-ouro: 0 0 0 2px var(--gold-400), 0 0 34px rgba(240, 217, 161, 0.5), 0 0 90px rgba(212, 168, 75, 0.28);
  --sombra-livro: 0 30px 40px -12px rgba(0, 0, 0, 0.75), 0 8px 14px rgba(0, 0, 0, 0.5);
  --sombra-chao: rgba(0, 0, 0, 0.55);
  --lombada: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(255, 255, 255, 0.16) 5%, rgba(0, 0, 0, 0.12) 9%, transparent 16%);
  --brilho-capa: linear-gradient(115deg, rgba(255, 255, 255, 0.22), transparent 38%);
  --estado-compra: var(--blue-300);
  --estado-compra-bg: rgba(74, 125, 224, 0.2);
  --estado-antecipado: var(--ok-400);
  --estado-antecipado-bg: rgba(95, 211, 160, 0.16);
  --estado-bloqueado: var(--ink-300);
  --estado-bloqueado-bg: rgba(140, 155, 189, 0.2);
  --estado-liberado-bg: rgba(212, 168, 75, 0.22);

  /* Game Station: cores dos cartões (contraste ≥ 4.5:1 com texto branco) */
  --game-1a: #2a63c9; --game-1b: #163d86;
  --game-2a: #7a45d1; --game-2b: #46257f;
  --game-3a: #c43a72; --game-3b: #7d1f49;
  --game-4a: #c4601d; --game-4b: #7f3a0c;
  --game-5a: #1b8a68; --game-5b: #0d5641;
  --game-6a: #9a7a12; --game-6b: #5f4a06;
  --game-7a: #c23c33; --game-7b: #7c1f1a;
  --game-8a: #1f88a8; --game-8b: #0f5468;


  /* Etapa 6A — atmosfera cinematográfica: preto/grafite, luz quente dourada, bokeh */
  --bokeh: rgba(255, 190, 96, 0.34);
  --bokeh-2: rgba(255, 214, 140, 0.2);
  --atmosfera:
    radial-gradient(900px 520px at 50% -8%, rgba(240, 180, 80, 0.2), transparent 62%),
    radial-gradient(560px 440px at 3% 34%, rgba(255, 186, 92, 0.11), transparent 70%),
    radial-gradient(620px 500px at 98% 40%, rgba(255, 180, 80, 0.09), transparent 70%),
    radial-gradient(1200px 500px at 50% 120%, rgba(74, 125, 224, 0.1), transparent 70%),
    linear-gradient(180deg, #0d0f16, #05060a 60%, #030407);
  --piso: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
  --luz-topo: radial-gradient(38% 70% at 50% 0%, rgba(255, 216, 140, 0.24), transparent 72%);
  --reflexo-piso: radial-gradient(50% 100% at 50% 0%, rgba(240, 190, 90, 0.22), transparent 70%);
  --brilho-borda: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(226, 178, 84, 0.14);
  --page-edge: #d3ccb9;
  --page-edge-2: #8d8674;
  --spine: #020204;
  /* Etapa 6A.7 — livro aberto (dupla página) e virada de folha */
  --vinco-esq: linear-gradient(270deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.1) 40%, transparent);
  --vinco-dir: linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.1) 40%, transparent);
  --folha-sombra: linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.08) 65%, transparent);
  --livro-base: linear-gradient(180deg, #d9d2bf, #8f8875);  --sala-bg:
    radial-gradient(38% 60% at 50% 38%, rgba(255, 196, 100, 0.13), transparent 72%),
    linear-gradient(180deg, rgba(14, 16, 24, 0.9), rgba(5, 6, 10, 0.96));
  --hairline-ouro: rgba(226, 178, 84, 0.22);
  --reflexo-livro: linear-gradient(transparent 66%, rgba(255, 255, 255, 0.2));
  --lomb-bg: linear-gradient(90deg, var(--spine), rgba(20, 20, 26, 0.96) 70%, rgba(80, 66, 40, 0.5));
  --rim-capa: inset 0 0 0 1px rgba(255, 224, 160, 0.28);
  --modal-bg: rgba(2, 2, 5, 0.82);
  --previa-bg: radial-gradient(60% 50% at 20% 0%, rgba(240, 190, 90, 0.14), transparent 70%), linear-gradient(160deg, #141722, #07080d);
  --grad-card-jogos: linear-gradient(120deg, #191d2c, #0d0f17 60%, #07080d);  /* Layout */
  --sidebar-w: 288px;
  --rail-w: 84px;
  --topbar-h: 64px;
  --bottomnav-h: 68px;
  --content-max: 1200px;
  --content-wide: 1480px;

  /* Etapa 6A.10 — Home fiel à referência: biblioteca à noite, mesa escura, painel dourado */
  --home-sidebar-bg: linear-gradient(180deg, #06070b, #030406);
  --home-linha-ouro: linear-gradient(180deg, rgba(255, 214, 130, 0.95), rgba(226, 178, 84, 0.35) 45%, rgba(226, 178, 84, 0.7));
  --home-veu:
    linear-gradient(90deg, rgba(3, 4, 7, 0.68), rgba(3, 4, 7, 0.18) 32%, transparent 58%),
    linear-gradient(180deg, rgba(3, 4, 7, 0.2), transparent 20%, transparent 56%, rgba(3, 4, 7, 0.8));
  --home-mesa:
    radial-gradient(60% 120% at 50% 0%, rgba(255, 196, 100, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(38, 30, 20, 0.92), rgba(10, 8, 6, 0.96) 38%, rgba(3, 3, 4, 1));
  --home-mesa-fio: rgba(240, 190, 90, 0.26);
  --home-painel-bg:
    radial-gradient(70% 140% at 12% 0%, rgba(240, 190, 90, 0.1), transparent 70%),
    linear-gradient(100deg, rgba(20, 16, 11, 0.94), rgba(8, 7, 6, 0.95) 62%, rgba(28, 19, 9, 0.94));
  --home-painel-borda: rgba(240, 190, 90, 0.7);
  --home-atalho-bg: linear-gradient(100deg, rgba(20, 16, 11, 0.9), rgba(7, 6, 5, 0.94));
  --home-nav-ativo: linear-gradient(90deg, rgba(212, 168, 75, 0.3), rgba(212, 168, 75, 0.08) 80%);
  --home-botao-ouro: linear-gradient(180deg, #ffe08c, #efbd52 55%, #d9a63f);
  --home-chip-ok-bg: rgba(40, 140, 90, 0.3);
  --home-ceu: linear-gradient(180deg, rgba(50, 30, 40, 0), rgba(190, 110, 40, 0.5) 55%, rgba(255, 190, 100, 0.85));
  --home-luz-mesa: rgba(255, 210, 130, 0.35);
}