/*
  GarageFinderUAE — brand tokens (single source of truth).

  Sampled directly from the GarageFinderUAE logo artwork
  (assets/img/brand/logo-full.png): a sports-car silhouette under a two-tone
  blue arc, the Dubai skyline behind it, and a location pin on the roofline.
  Every hex below is a real pixel value taken from that file, not an eyeball
  match — #00418E is "FINDER" and the pin, #64B0E6 is the right-hand end of
  the arc, #161C23 is "GARAGE" and the car body, #CD0A0A is the nose flick.

  Every colour, type, spacing, radius and shadow decision on the site lives
  here. assets/css/styles.css consumes these and defines no raw hex of its own;
  scripts/generate-site.js links this file before styles.css on every page, so
  a change here changes all 32 pages on regeneration.

  A documentation copy is kept at brand-guidelines/tokens/brand-tokens.css
  (plus .json) and refreshed by scripts/build-brand-assets.sh. Edit THIS file.
*/
:root {
  /* ── Colour ────────────────────────────────────────────────────────────
     Royal blue is the identity — it is the "FINDER" half of the wordmark and
     the pin, and it is what separates this site from GaragesDubai's navy+gold.
     Red appears in the logo only as a small hazard flick at the car's nose; it
     is reserved here for one job — breakdown / emergency — and nothing else.
     Steel is the skyline grey, used for illustration and quiet UI only. */
  --c-blue-700: #00418E;   /* primary: buttons, links, the pin, "FINDER" */
  --c-blue-800: #003370;   /* pressed / hover step */
  --c-blue-900: #002150;   /* deep: footer, dark sections, OG ground */
  --c-blue-950: #00132F;   /* deepest: the far end of every dark gradient, footer base bar */
  --c-blue-600: #0A57B0;   /* the mid-arc step — lifts the dark bands off flat navy */
  --c-blue-500: #64B0E6;   /* the light end of the logo arc — on dark only, 2.3:1 on white */
  --c-blue-200: #9FCBEE;   /* arc blue, dimmed — secondary text on dark */
  --c-blue-100: #C7DFF5;   /* rule on dark */
  --c-blue-050: #EAF2FB;   /* tint surface */
  --c-blue-025: #F3F8FD;   /* the faintest tint — alternating section ground */

  /* On-dark alphas. Dark bands are navy, not black, so a plain white alpha
     goes chalky on them; these are the two mixes used for cards, rules and
     chips that sit on --c-blue-900. */
  --a-onDark-06: rgba(255, 255, 255, .06);
  --a-onDark-12: rgba(255, 255, 255, .12);
  --a-onDark-20: rgba(255, 255, 255, .20);

  --c-red-600: #CD0A0A;    /* the flick at the car's nose — breakdown/emergency ONLY */
  --c-red-050: #FDECEC;

  --c-steel: #C0C3C7;      /* the skyline grey — illustration and quiet UI only */

  /* Cool-grey neutral ramp, pulled toward the wordmark's slate. */
  --c-ink: #161C23;        /* headings — sampled from "GARAGE" and the car body */
  --c-body: #3C4650;       /* paragraphs */
  --c-muted: #5B6670;      /* secondary text, captions */
  /* Was #6A757F, chosen because it cleared 4.5:1 on white. Most of the muted
     text on this site does not sit on white — it sits on --c-page (#F5F7FA)
     or the --c-blue-050 tint, where that value measured 4.38:1 and 4.17:1 and
     failed AA. #5B6670 is the same hue, and measures 5.87 / 5.47 / 5.19:1
     across white, page and tint respectively. */
  --c-line: #DCE0E5;       /* hairlines, borders */
  --c-page: #F5F7FA;       /* page ground */
  --c-surface: #FFFFFF;    /* cards, header */

  /* ── Type ──────────────────────────────────────────────────────────────
     Saira: an industrial grotesque with squared terminals and a true italic —
     the closest available match to the logo's bold italic caps, and it holds
     up upright at heading sizes. IBM Plex Sans keeps the body text, because
     it has lining figures and half this site is AED prices in tables.
     Both loaded from Google Fonts with swap. */
  --font-head: Saira, "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --track-head: -0.015em;
  --leading-body: 1.6;

  /* ── Space — 4px base ──────────────────────────────────────────────────*/
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* ── Radius — one scale ────────────────────────────────────────────────*/
  --r-sm: 6px; --r-md: 10px; --r-lg: 18px; --r-pill: 999px;

  /* ── Elevation — three levels ──────────────────────────────────────────*/
  --shadow-1: 0 1px 2px rgba(0, 33, 80, .06), 0 1px 1px rgba(0, 33, 80, .04);
  --shadow-2: 0 8px 20px -8px rgba(0, 33, 80, .18), 0 2px 6px -2px rgba(0, 33, 80, .08);
  --shadow-3: 0 28px 60px -24px rgba(0, 19, 47, .45), 0 8px 20px -12px rgba(0, 19, 47, .28);
}