/* ==========================================================================
   Brand tokens: the ONLY file you edit to rebrand a site.
   Names describe the job, not the colour (never --green holding blue).
   CapeX Transport Group · Oct 2026
   ========================================================================== */
:root {
  /* Brand */
  --brand: #1078B0;          /* primary: buttons, links on light (4.8:1 on white) */
  --brand-dark: #1E2444;     /* hover and pressed states (CapeX navy) */
  --brand-soft: #E8F4FB;     /* tinted backgrounds */
  --accent: #13805A;         /* secondary action: WhatsApp / Rides buttons (4.9:1 with white) */
  --on-brand: #ffffff;       /* text on brand-coloured fills */

  /* CapeX dark surfaces (header, heroes, bands) */
  --dark: #1E2444;           /* CapeX navy */
  --dark-deep: #161B35;      /* gradient end, footer */
  --dark-raised: #2A3260;    /* cards on navy */
  --on-dark: #FFFFFF;
  --on-dark-muted: #C9D2E6;  /* body text on navy */
  --highlight-on-dark: #20A0E0; /* CapeX sky blue: eyebrows and accents on navy only */
  --mint-on-dark: #6FD7AE;   /* Rides accent on navy only */
  --gradient-brand: linear-gradient(135deg, #20A0E0, #1A9E6E); /* brand stripe, decorative */
  --cream: #EEEBE4;          /* warm alternate section */
  --logo-pill: #F6F6F6;      /* background behind the raster logo */
  --on-dark-line: rgba(255, 255, 255, 0.18); /* borders on navy */
  --on-dark-fill: rgba(255, 255, 255, 0.06); /* subtle cards on navy */
  --scrim: rgba(22, 27, 53, 0.84);  /* caption backgrounds over photos */
  --live: #1A9E6E;           /* live / on-time dot */
  --late: #E8A13A;           /* running-late dot */
  --warn-bg: #FDF1DD;
  --warn-ink: #7A4E08;

  /* Neutrals */
  --ink: #1E2444;            /* body text */
  --muted: #4F5875;          /* secondary text */
  --line: #DCE3EF;           /* borders and rules */
  --bg: #ffffff;             /* page background */
  --surface: #F4F7FB;        /* alternate section background */

  /* Status */
  --error: #b42318;
  --success: #1f7a3d;

  /* Type */
  --font-body: Barlow, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-head: Poppins, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --fs-base: 1.0625rem;      /* 17px */
  --lh-base: 1.6;
  --fs-h1: clamp(2.1rem, 4vw + 1rem, 3.6rem);
  --fs-h2: clamp(1.6rem, 2vw + 1rem, 2.5rem);
  --fs-h3: 1.25rem;

  /* Shape and space */
  --radius: 16px;
  --radius-sm: 10px;
  --space: 1.5rem;
  --section: clamp(3rem, 6vw, 5.5rem);
  --maxw: 1240px;
  --shadow: 0 1px 2px rgba(30, 36, 68, 0.05), 0 6px 20px rgba(30, 36, 68, 0.07);
  --shadow-lg: 0 32px 64px rgba(0, 0, 0, 0.35);
}