/* ==========================================================================
   British Built Power — Design Tokens
   Single source of truth. Components and pages consume these variables;
   never hard-code a hex or px value in page CSS.
   ========================================================================== */

/* A local stand-in sized to Montserrat's metrics (measured: Montserrat
   Regular sets 12% wider than Arial, ascent 0.968, descent 0.251), used
   while the web font loads, so the copy doesn't reflow when it swaps. */
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 112%;
  ascent-override: 86.4%;
  descent-override: 22.4%;
  line-gap-override: 0%;
}

:root {

  /* --------------------------------------------------------------------
     Colour — core ramps (500 = brand hue from identity board)
     -------------------------------------------------------------------- */
  --teal-900: #16333d;
  --teal-700: #1d4b59;
  --teal-500: #37697c;   /* primary brand (official VI) */
  --teal-300: #5d8a9b;
  --teal-100: #d9e4e8;

  --gold-700: #d9a700;
  --gold-500: #fdca0e;   /* action / highlight — official VI "yellow" */
  --gold-300: #fedc5b;
  --gold-100: #fff4cc;

  --oxblood-700: #5a1f24;
  --oxblood-500: #841e22; /* official VI "red" */
  --oxblood-300: #a03338;
  --oxblood-100: #e9d8d9;

  --ink-900: #15172e;
  --ink-700: #222540;
  --ink-500: #343150;    /* dark surfaces / display text */
  --ink-300: #4a4668;
  --ink-100: #dbdae4;

  --paper: #f5f2ec;
  --white: #ffffff;

  /* --------------------------------------------------------------------
     Colour — semantic aliases (use these in components)
     -------------------------------------------------------------------- */
  --color-bg: var(--paper);
  --color-surface: var(--white);
  --color-surface-dark: var(--ink-500);
  --color-text: var(--ink-500);
  --color-text-muted: #605d7d;
  --color-text-on-dark: var(--paper);
  --color-accent: var(--gold-500);
  --color-link: var(--teal-500);
  --color-border: rgba(52, 49, 80, 0.16);
  --color-border-strong: rgba(52, 49, 80, 0.38);
  --color-focus: var(--gold-500);
  --color-error: #a8382e;
  --color-success: #2e6e4e;

  /* --------------------------------------------------------------------
     Gradients — "brighter and darker versions of colours that work well".
     Light→dark pass of one hue, 135° so the light corner sits top-left.
     Prefer gradients over flat fills on large brand surfaces.
     -------------------------------------------------------------------- */
  --grad-teal: linear-gradient(135deg, var(--teal-500) 0%, var(--teal-700) 100%);
  --grad-gold: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-700) 100%);
  --grad-oxblood: linear-gradient(135deg, var(--oxblood-500) 0%, var(--oxblood-700) 100%);
  /* "lit" gradients for data marks on the dark pages: the same one-hue
     light-to-dark sweep, lifted so bars hold up against ink-900
     (checked with the dataviz validator: CVD / normal-vision separation
     pass; every bar is directly labelled) */
  --grad-teal-lit: linear-gradient(135deg, #58a0b8 0%, var(--teal-500) 100%);
  --grad-oxblood-lit: linear-gradient(135deg, #d23c43 0%, #9a2329 100%);
  --grad-ink: linear-gradient(135deg, var(--ink-500) 0%, var(--ink-700) 100%);

  /* --------------------------------------------------------------------
     Typography — geometric sans, caps for display
     -------------------------------------------------------------------- */
  --font-display: "Gotham", "Montserrat", "Montserrat Fallback", "Avenir Next", "Trebuchet MS", sans-serif;
  --font-body: "Gotham", "Montserrat", "Montserrat Fallback", "Avenir Next", "Trebuchet MS", sans-serif;

  --text-display-xl: 4rem;     /* 64 — hero */
  --text-display: 3rem;        /* 48 — section titles */
  --text-h1: 2.5rem;           /* 40 */
  --text-h2: 2rem;             /* 32 */
  --text-h3: 1.5rem;           /* 24 */
  --text-body-lg: 1.125rem;    /* 18 */
  --text-body: 1rem;           /* 16 */
  --text-small: 0.875rem;      /* 14 */
  --text-overline: 0.75rem;    /* 12 — caps, tracked */

  /* Editorial scale — every section below the hero, five clear steps:
     title > statement > standfirst > body > note (item = sub-heads
     such as use cases and FAQ questions, between standfirst and
     statement) */
  --type-title: clamp(2.25rem, 4.3vw, 3.5rem);        /* 36–56 */
  --type-statement: clamp(1.375rem, 2.4vw, 2.125rem); /* 22–34 */
  --type-item: clamp(1.25rem, 1.8vw, 1.5rem);         /* 20–24 */
  --type-standfirst: clamp(1.125rem, 1.5vw, 1.375rem);/* 18–22 */
  --type-body: var(--text-body-lg);                   /* 18 */
  --type-note: var(--text-small);                     /* 14 */

  /* Gotham trio per the VI guidelines: Light / Bold / Black */
  --weight-display: 900;       /* Gotham Black */
  --weight-bold: 700;          /* Gotham Bold */
  --weight-semibold: 600;      /* UI middle weight (buttons, labels) */
  --weight-regular: 400;
  --weight-light: 300;         /* Gotham Light */
  --weight-hairline: 300;      /* the "BUILT" weight — Light per VI */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  --tracking-caps: 0.04em;     /* display caps */
  --tracking-wide: 0.18em;     /* overlines, the "BUILT" line */

  /* --------------------------------------------------------------------
     Spacing — 4px base scale. Use steps, not arbitrary values.
     -------------------------------------------------------------------- */
  --space-1: 0.25rem;   /*   4 */
  --space-2: 0.5rem;    /*   8 */
  --space-3: 0.75rem;   /*  12 */
  --space-4: 1rem;      /*  16 */
  --space-5: 1.5rem;    /*  24 */
  --space-6: 2rem;      /*  32 */
  --space-7: 3rem;      /*  48 */
  --space-8: 4rem;      /*  64 */
  --space-9: 6rem;      /*  96 */
  --space-10: 8rem;     /* 128 */

  /* --------------------------------------------------------------------
     Radii — the stamp aesthetic: generously rounded rectangles
     -------------------------------------------------------------------- */
  --radius-sm: 8px;      /* inputs, chips */
  --radius-md: 12px;     /* small cards */
  --radius-logo: 13.5px; /* matches the official stamp artwork (rx=13.5) */
  --radius-lg: 24px;     /* cards */
  --radius-stamp: 32px;  /* hero panels — matches logo container */
  --radius-pill: 999px;

  /* --------------------------------------------------------------------
     Elevation
     -------------------------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(21, 23, 46, 0.10);
  --shadow-md: 0 8px 24px rgba(21, 23, 46, 0.14);
  --shadow-lg: 0 16px 48px rgba(21, 23, 46, 0.18);

  /* --------------------------------------------------------------------
     Motion
     -------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  /* one clock for every hover on the site (27 Oct 2026): the CTA arrow's
     swap time. Colour sweeps, colour fades, lifts and the arrow all run
     on it, in and out, with no delays, so they start and land together */
  --hover-duration: 600ms;

  /* --------------------------------------------------------------------
     Layout
     -------------------------------------------------------------------- */
  --container-max: 82.5rem;    /* 1320 */
  --container-gutter: var(--space-5);
  --section-pad: var(--space-9);
}