/* ==========================================================================
   Whitehall 2026 — Design tokens
   Source: Adobe XD specs (artboard 1408px, 12 columns x 106px, 68px margins).
   Each custom property maps 1:1 to an Elementor Atomic Global Variable.
   See docs/02-design-tokens.md for the mapping table.
   ========================================================================== */

:root {
  /* ---- Colour: brand -------------------------------------------------- */
  --color-purple: #8131b0;          /* XD: primary brand purple */
  --color-purple-line: #7736aa;     /* XD: stroke purple (icons, button borders, rules) */
  --color-purple-dark: #6a2794;     /* Proposed: hover state for purple fills (not in XD) */

  /* ---- Colour: neutrals ----------------------------------------------- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-charcoal: #1d1d1d;        /* XD: dark section background */
  --color-grey-600: #5f5f5f;        /* Sampled: Equipment "4 types" band + team image placeholder */
  --color-grey-200: #e7e8eb;        /* XD: home "power of" band, social icon glyphs */
  --color-grey-100: #f4f6f7;        /* XD: light section background */
  --color-navy: #151d35;            /* XD: listed in palette, hero overlay tint */
  --color-overlay: rgba(10, 10, 37, 0.235); /* XD: Rectangle 750 over hero media */

  /* ---- Colour: semantic aliases --------------------------------------- */
  --color-text: var(--color-black);
  --color-text-inverse: var(--color-white);
  --color-accent: var(--color-purple);
  --color-rule: var(--color-purple-line);
  --color-rule-muted: rgba(255, 255, 255, 0.5);

  /* ---- Typography: family --------------------------------------------- */
  /* Design font is "Plexus Sans" (Adobe Fonts). Until the Adobe web kit is
     supplied, IBM Plex Sans is the interim stand-in. When the kit arrives,
     put its family name first in this stack and remove the Google Fonts link. */
  --font-primary: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  /* ---- Typography: weights -------------------------------------------- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---- Typography: sizes (desktop) ------------------------------------ */
  --fs-display: 54px;   /* XD Medium 54 — hero titles, H1, H2 */
  --fs-title: 38px;     /* XD Light 38 — statements, section titles, H3 */
  --fs-subtitle: 27px;  /* XD Regular 27 — hero lead, H4 */
  --fs-lead: 22px;      /* XD Regular 22 — intro paragraphs, H5 */
  --fs-body-lg: 18px;   /* XD Regular 18 */
  --fs-body: 16px;      /* XD Regular 16 — body */
  --fs-small: 14px;     /* XD Medium 14 — nav, buttons, labels */

  /* ---- Typography: line heights --------------------------------------- */
  --lh-tight: 1.2;
  --lh-heading: 1.3;
  --lh-body: 1.75;

  /* ---- Typography: letter spacing ------------------------------------- */
  --ls-caps: 0.01em;    /* XD: uppercase labels / buttons */

  /* ---- Layout ---------------------------------------------------------- */
  --container-max: 1272px;   /* 12 x 106px */
  --gutter: 68px;            /* XD page margin */
  --header-height: 136px;

  /* ---- Spacing scale --------------------------------------------------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
  --section-pad: 128px;      /* default vertical section padding */

  /* ---- Shape & motion -------------------------------------------------- */
  --radius: 3px;             /* XD: buttons, cards */
  --radius-field: 8px;       /* XD: contact form fields */
  --border-width: 1px;
  --transition: 200ms ease;
}

/* Tablet — Elementor default breakpoint (max-width: 1024px) */
@media (max-width: 1024px) {
  :root {
    --fs-display: 42px;
    --fs-title: 30px;
    --fs-subtitle: 24px;
    --fs-lead: 20px;
    --gutter: 40px;
    --header-height: 112px;
    --section-pad: 88px;
  }
}

/* Mobile — Elementor default breakpoint (max-width: 767px) */
@media (max-width: 767px) {
  :root {
    --fs-display: 32px;
    --fs-title: 24px;
    --fs-subtitle: 20px;
    --fs-lead: 18px;
    --gutter: 20px;
    --header-height: 88px;
    --section-pad: 56px;
  }
}