/* tokens.css — the design system's variables, and nothing else.

   Extracted from base.css on 2026-08-20. Split out because /jam-os/story/ needed
   the SYSTEM (colour, type, easing) without the COMPONENTS: that page reuses
   generic class names base.css also defines (.step, .steps, .hero, .wordmark,
   .eyebrow, .band, .sub), and linking the full sheet silently reflowed its
   10-step scrollytelling column into a 4-across grid. Measured, not guessed —
   .step alone inherited 60+ properties it never overrides.

   This file must contain ONLY custom-property declarations. Adding a single
   layout or component rule here re-creates the collision it exists to avoid.

   Load order on every page: tokens.css, then base.css, then page-local <style>. */

  /* ============ COLOUR SYSTEM ============
     Colour is a system, not a list. The previous palette ran seven fully
     saturated accents against near-black with no ranking, so nothing could
     be emphasised — everything already was. Four roles now:

       surfaces     an elevation ramp. Never pure black: saturated accents
                    on #000 make edges vibrate.
       text         four steps, every one AA on --s2 or darker.
       brand / heat one brand gradient plus exactly ONE loud accent,
                    reserved for CTAs and single-point emphasis.
       categorical  five service identifiers with lightness unified around
                    L≈72, so they identify without ranking each other. The
                    old set spanned a huge lightness range, which silently
                    made Marketing outrank Graphic design for no reason.

     Every legacy name still resolves, as an alias onto a role — so the
     ~143 existing var(--raspberry) style usages across the site re-skin
     from here rather than needing individual rewrites. Prefer role names
     in new code; the aliases exist for the back catalogue. */
  :root{
    /* ── surfaces ── */
    --s0:#08080d;            /* page            */
    --s1:#0d0d15;            /* band            */
    --s2:#12121c;            /* card            */
    --s3:#1a1a28;            /* raised / hover  */
    --line-1:rgba(244,242,238,.07);
    --line-2:rgba(244,242,238,.13);
    --line-3:rgba(244,242,238,.24);
    --line-4:rgba(244,242,238,.45);  /* strong border (pad hover) */
    --ring:rgba(244,242,238,.7);     /* selection ring (colorway chip) */

    /* ── scrims: --s0 black at fixed opacities ── */
    --scrim-1:rgba(8,8,13,.6);   /* ticker, soft glass */
    --scrim-2:rgba(8,8,13,.72);  /* nav, badges */
    --scrim-3:rgba(8,8,13,.82);  /* footer, heavy glass */
    --scrim-4:rgba(8,8,13,.96);  /* near-solid panels */


    /* ── text ── */
    --t-hi:#f4f2ee;
    --t-up:#c8c5d2;          /* hero + CTA subtitles: above body, below headline */
    --t-mid:#aeabba;         /* body — 8.3:1 on --s2 */
    --t-lo:#8b8799;          /* labels — 4.9:1 on --s3, worst case. Never darker. */

    /* ── brand ── */
    --brand-1:#2de2ff;
    --brand-2:#3a5bff;
    --brand-3:#1a44d8; /* was #1f31c9 — indigo tail read violet in splash/hero gradients (2026-08-20 slop audit); hue moved into --brand-2's blue family, same depth */

    /* ── heat: the only loud accent ── */
    --heat:#ff3d6e;

    /* ── categorical: service identity only ── */
    --cat-w:#ff6b86;         /* websites       */
    --cat-a:#57d9f2;         /* apps           */
    --cat-g:#a582ff;         /* graphic design */
    --cat-m:#f5bd5c;         /* marketing      */
    --cat-b:#ff78d2;         /* branding       */
    --cat-r:#6fdba8;         /* reporting & data — the one non-warm/violet hue left at this lightness */
    --ok:#8fe36b;

    /* ── legacy aliases ──
       --violet used to be #8a2eff, which measures 3.66:1 on a dark card and
       failed AA wherever it coloured text (index.html's service 03 hover).
       Pointing it at --cat-g retires that failure everywhere at once, and
       makes --violet / --violet-text the same safe colour. */
    --void:var(--s0);
    --void-soft:var(--s2);
    --panel:rgba(13,13,21,.92);
    --raised:var(--s3);
    --white:var(--t-hi);
    --dim:var(--t-mid);
    --dim-bright:var(--t-up);
    --raspberry:var(--heat);
    --cobalt:var(--brand-2);
    --cyan:var(--brand-1);
    --violet:var(--cat-g);
    --violet-text:var(--cat-g);
    --gold:var(--cat-m);
    --magenta:var(--cat-b);
    --lime:var(--ok);
    --cobalt-bright:var(--brand-2); /* h1 ink gradients */
    --cobalt-deep:var(--brand-3);   /* wordmark + ink gradient tail */
    --ember:#ff7a18;         /* CTA gradient */
    --crimson:#e8192c;       /* CTA gradient */
    --crimson-deep:#b3122f;  /* CTA gradient */


    /* ── geometry ── */
    --r-xs:3px;
    --r-sm:8px;
    --r-md:12px;
    --r-card:18px;
    --r-pill:100px;

    /* ── elevation ── */
    --shadow-lift:0 30px 80px -30px rgba(0,0,0,.9);
    --shadow-low:0 6px 18px -6px rgba(0,0,0,.8);

    /* ── motion curves ── */
    --ease-out:cubic-bezier(.2,.6,.2,1);    /* reveals, most transitions */
    --ease-sweep:cubic-bezier(.7,0,.2,1);   /* svc row wash */
    --ease-inout:cubic-bezier(.65,0,.35,1);
    --ease-flip:cubic-bezier(.6,.05,.25,1); /* lab card A/B flip */
    --ease-drift:cubic-bezier(.3,.7,.2,1);

    /* ── document layers ── */
    --z-bg:0;
    --z-content:10;
    --z-nav:40;
    --z-progress:50;
    --z-grain:60;
    --z-modal:200;
    --z-skip:300;
    --z-splash:999;


    /* ── type scale (Phase 2/3) ── */
    --step-0:clamp(1rem,1.35vw,1.2rem);
    --step-1:clamp(1.25rem,2.2vw,1.65rem);
    --step-2:clamp(1.5rem,2.6vw,2.4rem);
    --step-3:clamp(1.8rem,4.6vw,3.4rem);
    --step-4:clamp(2.2rem,5.6vw,4.4rem);
    --step-5:clamp(2.4rem,7vw,4.6rem);
    --step-6:clamp(2rem,9vw,7rem); /* floor 2rem: 9-10 glyph Syne heroes must clear 375px */

    /* ── space scale ── */
    --sp-1:clamp(16px,2.3vw,26px);
    --sp-2:clamp(20px,3.2vw,40px);
    --sp-3:clamp(30px,4.6vw,58px);
    --sp-4:clamp(48px,7vw,84px);
    --sp-5:clamp(64px,9.5vw,116px);
    --sp-6:clamp(90px,11vw,150px);
    --sp-7:clamp(110px,14vw,190px);
    --gutter:clamp(20px,4vw,56px);   /* page gutter — shell + nav */
    --hero-pad:clamp(130px,16vw,175px); /* sub-page hero top clearance */

    --mono:'IBM Plex Mono',monospace;
    --display:'Syne','Syne Fallback',sans-serif;
    --body:'Manrope','Manrope Fallback',sans-serif;
  }