/* Design tokens — Kenya-China Tea Summit 2027
 * World: security print / bill of lading. See the direction contract in base.njk.
 *
 * This is the ONLY file permitted a hex literal.
 *
 * Colour strategy: COMMITTED. Intaglio green owns whole regions as ground, not
 * as an accent scattered over white. The light surfaces are a green-grey SAFETY
 * TINT — the stock share certificates and bills of lading are actually printed
 * on. Deliberately not cream, ivory or parchment: those are the warm-paper
 * default, and this document world's real colour range is cooler and harder.
 *
 * Carbon-copy plies (canary, salmon) are the duplicate/triplicate sheets and
 * carry accent duty. Oxblood is reserved for seals, stamps and endorsements —
 * the marks of authority — so it never becomes generic "accent red".
 *
 * Every ratio below is measured by scripts/check-contrast.js, not estimated.
 */

:root {
  /* --- inks: what the engraver puts on the stock ---------------------- */
  --c-ink: #0f2e16;          /* deepest intaglio, body text                */
  --c-ink-2: #14401e;        /* brand deep green, ground for drenched bands */
  --c-engrave: #2e7d32;      /* mid green, guilloche line work             */
  --c-seal: #a5111a;         /* oxblood — stamps, seals, endorsements only  */
  --c-seal-bright: #d42027;  /* cancellation ink, large marks only          */

  /* --- stock: what it is printed on ----------------------------------- */
  --c-paper: #f3f6ef;        /* lightest safety tint, reading surfaces      */
  --c-tint: #dfe7d9;         /* safety tint, document panels               */
  --c-tint-deep: #c3d1bc;    /* heavier tint, rules and inset fields        */

  /* --- carbon plies: the duplicate and triplicate copies ---------------- */
  --c-ply-canary: #e0b13a;
  --c-ply-salmon: #cf8b83;

  /* --- semantic roles --------------------------------------------------- */
  --c-text: var(--c-ink);
  --c-text-muted: #3c5742;   /* tinted from the ground hue, never grey       */
  --c-text-on-ink: var(--c-paper);
  --c-text-on-ink-muted: #b9cbb4;
  --c-heading: var(--c-ink);
  --c-link: var(--c-seal);
  --c-rule: #a8bba1;
  --c-focus: var(--c-seal-bright);

  /* --- type -------------------------------------------------------------
   * Pairing set by the client (fontpair.co): Bricolage Grotesque for display,
   * Google Sans Flex for everything else. Google Sans Code is the mono
   * companion in the same family system and carries ONE role only — values
   * typed into a form field. Drop it and --font-data falls back to the UI
   * face; nothing else depends on it.
   *
   * All three are variable, latin-subset, self-hosted. Zero font-CDN requests.
   */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Google Sans Flex", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-data: "Google Sans Code", ui-monospace, "SF Mono", Menlo, monospace;

  /* Display ceiling is 6rem per the craft floor; the hero sits just under. */
  --step--2: clamp(0.69rem, 0.67rem + 0.09vw, 0.75rem);
  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.94rem);
  --step-0: clamp(1rem, 0.97rem + 0.17vw, 1.11rem);
  --step-1: clamp(1.2rem, 1.14rem + 0.29vw, 1.4rem);
  --step-2: clamp(1.44rem, 1.34rem + 0.47vw, 1.76rem);
  --step-3: clamp(1.73rem, 1.57rem + 0.75vw, 2.22rem);
  --step-4: clamp(2.07rem, 1.83rem + 1.16vw, 2.8rem);
  --step-5: clamp(2.49rem, 2.12rem + 1.77vw, 3.53rem);
  --step-6: clamp(2.99rem, 2.44rem + 2.63vw, 4.44rem);

  --lh-tight: 1.04;
  --lh-heading: 1.14;
  --lh-body: 1.62;
  --measure: 68ch;           /* craft floor: 65-75ch */

  /* Form labels are tracked open, the way stamped and stencilled labels are. */
  --track-label: 0.16em;
  --track-stamp: 0.28em;

  /* --- space: a document's own rhythm ---------------------------------- */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs: 0.75rem;
  --sp-s: 1rem;
  --sp-m: 1.5rem;
  --sp-l: 2.25rem;
  --sp-xl: 3.5rem;
  --sp-2xl: 5.5rem;
  --sp-3xl: 8rem;

  /* --- shape: documents have corners, not pills ------------------------ */
  --radius-s: 2px;
  --radius-m: 3px;

  /* Depth reads as a sheet lifted off a desk: real offset, real blur. */
  --shadow-sheet: 0 2px 4px rgb(15 46 22 / 0.10), 0 12px 28px -8px rgb(15 46 22 / 0.18);
  --shadow-lift: 0 4px 8px rgb(15 46 22 / 0.12), 0 24px 48px -12px rgb(15 46 22 / 0.24);

  /* --- layout ----------------------------------------------------------- */
  --wrap: 74rem;
  --wrap-narrow: 46rem;
  --gutter: clamp(1.1rem, 4vw, 3rem);

  /* --- motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 280ms;
  --dur-slow: 620ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}

/* --- self-hosted faces. Zero requests to any font CDN. ------------------ */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex";
  src: url("/fonts/google-sans-flex.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Code";
  src: url("/fonts/google-sans-code.woff2") format("woff2-variations");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}