/* ============================================================
   TURNO FINAL BOARD GAME - DESIGN SYSTEM TOKENS
   Extraído diretamente da identidade visual da logo oficial:
   - Preto / Grafite profundo (base ardósia/couro)
   - Dourado metálico & envelhecido (ouro nobre do brasão e meeple)
   - Marfim / Off-white (tipografia de pedra e legibilidade)
   - Vermelho D20 / Peão rubi
   - Azul safira / Peão real
   ============================================================ */

:root {
  /* Dark é a identidade padrão da Turno Final. */
  color-scheme: dark;

  /* Bases e Superfícies */
  --color-background: #0E1015;
  --color-background-alt: #13161D;
  --color-surface: #1A1F29;
  --color-surface-secondary: #222937;
  --color-surface-card: #1E2430;
  --color-surface-hover: #293142;
  --color-surface-elevated: #28303F;
  --color-input-background: #171C25;
  --color-input-border: rgba(255, 255, 255, 0.13);
  --color-input-focus: #ECC769;
  --color-overlay: rgba(8, 10, 14, 0.80);
  --color-header: rgba(14, 16, 21, 0.97);
  --color-header-strong: #080A0D;
  --color-topbar-text: #D8CFBF;
  --color-topbar-link: #F6EFE2;
  --color-topbar-hover: #F7DC8C;
  --color-topbar-admin-text: #F7DC8C;
  --color-topbar-admin-background: rgba(212, 162, 55, 0.14);
  --color-navigation: rgba(14, 16, 21, 0.92);
  --color-hero-background: #101216;
  --color-hero-radiance: radial-gradient(ellipse at 46% 14%, rgba(212, 162, 55, 0.16) 0%, transparent 62%), linear-gradient(180deg, #151812 0%, #101216 100%);
  --color-hero-text: #F8F1E2;
  --color-hero-text-secondary: #D5CCBB;
  --color-hero-divider: rgba(255, 255, 255, 0.16);
  --color-home-panel: rgba(26, 31, 41, 0.72);
  --color-home-panel-strong: #151A22;
  --color-home-benefit: rgba(255, 255, 255, 0.035);
  --color-home-ornament: rgba(229, 184, 92, 0.13);
  --color-body-radiance: radial-gradient(circle at 50% 0%, rgba(212, 162, 55, 0.08) 0%, transparent 60%), radial-gradient(circle at 100% 100%, rgba(32, 84, 147, 0.05) 0%, transparent 40%), radial-gradient(circle at 0% 100%, rgba(194, 49, 38, 0.04) 0%, transparent 40%);
  --color-scroll-track: #0E1015;
  --color-scroll-thumb: #252C3A;

  /* Dourados Oficiais (Logo Turno Final) */
  --color-primary: #D4A237;
  --color-primary-dark: #8F6517;
  --color-primary-light: #ECC769;
  --color-gold: #E5B85C;
  --color-gold-muted: #A8894D;
  --color-gold-light: #F7DC8C;
  --color-gold-glow: rgba(212, 162, 55, 0.25);
  --color-gold-border: rgba(212, 162, 55, 0.3);
  --color-gold-border-subtle: rgba(212, 162, 55, 0.15);
  --color-gold-gradient: linear-gradient(135deg, #ECC769 0%, #D4A237 50%, #9B6F1A 100%);
  --color-gold-gradient-hover: linear-gradient(135deg, #F5D684 0%, #DFB045 50%, #B08022 100%);

  /* Textos & Tipografia (Marfim e Cinzas de Alta Legibilidade) */
  --color-text: #F5F1E8;
  --color-text-secondary: #A8B2C1;
  --color-text-muted: #788292;
  --color-text-inverse: #0E1015;

  /* Acentos da Logo (D20 e Peões) */
  --color-accent-red: #C23126;
  --color-accent-red-hover: #DF3C30;
  --color-accent-red-subtle: rgba(194, 49, 38, 0.15);
  --color-accent-blue: #205493;
  --color-accent-blue-hover: #2B6DB8;
  --color-accent-blue-subtle: rgba(32, 84, 147, 0.15);

  /* Status Semânticos */
  --color-success: #2E7D32;
  --color-success-subtle: rgba(46, 125, 50, 0.15);
  --color-warning: #E67E22;
  --color-warning-subtle: rgba(230, 126, 34, 0.15);
  --color-error: #D32F2F;
  --color-error-subtle: rgba(211, 47, 47, 0.15);

  /* Bordas e Divisores */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.04);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  /* Tipografia */
  --font-heading: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;

  /* Espaçamentos */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  /* Raios de Borda */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Sombras e Elevação */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 36px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 4px 20px rgba(212, 162, 55, 0.2);
  --shadow-gold-lg: 0 8px 30px rgba(212, 162, 55, 0.3);
  --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.40);
  --shadow-whatsapp: 0 18px 34px rgba(8, 86, 42, 0.36), 0 6px 14px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.30);
  --shadow-whatsapp-hover: 0 22px 38px rgba(8, 86, 42, 0.42), 0 8px 16px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);

  /* Atendimento */
  --color-whatsapp-button: linear-gradient(145deg, #35DC78 0%, #20B95C 52%, #159249 100%);
  --color-whatsapp-halo: rgba(74, 236, 137, 0.28);
  --color-whatsapp-halo-glow: radial-gradient(circle, rgba(47, 224, 112, 0.18) 0%, rgba(37, 211, 102, 0) 68%);
  --color-whatsapp-card: linear-gradient(145deg, rgba(37, 43, 53, 0.99), rgba(17, 21, 28, 0.99));
  --color-whatsapp-card-arrow: #171C25;
  --color-whatsapp-card-border: rgba(212, 162, 55, 0.38);
  --color-whatsapp-online: #7CE9A7;
  --color-whatsapp-notification: #FF5C67;

  /* Transições */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --max-width-container: 1280px;
  --header-height: 80px;
  --header-height-mobile: 68px;
}

