/* Design tokens from design/design-system.md (sections 2 to 4). Components use these only. */

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("/fonts/barlow-latin-100-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/barlow-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-latin-600-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* 2.1 Brand base */
  --navy: #123243;
  --blue: #1C6188;
  /* The palette: three light colours from the bokeh image. Fills, borders and backgrounds only, never text. */
  --mist-blue: #BBD6EA;
  --mist-aqua: #A9DBE2;
  --mist-blush: #EBD9CA;
  --rust: #89431E;
  --rust-hover: #6F3516;
  --ink-muted: #4A5B66;
  --paper: #EDEBE6;
  --surface: #E4E1D9;
  --line: #D6D2C8;
  --error: #B42318;

  /* 2.2 Practice and method colours */
  --deals: #A34924;
  --insights: var(--loop);
  --delivery: #1F5FA8;
  --operating-base: #CDD63C;
  --operating-border: #B4BF28;
  --operating-ink: #123243;
  --prove: #5B2D8E;
  --loop: #1A6C62;
  --handoff: var(--ink-muted);

  /* Derived */
  --on-rust: var(--paper);
  --operating: color-mix(in srgb, var(--operating-base) 30%, var(--paper));
  --blue-tint: rgba(28, 97, 136, 0.08);
  --shadow-soft: 0 1px 2px rgba(18, 50, 67, 0.06);

  /* 3 Typography */
  --font-head: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1: clamp(36px, 2.4rem + 1.2vw, 48px);
  --fs-h2: clamp(26px, 1.4rem + 0.9vw, 32px);
  --fs-h3: 24px;
  --fs-body: 18px;
  --fs-small: 15px;
  --fs-label: 15px;
  --fs-note: 12px;
  --fs-micro: 10px;

  /* 4 Spacing and layout */
  --s-4: 4px;
  --s-8: 8px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;
  --s-96: 96px;
  --container: 1120px;
  --reading: 680px;
  --gutter: 24px;
  --section-pad: 64px;
  --radius: 8px;
  --ease: 150ms ease;

  /* Diagrams (design-system.md section 6, Diagrams). Sizes are SVG user units: every diagram
     uses a viewBox 1000 wide, so one unit is one CSS pixel at a 1000px frame. */
  --diagram-max-width: 1120px;
  --diagram-min-width: 860px;
  --diagram-size-heading: var(--fs-small);
  --diagram-size-label: var(--fs-small);
  --diagram-size-note: var(--fs-small);
  --diagram-space: 48px;
}

@media (min-width: 900px) {
  :root {
    --gutter: 48px;
    --section-pad: 48px;
  }
}

/* Dark is the default. Light applies only when the visitor picks it (data-theme="light" on <html>, set by js/theme.js). */
:root:not([data-theme="light"]) {
  color-scheme: dark;
    --navy: #E6EEF2;
    --blue: #7DB8DC;
    --mist-blue: #35566B;
    --mist-aqua: #2F5A63;
    --mist-blush: #5A4A40;
    --rust: #D98A5F;
    --rust-hover: #E7A47E;
    --ink-muted: #9BB0BB;
    --paper: #0F1C24;
    --surface: #16262F;
    --line: #2B404B;
    --error: #F0857C;

    --deals: #E0916A;
    --insights: var(--loop);
    --delivery: #7FB2EE;
    --prove: #B99BE0;
    --loop: #5FC2B3;

    /* Operating model in dark mode: a deep, barely tinted fill on the card surface with a bright yellow border and
       light ink, so it does not glare against the dark page (design system 2.2). */
    --operating: color-mix(in srgb, var(--operating-base) 11%, var(--surface));
    --operating-border: var(--operating-base);
    --operating-ink: #E6EEF2;
    --blue-tint: rgba(125, 184, 220, 0.12);
  }