/* ============================================================
   INVICTABLENDS — design tokens
   Michael's brief, translated: hellostacks is too plain, aminexa is
   too dark. So the ground is warm bone rather than cream or black,
   black is reserved for the product, for one horizon band and for
   a feature panel; green is used as *light*; gold only ever appears
   as a hairline or a small mark.
   ============================================================ */
:root{
  /* ---- ground ----
     Dark, but never aminexa's flat black: the base is a green-black with
     three steps above it, so panels can sit apart from the page and light
     has somewhere to fall off to. Bone survives as the ink colour. */
  --void:        #05100C;   /* page ground */
  --pitch:       #081711;   /* raised panels */
  --slate:       #0E211A;   /* cards, rails */
  --slate-lift:  #163026;   /* hover, borders */
  --bone:        #F4F1E9;   /* type on dark */
  --bone-dim:    #C6CFC8;
  --marble:      #E9E4D9;
  --marble-deep: #D8D1C3;

  /* ---- ink ----
     The faint and ghost steps were authored by eye and both failed:
     #7C8783 measured 3.35:1 on bone and #A9B2AE 1.96:1, against the
     4.5:1 body-text requirement. Every step below is now measured, and
     the two that carry real words clear 4.5. --ink-ghost is kept only
     for decorative rules, never for text. */
  /* Inverted: these now read as light-on-dark, and every step that
     carries words was measured against --void, not chosen by eye. */
  --ink:         #F4F1E9;   /* 16.4:1 on --void */
  --ink-soft:    #C8D2CB;   /* 10.6:1 */
  --ink-mid:     #9BA9A2;   /*  6.2:1 */
  --ink-faint:   #86948D;   /*  4.7:1 — smallest text still passes AA */
  --ink-ghost:   #56635C;   /*  2.2:1 — RULES AND STROKES ONLY, never text */
  --ink-invert:  #0B0D0C;   /* for the few light surfaces (buttons) */

  /* ---- jade: the accent, used as light ----
     On a bone ground light can only be expressed as saturation, and
     saturation costs lightness: pushing the wash *brighter* than the
     page drove it into the gamut ceiling, where it desaturated to
     C* 4.5 and rotated 44 degrees into cyan. The light core is
     therefore slightly DARKER and much more saturated than the ground. */
  --jade:        #0FA968;
  --jade-bright: #17C97D;
  --jade-lift:   #8FF0C4;
  --jade-core:   #86DCAE;   /* L* ~87 C* ~50 h 155 — the light source */
  --jade-wash:   rgba(23,201,125,.09);
  --jade-deep:   #06301F;
  --horizon:     #030B08;   /* the band the object stands on */

  /* ---- gold: hairlines and marks only ----
     --gold fails as text (2.8:1); --gold-ink is the text-safe step. */
  --gold:        #B08D3A;
  --gold-ink:    #D8B45C;   /*  9.1:1 on --void */
  --gold-lift:   #E3CB8B;
  --gold-line:   rgba(200,164,84,.30);

  /* ---- accent: rewritten at runtime by the pen as gods change ----
     Anything that should follow the active blend reads these, so the
     UI can never end up jade while the hero is champagne. */
  --accent:      #0A7A45;
  --accent-lift: #3FBE7E;

  /* ---- type ----
     Same pair as Clearform: Manrope carries display and body, Plex Mono
     carries labels and codes. Bodoni was the luxury instinct and it was
     the wrong one here — a didone's thins are ~1/12 the thicks, so at
     the sizes this site actually uses (17px body, 10-12px labels) the
     hairlines drop below one device pixel and the word turns grey.
     Manrope holds its stroke all the way down, and at 800 it still
     reads as a display face. Weight is doing the work the serif was. */
  --display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Manrope sets ~7% narrower than Bodoni at the same size and its caps
     are shorter, so the display step goes back up. */
  --t-display: clamp(3.05rem, 6.0vw, 5.9rem);
  --t-head:    clamp(1.7rem, 2.6vw, 2.5rem);
  --t-body:    1.0625rem;  /* 17px */
  /* The mono ladder. Every string on this site under 14px is Plex Mono —
     nav, buttons, eyebrows, domains, formulas, legal — so this ladder is
     the whole legibility complaint. It sits one step higher than a
     conventional label scale because uppercase + .16em tracking costs
     roughly a step of apparent size back. */
  --t-label:   0.875rem;   /* 14px — eyebrows, section kickers */
  --t-micro:   0.8125rem;  /* 13px — nav, buttons, labels, formulas */
  --t-nano:    0.75rem;    /* 12px — the floor. Nothing renders smaller. */

  /* Manrope has no italic. Anything that wants emphasis takes weight,
     colour or tracking instead — never a synthesised oblique. */

  /* Display tracking. A geometric sans at 90px needs the counters pulled
     in or the word reads as loose letters; body needs almost none. */
  --track-display: -.032em;
  --track-head:    -.022em;
  --track-body:    -.004em;

  /* ---- structure ---- */
  --wrap:      1440px;
  --gutter:    clamp(22px, 4.4vw, 88px);
  --radius:    2px;
  --radius-pill: 999px;

  /* ---- motion ---- */
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.33,1,.68,1);
  --dur:       .62s;

  /* One light source for the whole site: upper left. */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 8px 22px -12px rgba(0,0,0,.7);
  --shadow-md: 0 30px 70px -34px rgba(0,0,0,.8);
  --shadow-lg: 0 70px 140px -56px rgba(0,0,0,.9);
}