/*
 * tokens.css
 * GovernIT.sc design tokens.
 *
 * SINGLE SOURCE OF TRUTH. Never hard-code a colour, size or spacing value in a
 * component; reference a token from here.
 *
 * 2026-08-01. This replaces the palette and typography carried over from the
 * presentation deck system, at Louys's instruction. The deck palette is no
 * longer used anywhere on the website.
 *
 * Direction: premium B2B advisory. Warm paper rather than cool grey, near-black
 * ink rather than navy, and a single deep green accent standing for assurance.
 * Green is used sparingly; the page is carried by ink, paper and space.
 */

/* ---- Self-hosted type. No third-party font request, so no font CDN sees a
   visitor and no consent question arises. Both faces are SIL Open Font
   Licence 1.1, which permits commercial use and self-hosting. ------------ */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Palette --------------------------------------------------------- */
  --ink: #14181d;
  --ink-deep: #0c0f13;
  --ink-soft: #232a32;

  --paper: #fbfaf7;
  --paper-2: #f3f0ea;
  --paper-tint: #ede8df;
  --stone: #dcd5c9;

  --muted: #5c636b;
  --muted-on-dark: #c3c7cc;
  --white: #fff;

  --accent-base: #1f5c3d;
  --accent-ink: #17462e;
  --accent-mid: #2e7a54;
  --accent-bright: #63b98e;
  --accent-soft: #a8d4bd;

  /* Exposure scale. Fixed meaning, never reinterpreted.
     low = controlled, mid = intermediate, high = exposed. */
  --exposure-low: #1f5c3d;
  --exposure-mid: #a8761f;
  --exposure-high: #97362a;

  /* ---- Roles ----------------------------------------------------------- */
  --bg-page: var(--paper);
  --bg-card: var(--white);
  --bg-dark: var(--ink);
  --bg-darkest: var(--ink-deep);
  --ink-heading: var(--ink);
  --ink-body: var(--muted);
  --ink-on-dark: var(--white);
  --ink-body-on-dark: var(--muted-on-dark);
  --accent: var(--accent-ink);
  --accent-on-dark: var(--accent-bright);
  --eyebrow-on-light: var(--accent-ink);
  --eyebrow-on-dark: var(--accent-soft);
  --rule-light: rgb(20 24 29 / 13%);
  --rule-dark: rgb(251 250 247 / 16%);

  /* ---- Type ------------------------------------------------------------ */
  --font: "Inter Variable", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display:
    "Instrument Sans Variable", "Inter Variable", ui-sans-serif, system-ui, sans-serif;

  --fs-h1: clamp(2.35rem, 5.2vw, 4rem);
  --fs-h2: clamp(1.65rem, 3.4vw, 2.6rem);
  --fs-h3: 1.3rem;
  --fs-lead: clamp(1.075rem, 1.55vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.7813rem;

  --lh-tight: 1.04;
  --lh-heading: 1.14;
  --lh-body: 1.68;

  --tracking-eyebrow: 0.14em;
  --tracking-display: -0.032em;

  /* ---- Space ----------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5.5rem;

  --section-y: clamp(4rem, 8.5vw, 7rem);
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Shape ----------------------------------------------------------- */
  --radius-card: 16px;
  --radius-tile: 12px;
  --radius-input: 10px;
  --radius-pill: 999px;
  --accent-bar: 3px;

  --shadow-card: 0 1px 2px rgb(20 24 29 / 4%), 0 10px 30px rgb(20 24 29 / 6%);
  --shadow-card-hover: 0 2px 6px rgb(20 24 29 / 6%), 0 20px 50px rgb(20 24 29 / 11%);

  /* ---- Motion ---------------------------------------------------------- */
  --t-fast: 150ms;
  --t-base: 220ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* Motion language. Three durations and two curves, used everywhere. A new
     timing value is a defect, not a decision: the whole point of a small set is
     that the site moves the same way in every place. See MOTION.md.

     Restraint is the brief. This practice sells judgement, and motion that
     draws attention to itself reads as a template. Every pattern here is either
     showing structure the reader could not otherwise see, or getting out of
     the way. */
  --t-enter: 620ms; /* entrance, once, on scroll into view */
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); /* decisive, settles rather than bounces */
  --reveal-shift: 14px; /* how far an entering element travels. Small on purpose */
  --stagger: 70ms; /* between siblings in a revealed group */

  /* ---- Focus ----------------------------------------------------------- */
  --focus-ring: 2px solid var(--accent-mid);
  --focus-offset: 3px;
}