/* Tema claro: mantém o dourado, contraste e a atmosfera editorial da marca. */
:root[data-theme="light"] {
  color-scheme: light;

  --color-background: #F3EFE6;
  --color-background-alt: #E9E2D4;
  --color-surface: #FFFCF5;
  --color-surface-secondary: #F5EFE3;
  --color-surface-card: #FFFDF8;
  --color-surface-hover: #EEE4D2;
  --color-surface-elevated: #FFFFFF;
  --color-input-background: #FFFDF8;
  --color-input-border: rgba(67, 48, 17, 0.22);
  --color-input-focus: #A9771C;
  --color-overlay: rgba(30, 24, 16, 0.58);
  --color-header: rgba(255, 252, 245, 0.96);
  --color-header-strong: #261D13;
  --color-topbar-text: #E7DAC4;
  --color-topbar-link: #FFF5E5;
  --color-topbar-hover: #F7DC8C;
  --color-topbar-admin-text: #F7DC8C;
  --color-topbar-admin-background: rgba(247, 220, 140, 0.13);
  --color-navigation: rgba(248, 243, 233, 0.96);
  --color-hero-background: #171610;
  --color-hero-radiance: radial-gradient(ellipse at 46% 14%, rgba(212, 162, 55, 0.20) 0%, transparent 62%), linear-gradient(180deg, #211F16 0%, #171610 100%);
  --color-hero-text: #FFF7E8;
  --color-hero-text-secondary: #E0D4C0;
  --color-hero-divider: rgba(255, 255, 255, 0.18);
  --color-home-panel: rgba(255, 252, 245, 0.82);
  --color-home-panel-strong: #EEE5D5;
  --color-home-benefit: rgba(255, 253, 248, 0.62);
  --color-home-ornament: rgba(143, 101, 23, 0.12);
  --color-body-radiance: radial-gradient(circle at 50% 0%, rgba(212, 162, 55, 0.16) 0%, transparent 56%), radial-gradient(circle at 0% 100%, rgba(143, 101, 23, 0.06) 0%, transparent 42%);
  --color-scroll-track: #E9E2D4;
  --color-scroll-thumb: #B79655;

  --color-primary: #A9781D;
  --color-primary-dark: #6F4B0E;
  --color-primary-light: #D3A741;
  --color-gold: #9B6B16;
  --color-gold-muted: #856C3C;
  --color-gold-light: #A9781D;
  --color-gold-glow: rgba(169, 120, 29, 0.22);
  --color-gold-border: rgba(143, 101, 23, 0.32);
  --color-gold-border-subtle: rgba(143, 101, 23, 0.16);
  --color-gold-gradient: linear-gradient(135deg, #DAB85D 0%, #A9781D 50%, #7B520F 100%);
  --color-gold-gradient-hover: linear-gradient(135deg, #E7C974 0%, #B88527 50%, #84570F 100%);

  --color-text: #211B13;
  --color-text-secondary: #5E5547;
  --color-text-muted: #817667;
  --color-text-inverse: #FFFDF8;

  --color-accent-red: #B52A26;
  --color-accent-red-hover: #98201D;
  --color-accent-red-subtle: rgba(181, 42, 38, 0.12);
  --color-accent-blue: #205493;
  --color-accent-blue-hover: #184579;
  --color-accent-blue-subtle: rgba(32, 84, 147, 0.12);

  --color-success: #257333;
  --color-success-subtle: rgba(37, 115, 51, 0.12);
  --color-warning: #A85D0A;
  --color-warning-subtle: rgba(168, 93, 10, 0.12);
  --color-error: #B12825;
  --color-error-subtle: rgba(177, 40, 37, 0.12);

  --color-border: rgba(49, 38, 21, 0.14);
  --color-border-subtle: rgba(49, 38, 21, 0.08);
  --color-border-strong: rgba(49, 38, 21, 0.26);

  --shadow-sm: 0 2px 5px rgba(48, 35, 15, 0.12);
  --shadow-md: 0 5px 14px rgba(48, 35, 15, 0.14);
  --shadow-lg: 0 10px 26px rgba(48, 35, 15, 0.16);
  --shadow-xl: 0 18px 40px rgba(48, 35, 15, 0.20);
  --shadow-gold: 0 5px 20px rgba(169, 120, 29, 0.18);
  --shadow-gold-lg: 0 10px 30px rgba(169, 120, 29, 0.24);
  --shadow-header: 0 4px 18px rgba(48, 35, 15, 0.12);
  --shadow-whatsapp: 0 18px 34px rgba(8, 86, 42, 0.25), 0 6px 14px rgba(48, 35, 15, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.30);
  --shadow-whatsapp-hover: 0 22px 38px rgba(8, 86, 42, 0.30), 0 8px 16px rgba(48, 35, 15, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.35);

  --color-whatsapp-button: linear-gradient(145deg, #34D477 0%, #1EAF56 52%, #158F47 100%);
  --color-whatsapp-halo: rgba(28, 171, 83, 0.24);
  --color-whatsapp-halo-glow: radial-gradient(circle, rgba(47, 204, 105, 0.17) 0%, rgba(37, 211, 102, 0) 68%);
  --color-whatsapp-card: linear-gradient(145deg, rgba(255, 254, 250, 0.99), rgba(245, 239, 227, 0.99));
  --color-whatsapp-card-arrow: #F7F1E5;
  --color-whatsapp-card-border: rgba(143, 101, 23, 0.34);
  --color-whatsapp-online: #1D8242;
  --color-whatsapp-notification: #DF4853;
}