/* ─────────────────────────────────────────────────────────────────────────
   QuickRide Africa — Design Tokens
   All CSS custom properties. Import this first in every page.
───────────────────────────────────────────────────────────────────────── */
:root {

  /* COLOUR ──────────────────────────────────────────────────────────────── */

  /* Darks */
  --c-ink:          #0A0C0F;   /* Primary background — near-black, blue-black tint */
  --c-midnight:     #12181F;   /* Section variation — slightly lighter dark */
  --c-navy:         #1B2A3E;   /* Deep navy for accent sections */
  --c-navy-alt:     #243450;   /* Lighter navy for cards on navy */

  /* Brand accent */
  --c-gold:         #B8922A;   /* Primary brand gold */
  --c-gold-hover:   #CFA63C;   /* Gold hover / active state */
  --c-gold-muted:   rgba(184, 146, 42, 0.12);  /* Subtle gold fill */
  --c-gold-border:  rgba(184, 146, 42, 0.30);  /* Gold hairline borders */

  /* Lights */
  --c-bone:         #F4F1EA;   /* Light section background — warm off-white */
  --c-pearl:        #FAFAF8;   /* Near-white ground */
  --c-white:        #FFFFFF;

  /* Text on dark backgrounds */
  --c-on-dark:      #E8EDF2;   /* Primary text on dark */
  --c-slate:        #8A9BB5;   /* Secondary text on dark — blue-grey */
  --c-slate-dim:    rgba(138, 155, 181, 0.55); /* Tertiary on dark */

  /* Text on light backgrounds */
  --c-on-light:     #111827;   /* Primary text on light */
  --c-muted:        #5C6B7A;   /* Secondary text on light */

  /* Structural */
  --c-divider-dark: rgba(255, 255, 255, 0.07);
  --c-divider-light:rgba(0,   0,   0,   0.08);

  /* TYPOGRAPHY ──────────────────────────────────────────────────────────── */

  --f-display: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --f-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --f-label:   'Space Grotesk', system-ui, sans-serif;

  /* TYPE SCALE (pixel reference) ─────────────────────────────────────────── */
  --fs-xs:   0.6875rem;  /* 11px */
  --fs-sm:   0.8125rem;  /* 13px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.25rem;    /* 20px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  1.875rem;   /* 30px */
  --fs-3xl:  2.25rem;    /* 36px */
  --fs-4xl:  3rem;       /* 48px */
  --fs-5xl:  3.75rem;    /* 60px */
  --fs-6xl:  4.5rem;     /* 72px */
  --fs-7xl:  6rem;       /* 96px */

  /* SPACING ────────────────────────────────────────────────────────────── */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  /* LAYOUT ─────────────────────────────────────────────────────────────── */
  --container:      1320px;
  --container-pad:  clamp(1.25rem, 5vw, 2.5rem);
  --section-py:     clamp(5rem, 10vw, 8rem);
  --section-py-sm:  clamp(3rem,  6vw, 5rem);

  /* BORDER RADIUS ─────────────────────────────────────────────────────── */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  /* EASING ─────────────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* DURATION ────────────────────────────────────────────────────────────── */
  --dur-fast:  180ms;
  --dur-base:  320ms;
  --dur-slow:  560ms;
  --dur-xslow: 900ms;

  /* SHADOWS ────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.40);

  /* NAV HEIGHT (used for page-hero offset) ─────────────────────────────── */
  --nav-h: 80px;
}