/* ============================================================================
   EIEV — GLOBAL DESIGN TOKENS
   Single source of truth for brand colours and fonts. Change a value here and
   it updates everywhere across the site (buttons, headings, borders, footer…).

   Loaded first on every front-end page (layout.blade.php / layoutnofooter).
   Used throughout as var(--token). The leaderboard keeps its own scoped light
   palette in partials/lb-core.blade.php (#lr-section { --gold … }).
   ============================================================================ */
:root {
  /* ---- Brand gold ---- */
  --eiev-gold:        #c4912a;   /* primary gold — links, accents, buttons      */
  --eiev-gold-dark:   #996F32;   /* bronze — hovers, deeper accents             */
  --eiev-gold-light:  #e4b84d;   /* light gold — highlights, outlined text      */
  --eiev-gold-rgb:    196, 145, 42;   /* same gold as an RGB triplet for rgba() */

  /* ---- Neutrals ---- */
  --eiev-dark:        #1D1D1B;   /* brand near-black — headers, dark sections   */
  --eiev-dark-2:      #17120b;   /* deepest espresso — hero backdrops           */
  --eiev-sand:        #F2D586;   /* warm sand — footer band / soft gold panels  */
  --eiev-cream:       #F5F0E4;   /* light cream — light surfaces                */

  /* ---- Typography ---- */
  --font-body:        'Poppins', system-ui, -apple-system, Arial, sans-serif;   /* body / UI text */
  --font-display:     'Poppins', system-ui, -apple-system, Arial, sans-serif;   /* headings / hero */
  --font-mono:        'Courier New', Courier, monospace;                      /* times / figures */
  --font-flag:        'Twemoji Country Flags', var(--font-body);              /* country flags — see below */

  /* ---- Site chrome (header/sidebar) — light mode is the default ----
     These are deliberately separate from --eiev-dark/--eiev-gold above:
     those brand constants are reused in dozens of places as fixed "always
     dark" backgrounds (hero scrims, footer, dune dividers) that must NOT
     move when the reader flips themes. Only the header/sidebar chrome and
     the handful of page surfaces that opt in (see aboutus/timing/home)
     read these --surface-N and --ink-N tokens instead. */
  --surface-0:   #ffffff;              /* page/sidebar base            */
  --surface-1:   #F7F6F3;              /* cards, menu rows             */
  --surface-2:   #EDEAE2;              /* hovered/deeper panels        */
  --ink-1:       #1D1D1B;              /* primary text on a surface    */
  --ink-2:       rgba(29,29,27,.6);    /* secondary/muted text         */
  --border-soft: rgba(29,29,27,.1);
  --header-bg:        rgba(255,255,255,.78);
  --header-bg-solid:  #ffffff;
  --header-ink:       #1D1D1B;
  --header-ink-soft:  rgba(29,29,27,.55);
  --header-border:    rgba(29,29,27,.08);
}

[data-theme="dark"] {
  --surface-0:   #141210;
  --surface-1:   #1D1A16;
  --surface-2:   #262019;
  --ink-1:       #F5F0E4;
  --ink-2:       rgba(245,240,228,.62);
  --border-soft: rgba(245,240,228,.12);
  --header-bg:        rgba(20,18,16,.82);
  --header-bg-solid:  #1D1D1B;
  --header-ink:       #F5F0E4;
  --header-ink-soft:  rgba(245,240,228,.55);
  --header-border:    rgba(245,240,228,.1);
}

/* Smooth, cheap theme swap — only color-ish properties, never layout, so
   toggling never causes reflow/jank. */
body, #header, .menu, .menu-card-group, .menu-card, #home-races {
  transition: background-color .32s ease, color .32s ease, border-color .32s ease;
}
/* ============================================================================
   COUNTRY FLAG EMOJI
   Windows ships no country-flag glyphs: Segoe UI Emoji has the regional
   indicator letters but not the composed pairs, so 🇦🇪 renders as a small
   "AE" instead of a flag. This COLRv1 webfont supplies the missing glyphs.

   unicode-range pins it to the regional indicator block, so this font is
   only ever consulted for flag codepoints and can never affect other text —
   which makes it safe to add to any font stack.

   Apply via .flag-emoji (or var(--font-flag)) on the element holding a flag.
   ============================================================================ */
@font-face {
  font-family: 'Twemoji Country Flags';
  src: url('../fonts/TwemojiCountryFlags.woff2') format('woff2');
  unicode-range: U+1F1E6-1F1FF;
  font-display: swap;
}

.flag-emoji { font-family: var(--font-flag); }