/* =============================================================================
   Foldnine — design tokens

   One dark palette, tinted rather than neutral. Every grey here carries the
   accent's hue at low saturation, which is what keeps a two-colour page from
   reading as a default stylesheet. Nothing is pure black or pure white.

   The second accent is not decoration. The system this site describes is
   partly built and partly not, and the architecture section says which is
   which - amber marks a stage whose workflow exists as a contract but not yet
   as a running job. Using a colour for that is cheaper than a paragraph, and
   it keeps the page honest without making it apologetic.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- surface ramp: near-black, faint green cast ------------------------ */
  --bg:          #090b0a;
  --surface-1:   #0f1211;
  --surface-2:   #151918;
  --surface-3:   #1c2120;

  /* --- rules ------------------------------------------------------------- */
  --rule:        #1e2322;
  --rule-firm:   #2c3331;
  --rule-accent: #1d4c40;

  /* --- text: three steps, not two ---------------------------------------- */
  --ink:         #eef1ef;   /* headings only */
  --prose:       #b4bcb8;   /* running copy, stepped back from headings */
  --muted:       #8a938f;   /* metadata, labels, timestamps */

  /* --- accents ----------------------------------------------------------- */
  --accent:      #6fe0b8;   /* live, active, the system working */
  --accent-deep: #35a583;
  --accent-wash: #0e2721;
  --pending:     #e0b25f;   /* contract exists, job does not run yet */
  --pending-wash:#2a2113;

  /* --- type ramp ---------------------------------------------------------
     Fractions of a 16px root, computed rather than eyeballed. The jumps are
     deliberate: nothing sits between --step-0 and --step-1 where the eye
     would read two sizes as one. */
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --step--2: .6875rem;                                    /* 11px  micro label */
  --step--1: .75rem;                                      /* 12px  metadata    */
  --step-0:  1.0625rem;                                   /* 17px  UI text     */
  --step-1:  clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); /* lede              */
  --step-2:  clamp(1.375rem, 1.2rem + .8vw, 1.875rem);    /* sub-head          */
  --step-3:  clamp(1.875rem, 1.5rem + 1.8vw, 2.875rem);   /* section head      */
  --step-4:  clamp(2.5rem, 1.6rem + 4.4vw, 5.5rem);       /* display           */
  --step-5:  clamp(2.85rem, 1.7rem + 5.4vw, 6.5rem);      /* hero              */

  /* --- tracking: tightens as size grows, which is how type is actually set */
  --track-hero: -.032em;
  --track-disp: -.028em;
  --track-head: -.022em;
  --track-sub:  -.016em;
  --track-mono:  .12em;

  /* --- rhythm ------------------------------------------------------------ */
  --gutter:  clamp(1.25rem, 4vw, 4rem);
  --shell:   82rem;
  --measure: 34rem;
  --rail:    9rem;

  /* --- motion: two durations, and that is the whole system ---------------- */
  --t-state: 140ms;
  --t-move:  620ms;
  --ease:    cubic-bezier(.22, .61, .36, 1);
}