/* ============================================================
   THE ELF GAMES — DESIGN TOKENS & VARIABLES
   Edit this file to change colors, fonts, spacing globally
   ============================================================ */

:root {
  /* ---- Brand Colors ---- */
  --red:         #C41E3A;
  --red-dk:      #9B1830;
  --red-glow:    rgba(196, 30, 58, 0.4);
  --green:       #155C38;
  --green-dk:    #0D3D25;
  --gold:        #D4A843;
  --gold-bright: #F5D76E;

  /* ---- Neutrals ---- */
  --navy:        #0B1628;
  --navy-mid:    #101E36;
  --navy-light:  #162A48;
  --white:       #FFFFFF;
  --off-white:   #FBF6EC;       /* warmer parchment base */
  --cream:       #FAF0E0;
  --charcoal:    #2A1F17;       /* softened to warm bark */
  --gray:        #6B5A4A;       /* warm mushroom gray */
  --gray-light:  #B8A994;
  --ice:         #D6EAF8;
  --border:      #E8DCC6;

  /* ---- Cozy Storybook Tokens ---- */
  --wood:          #5C3A21;     /* dark wood beam */
  --wood-mid:      #8B5A2B;     /* warm maple */
  --parchment:     #F4E7CB;     /* soft parchment */
  --parchment-dk:  #E8D5AA;
  --lamplight:     #F7C873;     /* warm lamp glow */
  --lamplight-soft:rgba(247,200,115,.35);
  --plaid-red:     #A8231A;
  --plaid-green:   #1E4D2B;
  --snow:          #F0F8FF;
  --snow-shadow:   #C9DAE8;
  --hearth-glow:   rgba(247,180,90,.25);
  --shadow-warm:   0 8px 24px rgba(92,58,33,.18);
  --shadow-soft:   0 4px 14px rgba(92,58,33,.10);

  /* ---- Status ---- */
  --success:     #22C55E;
  --warning:     #F59E0B;
  --danger:      #EF4444;
  --info:        #3B82F6;

  /* ---- Typography ---- */
  --font-impact:    'Oswald', 'Impact', sans-serif;
  --font-condensed: 'Barlow Condensed', sans-serif;
  --font-body:      'Inter', -apple-system, sans-serif;
  --font-accent:    'Playfair Display', Georgia, serif;
  --font-script:    'Caveat', 'Brush Script MT', cursive;
  --font-festive:   'Mountains of Christmas', 'Playfair Display', serif;

  /* ---- Layout ---- */
  --container:   1200px;
  --section-pad: 100px;
  --radius:      12px;
  --radius-lg:   16px;
}

@media (max-width: 640px) {
  :root {
    --section-pad: 64px;
  }
}