/* ==========================================================================
   stepkeep — design tokens
   Colour, typography and layout motifs for the site.
   Direction: "a well-made document". Paper and ink with one highlighter.
   ========================================================================== */

:root {
  /* `light` by default; the dark block below flips it. Naming the scheme also
     tells the browser to draw native controls and scrollbars to match. */
  color-scheme: light;

  /* --- Colour ------------------------------------------------------------ */
  --ink: #163a2e;        /* primary: wordmark, headings, primary buttons */
  --paper: #f7f4ee;      /* page background: warm off-white */
  --marker: #f2b33d;     /* accent: the one saturated colour, once per view */
  --graphite: #1e1f1c;   /* body text on paper */
  --slate: #5c645f;      /* secondary text, captions, borders */
  --moss: #2e7d5b;       /* success, "saved locally" */
  --clay: #c8553d;       /* errors and destructive actions only */

  /* Text painted *on* an Ink or Marker fill. Ink flips between schemes, so the
     text that sits on it has to flip too; Marker is the same yellow in both,
     so its text is always the dark one. */
  --on-ink: #f7f4ee;
  --on-marker: #1e1f1c;

  /* Derived surfaces. No new hues: these are Ink/Paper mixed with alpha. */
  --paper-sunk: #f1ece2;         /* alternating section background */
  --surface: #fffdf9;            /* cards and raised wells */
  --rule: rgba(22, 58, 46, 0.14); /* plain table/border rules */
  --rule-strong: rgba(22, 58, 46, 0.26);
  --ink-soft: rgba(22, 58, 46, 0.06);  /* marker-adjacent washes */
  --marker-wash: rgba(242, 179, 61, 0.22);

  /* --- Type -------------------------------------------------------------- */
  --font-head: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Web scale: 56/40/28/20 headings, 17 body, 14 captions */
  --step--1: 0.875rem;   /* 14 caption */
  --step-0: 1.0625rem;   /* 17 body */
  --step-1: 1.25rem;     /* 20 h3 */
  --step-2: 1.75rem;     /* 28 h2 */
  --step-3: 2.5rem;      /* 40 h2 large */
  --step-4: 3.5rem;      /* 56 h1 */

  --lh-body: 1.5;
  --lh-head: 1.1;
  --measure: 68ch;       /* max line length: "well-set document" */

  --tracking-head: -0.02em;

  /* --- 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: 6rem;

  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --page-max: 68rem;      /* ~1088px, keeps prose near the 68ch measure */
  --prose-max: 42rem;
  --radius: 4px;          /* documents have corners, not pillows */
  --radius-lg: 6px;

  /* The sticky header's height, which the hero adds to its own top padding.
     It is not a free number: header.css sizes the bar from its content
     (min-height 4rem plus padding), and the measured box is 65px at nearly every
     width. Between roughly 44.5rem and 48.75rem the desktop nav wraps to a
     second line and the bar becomes 76.8px, which costs the hero 12px of its
     clear air; see the note in hero.css. Keep in step with header.css —
     tools/measure-hero.mjs prints the real header height beside the padding at
     each breakpoint. */
  --header-h: 4.0625rem;  /* 65px */

  --border: 1px solid var(--rule);
  --shadow-card: 0 1px 2px rgba(22, 58, 46, 0.05), 0 8px 24px rgba(22, 58, 46, 0.05);
  --shadow-lift: 0 2px 4px rgba(22, 58, 46, 0.07), 0 16px 40px rgba(22, 58, 46, 0.09);

  --focus: 2px solid var(--ink);
  --focus-offset: 3px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Dark mode is specified for the editor and popup. The
   marketing site follows the same palette so a visitor who prefers dark is not
   dropped into a white document. Ink becomes a lightened green and the text
   painted on Ink (--on-ink) darkens to stay legible against it.

   The palette is written twice on purpose: once for the system preference,
   which must keep working with scripting off, and once for the switch in the
   header. A media query cannot be folded into a selector, so the two blocks
   have to be kept in step by hand. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --ink: #9cc8b4;
    --paper: #14201b;
    --graphite: #ede9e1;
    --slate: #a3ada7;
    /* Dark counterpart of the light --moss, and not optional: the light green
       measures 2.81:1 on the ink-soft strip and 2.99:1 on --surface, under the
       3:1 a graphical object needs (WCAG 2.2 SC 1.4.11). Same hue, lightened
       until it clears 4.5:1 on every dark surface, so a "saved locally" check
       reads as clearly as the text beside it. */
    --moss: #6fbf95;
    --paper-sunk: #1c2a24;
    --surface: #1c2a24;
    --rule: rgba(237, 233, 225, 0.16);
    --rule-strong: rgba(237, 233, 225, 0.3);
    --ink-soft: rgba(237, 233, 225, 0.07);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.35);
    --on-ink: #14201b;
    --hero-bloom: 0.5;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --ink: #9cc8b4;
  --paper: #14201b;
  --graphite: #ede9e1;
  --slate: #a3ada7;
  /* Kept in step with the media-query block above, by hand, for the reason
     given there: the light --moss is under 3:1 on dark surfaces. */
  --moss: #6fbf95;
  --paper-sunk: #1c2a24;
  --surface: #1c2a24;
  --rule: rgba(237, 233, 225, 0.16);
  --rule-strong: rgba(237, 233, 225, 0.3);
  --ink-soft: rgba(237, 233, 225, 0.07);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.35);
  --on-ink: #14201b;
  --hero-bloom: 0.5;
}