/* ==========================================================================
   tokens.css — the single source of truth for brand values.
   Change a colour here and it changes across the entire site.
   ========================================================================== */

/* --- Fonts -------------------------------------------------------------- */

/* Inter, self-hosted as one variable file covering weights 400-700 (latin
   subset). Chosen for legibility at small sizes; see brand/brand-guide.md. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-v20-latin-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand colours (brand/brand-guide.md) ----------------------------- */
  --petrol-blue: #0B4F6C;
  --process-orange: #E0662A;
  --deep-ink: #0A2A38;
  --steel-grey: #5B6E78;
  --mist: #EEF3F5;
  --white: #FFFFFF;

  /* Derived tints. Hand-picked, not generated, so contrast stays predictable. */
  --petrol-blue-dark: #083D54;
  --petrol-blue-light: #16647F;
  --orange-dark: #C4551F;
  --orange-light: #F7AF87;   /* eyebrow/accent text on dark grounds — 8.16:1 on Deep Ink, 4.87:1 on Petrol Blue */
  --orange-text: #B34A17;    /* small orange text on light grounds — 5.37:1 on White, 4.80:1 on Mist */
  --border: #D6E0E4;

  /* --- Semantic roles --------------------------------------------------- */
  --text: var(--deep-ink);
  --text-muted: var(--steel-grey);
  --bg: var(--white);
  --bg-alt: var(--mist);
  --link: var(--petrol-blue);

  /* --- Type ------------------------------------------------------------- */
  --font-head: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* --- Spacing: a single 8px scale -------------------------------------- */
  --space-1: 0.5rem;   /*  8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */
  --space-7: 6rem;     /* 96px */
  --space-8: 8rem;     /* 128px */

  /* Section padding scales with the viewport, 48px phone to 96px desktop. */
  --section-y: clamp(3rem, 8vw, 6rem);

  /* --- Layout ----------------------------------------------------------- */
  --container: 1280px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* --- Surface ---------------------------------------------------------- */
  --radius: 4px;
  --radius-lg: 8px;
  --shadow-1: 0 1px 3px rgba(10, 42, 56, 0.08);
  --shadow-2: 0 8px 24px rgba(10, 42, 56, 0.12);

  /* --- Motion ----------------------------------------------------------- */
  --transition: 180ms ease;

  /* --- Stacking --------------------------------------------------------- */
  --z-header: 100;
  --z-menu: 200;
}