/* ============================================================================
   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 */
}

/* ============================================================================
   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); }