/* ============================================================
   DESIGN TOKENS
   Michelle Gale · Palette v2 · the designer's seven
   2 September 2026. Supersedes Sacred Ordinary v1 and v1.1.

   The designer who drew the Apprenticing with Presence mark also
   set the palette for the whole brand: Michelle's original six, in
   the roles she assigned them, with Linen warmed to the logo's
   ground and Sage Green added. The values and the roles below are
   theirs exactly. Sage arrived without a role, so it takes the one
   job the site was doing with an invented colour: every quiet
   label, caption and eyebrow on the light ground.

     Linen      #f9efe6  primary light surface
     Obsidian   #1a1410  dark surfaces
     Deep Slate #1f2a33  name, headings
     Deep Plum  #4a2040  dark accent surface
     Oxblood    #7a2a2a  voice, tagline, italics, links
     Raw Gold   #b8966a  mark, dividers, buttons
     Sage Green #5a5d41  labels and captions on light

   Type is unchanged from Sacred Ordinary v1: Spectral for display
   and voice, Jost for labels and nav, Open Sans for body. Tangerine,
   the hand, was retired on 5 September.

   The colour rules the code enforces, all measured:

   1. Raw Gold never carries text on Linen. It is 2.43:1, so a gold
      button takes Obsidian text on it and a gold rule stays a rule.
   2. The voice colour becomes the mark colour the moment the ground
      goes dark. Oxblood speaks on Linen at 8.45:1. On Obsidian it
      is 1.90:1 and on Plum 1.39:1, so there the voice is Raw Gold.
   3. Sage is a light-ground colour. It is 6.02:1 on Linen and under
      2.7:1 on every dark surface, so it never appears on Obsidian,
      Plum or itself. Sage is also never a full-bleed surface,
      because Raw Gold on Sage is 2.47:1 and rule 2 would break.
   4. Deep Slate on Deep Plum is 1.09:1 and on Obsidian 1.25:1, so
      headings on a dark ground go Linen.

   Every derived surface below is a stated mix of two palette
   colours, resolved to hex so nothing depends on color-mix()
   support. The recipe is in the comment beside each one.
   ============================================================ */

:root{
  /* ---- The seven ----------------------------------------------- */
  --linen:#f9efe6;
  --obsidian:#1a1410;
  --slate:#1f2a33;
  --plum:#4a2040;
  --oxblood:#7a2a2a;
  --gold:#b8966a;
  --sage:#5a5d41;

  /* ---- Type ------------------------------------------------------ */
  --font-display:'Spectral',Georgia,serif;
  --font-label:'Jost',system-ui,sans-serif;
  --font-body:'Open Sans',system-ui,sans-serif;

  --step-display:clamp(2.5rem,5vw,4rem);
  --step-head:clamp(1.75rem,3vw,2.25rem);
  --step-voice:clamp(1.5rem,2.2vw,1.75rem); --step-body:1.0625rem;
  --step-label:0.75rem;

  --lh-display:0.98; --lh-body:1.75;
  --track-label:0.22em; --measure:66ch;
  --gutter:clamp(1.5rem,5vw,6rem);
  --section:clamp(4rem,9vw,8rem);
}

/* ---- Derived. Use these, not the seven above. --------------------- */
:root {
  --step-sub:   1.375rem;   /* 22, subheads          */
  --step-sub-2: 1.125rem;   /* 18, small heads       */
  --step-meta:  0.875rem;   /* 14, captions, notes   */

  --lh-head:  1.15;
  --lh-voice: 1.45;

  /* Surfaces */
  --bg:        var(--linen);
  --bg-sunk:   #eee5da;          /* linen 93% + sage. Quiet alternating band, 1.10:1 off linen */
  --bg-dark:   var(--slate);     /* panels are Deep Slate (5 September); the footer keeps Obsidian */
  --bg-accent: var(--plum);

  /* Ink on light */
  --text:      var(--obsidian);  /* 16.08:1 on linen */
  --text-soft: var(--sage);      /*  6.02:1 on linen. Labels, captions, eyebrows */
  --heading:   var(--slate);     /* 12.88:1 on linen */
  --voice:     var(--oxblood);   /*  8.45:1 on linen */
  --link:      var(--oxblood);
  --on-gold:   var(--obsidian);  /*  6.61:1 on gold  */

  /* Ink on dark. The voice becomes the mark. */
  --dk-text:  var(--linen);      /* 16.08:1 on obsidian, 11.78:1 on plum */
  --dk-soft:  #bbb2aa;           /* linen 72% + obsidian. 8.74:1 on obsidian, 6.40:1 on plum */
  --dk-link:  var(--gold);       /*  6.61:1 on obsidian,  4.84:1 on plum */
  --dk-voice: var(--gold);

  /* Rules. Dividers are gold, per the palette. */
  --rule:       var(--gold);
  --rule-quiet: #e7d6c3;         /* linen 72% + gold. Hairlines that recede */
  --rule-dark:  #47403b;         /* obsidian 80% + linen. Hairlines on the footer */
  --rule-slate: #4b5157;         /* slate 80% + linen. Hairlines on a Slate panel */

  /* Measure and frame */
  --wrap:       70rem;
  --wrap-prose: 40rem;

  /* Space. Gutter clamps 24 to 96. Section clamps 64 to 128. */
  --s-1: 0.5rem;
  --s-2: 0.875rem;
  --s-3: 1.375rem;
  --s-4: 2.25rem;
  --s-5: 3.5rem;
  --s-6: 5.5rem;
  --s-7: 8rem;

  --radius: 0;               /* never a rounded corner */
  --transition: 220ms ease;
}