/* ==========================================================================
   RC RALLYE LOCATION — Design Tokens
   All visual values are centralized here for easy rebranding.
   ========================================================================== */

:root {
  /* ── Colour Palette ──────────────────────────────────────────────────── */
  --color-black:        #0a0a0a;
  --color-anthracite:   #1a1a2e;
  --color-navy:         #16213e;
  --color-dark-grey:    #0f3460;
  --color-red:          #e63946;
  --color-orange:       #ff6b35;
  --color-white:        #f8f9fa;
  --color-grey-200:     #e9ecef;
  --color-grey-400:     #adb5bd;
  --color-grey-600:     #6c757d;
  --color-grey-800:     #343a40;
  --color-success:      #2ecc71;

  /* ── Semantic Colours ────────────────────────────────────────────────── */
  --bg-primary:         var(--color-black);
  --bg-secondary:       var(--color-anthracite);
  --bg-card:            var(--color-navy);
  --bg-card-hover:      #1b2a4a;
  --bg-overlay:         rgba(10, 10, 10, 0.85);

  --accent-primary:     var(--color-red);
  --accent-secondary:   var(--color-orange);
  --accent-gradient:    linear-gradient(135deg, var(--color-red), var(--color-orange));

  --text-primary:       var(--color-white);
  --text-secondary:     var(--color-grey-400);
  --text-muted:         var(--color-grey-600);
  --text-on-accent:     var(--color-white);

  --border-color:       rgba(255, 255, 255, 0.08);
  --border-color-hover: rgba(255, 255, 255, 0.15);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-heading:       'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:          'Inter', system-ui, -apple-system, sans-serif;

  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-display:         clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --fs-h1:              clamp(2rem, 4vw + 0.5rem, 3.5rem);
  --fs-h2:              clamp(1.5rem, 3vw + 0.25rem, 2.5rem);
  --fs-h3:              clamp(1.25rem, 2vw + 0.25rem, 1.75rem);
  --fs-h4:              clamp(1.1rem, 1.5vw + 0.25rem, 1.35rem);
  --fs-body:            clamp(0.95rem, 1vw + 0.25rem, 1.1rem);
  --fs-small:           clamp(0.8rem, 0.8vw + 0.2rem, 0.9rem);
  --fs-xs:              0.75rem;

  --lh-tight:           1.2;
  --lh-normal:          1.6;
  --lh-relaxed:         1.8;

  /* ── Spacing Scale ───────────────────────────────────────────────────── */
  --space-2xs:          0.25rem;   /*  4px */
  --space-xs:           0.5rem;    /*  8px */
  --space-sm:           0.75rem;   /* 12px */
  --space-md:           1rem;      /* 16px */
  --space-lg:           1.5rem;    /* 24px */
  --space-xl:           2rem;      /* 32px */
  --space-2xl:          3rem;      /* 48px */
  --space-3xl:          4rem;      /* 64px */
  --space-4xl:          6rem;      /* 96px */
  --space-5xl:          8rem;      /* 128px */

  /* Section padding (responsive) */
  --section-py:         clamp(3rem, 8vw, 7rem);
  --section-px:         clamp(1rem, 4vw, 2rem);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container-max:      1200px;
  --container-narrow:   800px;

  /* ── Border Radius ───────────────────────────────────────────────────── */
  --radius-sm:          0.375rem;
  --radius-md:          0.625rem;
  --radius-lg:          1rem;
  --radius-xl:          1.5rem;
  --radius-full:        50%;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:          0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-glow:        0 0 20px rgba(230, 57, 70, 0.3);
  --shadow-glow-hover:  0 0 30px rgba(230, 57, 70, 0.5);

  /* ── Glass Effect ────────────────────────────────────────────────────── */
  --glass-bg:           rgba(22, 33, 62, 0.6);
  --glass-blur:         16px;
  --glass-border:       rgba(255, 255, 255, 0.1);

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --transition-fast:    150ms ease;
  --transition-base:    300ms ease;
  --transition-slow:    500ms ease;
  --transition-spring:  400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index Scale ───────────────────────────────────────────────────── */
  --z-behind:           -1;
  --z-base:             1;
  --z-dropdown:         100;
  --z-sticky:           200;
  --z-overlay:          300;
  --z-modal:            400;
  --z-toast:            500;
}