/* ============================================================
   PLOT HOLE — Design Token System
   Shared by index.twig (game) and layout.twig (secondary pages)
   ============================================================ */

/* --- Light Theme (default) --- */
:root,
[data-theme="light"] {
  /* Backgrounds */
  --bg-base:       #f5f4f0;
  --bg-surface:    #ffffff;
  --bg-elevated:   #eae8e3;
  --bg-inset:      #e8e6e0;
  --bg-sponsor-strip: #ffffff;

  /* Brand */
  --color-gold:       #c8960a;
  --color-gold-hover: #d9a61a;
  --color-gold-soft:  rgba(200, 150, 10, 0.1);
  --color-orange:     #d06a20;
  --color-green:      #2a9e2e;
  --color-red:        #c03030;
  --color-blue:       #2670c0;

  /* Text */
  --text-primary:   #1a1a24;
  --text-secondary: #555566;
  --text-muted:     #777788;
  --text-faint:     #999aaa;
  --text-ghost:     #bbbbcc;

  /* Borders */
  --border-default: #d8d6d0;
  --border-subtle:  #e8e6e0;

  /* On-brand (text on gold buttons) */
  --color-on-gold: #ffffff;

  /* Tier colors */
  --tier-bronze: #cd7f32;
  --tier-silver: #c0c0c0;
  --tier-gold:   #c8960a;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-glow-gold: 0 0 20px rgba(200,150,10,0.1);

  /* Gradients */
  --gradient-page: linear-gradient(180deg, #faf9f6 0%, #f0efe9 50%, #e6e4dd 100%);
  --gradient-card: linear-gradient(135deg, rgba(200,150,10,0.03) 0%, transparent 60%);
  --gradient-gold-btn: linear-gradient(135deg, #d4a310 0%, #c8960a 50%, #b8860a 100%);
  --gradient-gold-btn-hover: linear-gradient(135deg, #e0b020 0%, #d9a61a 50%, #c8960a 100%);
  --glow-gold-ambient: 0 0 30px rgba(200,150,10,0.06);
  --glow-gold-strong: 0 0 24px rgba(200,150,10,0.18), 0 0 48px rgba(200,150,10,0.08);

  /* Radii */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* Fonts */
  --font-logo:    'Bebas Neue', sans-serif;
  --font-display: 'Outfit', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Score pill */
  --score-pill-bg: #ffffff;

  /* Celebration / overlay */
  --overlay-bg: rgba(245, 244, 240, 0.96);
}

/* --- Dark Theme --- */
[data-theme="dark"] {
  --bg-base:       #0e0e14;
  --bg-surface:    #1a1a24;
  --bg-elevated:   #24242e;
  --bg-inset:      #141420;
  --bg-sponsor-strip: #131319;

  --color-gold:       #f0c24e;
  --color-gold-hover: #f5d06a;
  --color-gold-soft:  rgba(240, 194, 78, 0.12);
  --color-orange:     #f08a42;
  --color-green:      #5cd860;
  --color-red:        #e05555;
  --color-blue:       #5aa5f0;

  --text-primary:   #e4e4ec;
  --text-secondary: #9a9aac;
  --text-muted:     #6e6e80;
  --text-faint:     #4c4c5c;
  --text-ghost:     #3a3a4a;

  --border-default: #2c2c38;
  --border-subtle:  #1e1e28;

  --color-on-gold: #0e0e14;

  --tier-gold: #f0c24e;

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.45);
  --shadow-glow-gold: 0 0 20px rgba(240,194,78,0.15);

  --gradient-page: linear-gradient(180deg, #131318 0%, #0e0e14 50%, #060608 100%);
  --gradient-card: linear-gradient(135deg, rgba(240,194,78,0.03) 0%, transparent 60%);
  --gradient-gold-btn: linear-gradient(135deg, #f5d06a 0%, #f0c24e 50%, #daa830 100%);
  --gradient-gold-btn-hover: linear-gradient(135deg, #f8dc80 0%, #f5d06a 50%, #f0c24e 100%);
  --glow-gold-ambient: 0 0 30px rgba(240,194,78,0.06);
  --glow-gold-strong: 0 0 24px rgba(240,194,78,0.2), 0 0 48px rgba(240,194,78,0.08);

  --score-pill-bg: #1e1e2a;

  --overlay-bg: rgba(14, 14, 20, 0.96);
}


/* --- Universal Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
button, [role="button"], [onclick] { cursor: pointer; }
button:disabled { cursor: not-allowed; }

html {
  background: var(--bg-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-base);
  background-image: var(--gradient-page);
  background-attachment: fixed;
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}


/* --- Utility Classes --- */
.text-gold   { color: var(--color-gold); }
.text-orange { color: var(--color-orange); }
.text-red    { color: var(--color-red); }
.text-green  { color: var(--color-green); }
.text-blue   { color: var(--color-blue); }
.text-muted  { color: var(--text-muted); }
.text-faint  { color: var(--text-faint); }
.bg-surface  { background: var(--bg-surface); }
.bg-elevated { background: var(--bg-elevated); }


/* --- Theme Toggle --- */
.theme-btn i { font-size: 0.8rem; }


/* --- Shared CTA Button --- */
.cta { text-align: center; margin: 32px 0; }
.cta a {
  display: inline-block;
  background: var(--gradient-gold-btn);
  color: var(--color-on-gold);
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-sm), var(--glow-gold-ambient);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
}
.cta a::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transition: none;
}
.cta a:hover {
  background: var(--gradient-gold-btn-hover);
  box-shadow: var(--shadow-md), var(--glow-gold-strong);
}
.cta a:hover::after {
  left: 120%;
  transition: left 0.5s ease;
}
.cta a:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-sm);
}


/* --- Icon sizing for secondary pages --- */
.cta a i                 { font-size: 1em; margin-right: 5px; }
h1 i, h2 i              { font-size: 1em; margin-right: 5px; }
.benefits i              { font-size: 0.85em; }
.nav a i                 { font-size: 1em; }
.step-num i              { font-size: 1em; }

/* --- Score color classes (used by JS) --- */
.score-high { color: var(--color-gold); }
.score-mid  { color: var(--color-orange); }
.score-low  { color: var(--color-red); }