Design systems

/* ============================================================================
 * Kuickr v2 design tokens — Winter
 * ----------------------------------------------------------------------------
 * Registry member: kuickr-v2. This is the current Kuickr-owned chrome system.
 * Keep the semantic `--kk-*` vocabulary stable so product surfaces can move
 * from Kuickr v1 without renaming their roles.
 *
 * Winter is light by default. Dark mode is the explicit Blue-charcoal
 * `data-theme="dark"` variant. A scoped authored surface may opt in with
 * `data-design-system="kuickr-v2"`; explicitly selected Page body systems
 * remain isolated from this Kuickr chrome contract.
 * ========================================================================== */

:root,
[data-design-system="kuickr-v2"] {
  /* Type families */
  --kk-font-display: "Libre Baskerville", Georgia, serif;
  --kk-font-ui:      "Space Grotesk", system-ui, sans-serif;
  --kk-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Surfaces (back → front) */
  --kk-bg:        #ffffff;
  --kk-wash:      #eef2f5;
  --kk-paper:     #f8fafb;
  --kk-card:      #ffffff;
  --kk-fill:      #eef2f5;
  --kk-fill-soft: #f4f7f9;
  --kk-line:      #e6ecef;
  --kk-border:    #dbe3e8;

  /* Text */
  --kk-ink:        #12181f;
  --kk-text:       #25303a;
  --kk-text-soft:  #3a434c;
  --kk-muted:      #7c8791;
  --kk-muted-soft: #8f98a1;
  --kk-faint:      #a9b2ba;

  /* Brand — ink primary, ice orientation and focus */
  --kk-primary:         #12181f;
  --kk-on-primary:      #eef2f5;
  --kk-secondary:       #2f7fb0;
  --kk-secondary-hover: #3f8dc9;
  --kk-secondary-soft:  #dcedf5;
  --kk-on-secondary:    #ffffff;
  --kk-orientation:       var(--kk-secondary);
  --kk-orientation-hover: var(--kk-secondary-hover);

  /* Accent-as-text / on-accent — contrast-safe semantic roles (spec 35.3).
   * --kk-secondary above is an INDICATOR/orientation color (~4.4:1 ice on white —
   * do NOT use it for body text, eyebrows, key columns, or filled-button labels).
   * These roles give authors a name that can't fail contrast, AA-checked per theme.
   * Target ≥ 4.5:1 (normal text); verify with a checker before treating as final. */
  --kk-accent-text: #1c608e;  /* accent used AS TEXT on a light surface (~5.8:1 on white/card) */
  --kk-accent-fill: #23678f;  /* accent as a FILLED background, distinct from the indicator */
  --kk-on-accent:   #ffffff;  /* text sitting ON --kk-accent-fill (~5.5:1) */

  /* Semantic node / card types — reserve these hues for meaning */
  --kk-decision: #4b7bd7;
  --kk-blocker:  #d74b4b;
  --kk-question: #8b5cf6;
  --kk-idea:     #e8a53b;
  --kk-outcome:  #1f7a68;
  --kk-parked:   #66717b;

  /* Foregrounds for quick identity accents. Keep --kk-on-secondary's existing
   * brand-control contract separate from the identity use of that hue. */
  --kk-on-decision:           #0b0d0f;
  --kk-on-blocker:            #0b0d0f;
  --kk-on-question:           #0b0d0f;
  --kk-on-idea:               #15161a;
  --kk-on-outcome:            #ffffff;
  --kk-on-link:               #0b0d0f;
  --kk-on-identity-secondary: #0b0d0f;

  /* Visibility */
  --kk-private: #66717b;
  --kk-link:    #2f7fb0;
  --kk-public:  #1f7a68;

  /* Radii */
  --kk-r-xs:   4px;
  --kk-r-sm:   7px;
  --kk-r-md:   10px;
  --kk-r-lg:   14px;
  --kk-r-xl:   20px;
  --kk-r-pill: 999px;

  /* Spacing scale */
  --kk-s-1: 4px;
  --kk-s-2: 8px;
  --kk-s-3: 12px;
  --kk-s-4: 16px;
  --kk-s-5: 24px;
  --kk-s-6: 32px;
  --kk-s-7: 48px;
  --kk-s-8: 72px;

  /* Reading measure */
  --kk-read: 720px;

  /* Elevation */
  --kk-shadow-sm: 0 1px 2px rgba(18, 24, 31, .07);
  --kk-shadow-md: 0 6px 20px rgba(18, 24, 31, .09);
  --kk-shadow-lg: 0 24px 60px rgba(18, 24, 31, .16);

  /* Motion */
  --kk-t-fast:      120ms;
  --kk-t-base:      200ms;
  --kk-t-slow:      320ms;
  --kk-ease-out:    cubic-bezier(.4, 0, .2, 1);
  --kk-ease-settle: cubic-bezier(.16, 1, .3, 1);
}

[data-theme="dark"],
[data-design-system="kuickr-v2"][data-theme="dark"] {
  --kk-bg:        #121b24;
  --kk-wash:      #16212b;
  --kk-paper:     #18242e;
  --kk-card:      #1d2a35;
  --kk-fill:      #243441;
  --kk-fill-soft: #202f3b;
  --kk-line:      #2a3b49;
  --kk-border:    #314252;

  --kk-ink:        #eef2f5;
  --kk-text:       #eef2f5;
  --kk-text-soft:  #c3c9cf;
  --kk-muted:      #8f98a1;
  --kk-muted-soft: #74808a;
  --kk-faint:      #65717b;

  --kk-primary:         #eef2f5;
  --kk-on-primary:      #121b24;
  --kk-secondary:       #5aafe2;
  --kk-secondary-hover: #79c2eb;
  --kk-secondary-soft:  #203b4c;
  --kk-on-secondary:    #121b24;

  /* Accent-as-text / on-accent (dark) — bright ice reads on charcoal (spec 35.3) */
  --kk-accent-text: #5aafe2;  /* accent as text on a dark surface (~6.7:1 on card) */
  --kk-accent-fill: #5aafe2;  /* bright ice fill */
  --kk-on-accent:   #12181f;  /* ink on the bright fill (~8:1) */

  --kk-outcome: #5fd6c4;
  --kk-on-outcome: #15161a;
  --kk-on-identity-secondary: #15161a;
  --kk-private: #c3c9cf;
  --kk-public:  #5fd6c4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  [data-design-system="kuickr-v2"]:not([data-theme="light"]) {
    --kk-bg:        #121b24;
    --kk-wash:      #16212b;
    --kk-paper:     #18242e;
    --kk-card:      #1d2a35;
    --kk-fill:      #243441;
    --kk-fill-soft: #202f3b;
    --kk-line:      #2a3b49;
    --kk-border:    #314252;

    --kk-ink:        #eef2f5;
    --kk-text:       #eef2f5;
    --kk-text-soft:  #c3c9cf;
    --kk-muted:      #8f98a1;
    --kk-muted-soft: #74808a;
    --kk-faint:      #65717b;

    --kk-primary:         #eef2f5;
    --kk-on-primary:      #121b24;
    --kk-secondary:       #5aafe2;
    --kk-secondary-hover: #79c2eb;
    --kk-secondary-soft:  #203b4c;
    --kk-on-secondary:    #121b24;

    /* Accent-as-text / on-accent (dark) — bright ice reads on charcoal (spec 35.3) */
    --kk-accent-text: #5aafe2;  /* accent as text on a dark surface (~6.7:1 on card) */
    --kk-accent-fill: #5aafe2;  /* bright ice fill */
    --kk-on-accent:   #12181f;  /* ink on the bright fill (~8:1) */

    --kk-outcome: #5fd6c4;
    --kk-on-outcome: #15161a;
    --kk-on-identity-secondary: #15161a;
    --kk-private: #c3c9cf;
    --kk-public:  #5fd6c4;
  }
}

/* ============================================================================
 * Kuickr LANDING design tokens
 * ----------------------------------------------------------------------------
 * Design-system library member: kuickr-landing (spec 35.5).
 *
 * REPLACES the "Signal" direction (ink + electric violet, version c119dc7c),
 * rejected by the founder. That snapshot stays retained and addressable; this is
 * the current identity.
 *
 * DERIVED FROM A MEASURED REVIEW of poolside.ai and speakeasy.com — read at the
 * stylesheet level, not by impression. Six mechanisms both sites share, all of
 * them load-bearing below.
 *
 * fal.ai was the third reference and could not be fetched (Vercel bot gate), so
 * the first cut of this file attributed nothing to it. The founder then supplied
 * a full screenshot, and the decorative palette and hero band below ARE from
 * fal — read from that image rather than from its stylesheet, which is a weaker
 * source and is why only the coarse decisions (hue family, blob texture, cool
 * pale ground) are taken from it and none of the fine ones.
 *
 *   1. ONE REVERSIBLE NEUTRAL RAMP, semantics as aliases. Dark mode falls out of
 *      swapping two values; there is no second palette to maintain.
 *   2. WARM NEUTRALS. Near-black is never #000 and paper is never #fff-only —
 *      both grounds carry a yellow-brown cast.
 *   3. STRUCTURE IS INK AT ALPHA. Hairlines are the ink colour at 12%/24%, not
 *      grey hexes. Cards are a 1px ring, never a blurred drop shadow.
 *   4. UPPERCASE IS QUARANTINED to mono micro-type at +0.08em. Headlines are
 *      sentence case with NEGATIVE tracking. Tracking is a function of size:
 *      negative above ~20px, exactly zero at or below 16px.
 *   5. GRAPHICS ARE CONSTRUCTED, not screenshotted — built from the same
 *      material as the page, so they theme and stay crisp at any DPI.
 *   6. MOTION IS ENTRY-ONLY and staggered. Nothing loops in the background.
 *
 * LIGHT IS PRIMARY, as on both references, with dark as an explicit opt-in via
 * data-theme (three states: system / light / dark) rather than bare
 * prefers-color-scheme.
 *
 * Scoped: apply class="ks-tokens" to the page root.
 *
 * FIVE RULES OF USE, shipped as part of the system:
 *   1. Terracotta marks RECEIPT and nothing else — the inbound marker, the
 *      running total, the comment anchor, the winning column, and exactly one
 *      primary CTA per band. Never headlines, never section grounds, never
 *      decoration. If a colour is not reporting that something came back from a
 *      stranger, it is ink or stone.
 *   2. One accent object per band, maximum. Scope it at section level. If two
 *      things in one viewport are terracotta, one of them is wrong.
 *   3. The accent NEVER changes hue between themes — only --ks-accent-text is
 *      re-tuned for legibility. A signal that means something must stay the same
 *      colour in both.
 *   4. Structure is never accent-coloured. Borders, rules and card edges use the
 *      hairline roles only. No coloured borders, no gradient as structure, and
 *      --ks-shadow may appear at most twice on a page.
 *   5. The decorative palette is ORNAMENT AND NOTHING ELSE. --ks-deco-* may
 *      only ever be a background shape. It may not colour text, a border, an
 *      icon, a chart, a state or a control, and no product concept may be
 *      identified by one of these hues. This rule is what keeps rule 1 true:
 *      the moment a decorative colour means something, terracotta stops being
 *      the thing that means "received".
 *      Every --ks-deco-* value is light enough to carry --ks-ink at AA, because
 *      the reference this came from lets shapes sit behind text — legibility,
 *      not avoidance, is what makes that safe.
 * ========================================================================== */

.ks-tokens {
  /* ── Type ──────────────────────────────────────────────────────────────
     TWO REGISTERS, and the choice is live. The serif says "this is a page with
     prose in it", which is what Kuickr publishes; the bold grotesque is fal's
     register, which the founder chose for the landing. --ks-display is the
     serif because that is the system's default voice; a surface that wants the
     fal register overrides it with --ks-sans at weight 700 rather than
     introducing a third family. */
  --ks-display: "Instrument Serif", ui-serif, Georgia, serif;
  --ks-display-alt: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --ks-display-weight-alt: 700;
  --ks-sans:    "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ks-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The hero reads as a thesis — 40px phone to 72px desktop. Not 24 (the claim
     goes unread), not 104 (a frontier-lab flex on a $149 product). */
  --ks-size-hero:    clamp(2.5rem, 5vw, 4.5rem);
  --ks-size-section: clamp(2rem, 3.6vw, 3rem);
  --ks-size-feature: clamp(1.5rem, 2.2vw, 2rem);
  --ks-size-lead:    clamp(1.125rem, 1.4vw, 1.3125rem);
  --ks-size-body:    1rem;
  --ks-size-micro:   0.875rem;   /* mono uppercase: eyebrow = button = label = meta */
  --ks-size-detail:  0.75rem;

  --ks-track-display: -0.035em;
  --ks-track-feature: -0.02em;
  --ks-track-body:     0em;
  --ks-track-micro:    0.08em;

  --ks-lh-hero:  1.02;
  --ks-lh-head:  1.15;
  --ks-lh-body:  1.6;
  --ks-lh-micro: 1.2;

  /* ── Ground — light is primary ─────────────────────────────────────── */
  --ks-bone:   #faf8f5;   /* page ground */
  --ks-paper:  #ffffff;   /* raised band / card */
  --ks-ink:    #17120e;   /* warm near-black — 17.7:1 on bone */
  --ks-stone:  #5c5550;   /* secondary text — 6.8:1 on bone */

  /* Structure: ink at alpha, never a grey hex. */
  --ks-hairline: rgba(23, 18, 14, 0.12);
  --ks-rule:     rgba(23, 18, 14, 0.24);
  --ks-shadow:   0 20px 50px rgba(23, 18, 14, 0.07);

  /* ── Accent — one hue, and it means "received" ─────────────────────── */
  --ks-accent:      #c04a2a;   /* fill; white on it = 4.97:1 */
  --ks-accent-text: #a33d20;   /* accent AS TEXT on bone = 6.11:1 */
  --ks-on-accent:   #ffffff;

  /* ── Decoration (added 2026-08-16, founder instruction) ─────────────
     Large dithered pixel-blobs bleeding off the band edges, after fal.ai. The
     four hues exist so texture can be multi-coloured WITHOUT the accent losing
     its job — see rule 5. Contrast of --ks-ink over each, measured:
     lime 13.1:1 · cyan 11.1:1 · amber 11.5:1 · violet 8.5:1. */
  --ks-deco-lime:   #c6e64f;
  --ks-deco-violet: #b9a3f5;
  --ks-deco-cyan:   #7fd4ee;
  --ks-deco-amber:  #f5c542;
  --ks-deco-opacity: 1;      /* dark mode dims the set rather than restating it */

  /* The pale band the hero sits on. Cool on purpose: warm pastels only read as
     texture against a cool ground, which is why the warm tint failed. */
  --ks-hero: #eaf4fa;

  /* ── Rhythm ────────────────────────────────────────────────────────── */
  --ks-max:     1280px;
  --ks-measure: 640px;
  --ks-band-y:  clamp(4rem, 8vw, 7rem);
  --ks-pad-x:   clamp(1.25rem, 4vw, 3rem);
  --ks-radius:  6px;    /* near-square; nothing rounder than 8px */

  --ks-ease: cubic-bezier(.16, 1, .3, 1);
  --ks-dur:  420ms;
}

/* Dark: the SAME two values with their roles exchanged. No second palette. */
.ks-tokens[data-theme="dark"],
[data-theme="dark"] .ks-tokens {
  --ks-bone:  #17120e;
  --ks-paper: #201a15;   /* raised stays LIGHTER than ground, as in light mode */
  --ks-ink:   #faf8f5;
  --ks-stone: #a8a09a;   /* 7.3:1 on the dark ground */

  /* Hairline opacity RISES in dark — 12%→16%, 24%→30% — or structure vanishes. */
  --ks-hairline: rgba(250, 248, 245, 0.16);
  --ks-rule:     rgba(250, 248, 245, 0.30);
  --ks-shadow:   0 20px 50px rgba(0, 0, 0, 0.45);

  --ks-accent:      #c04a2a;   /* rule 3: the hue does not move */
  --ks-accent-text: #f08a67;   /* re-tuned only for legibility — 7.64:1 */
  --ks-on-accent:   #ffffff;

  /* The decorative hues keep their values and lose their intensity: at full
     strength on a dark ground they stop being texture and become the subject. */
  --ks-deco-opacity: .42;
  --ks-hero: #141b21;
}

/* A band that stays dark in BOTH themes. Not a mode — a material. Used for the
   hero and for the RECEIVE step, so the one-directional → bidirectional turn is
   a change the eye registers before a word is read. */
.ks-inverted {
  --ks-bone:  #17120e;
  --ks-paper: #201a15;
  --ks-ink:   #faf8f5;
  --ks-stone: #a8a09a;
  --ks-hairline: rgba(250, 248, 245, 0.16);
  --ks-rule:     rgba(250, 248, 245, 0.30);
  --ks-accent-text: #f08a67;
}

/* ============================================================================
 * Kuickr v2 design tokens — Winter
 * ----------------------------------------------------------------------------
 * Registry member: kuickr-v2. This is the current Kuickr-owned chrome system.
 * Keep the semantic `--kk-*` vocabulary stable so product surfaces can move
 * from Kuickr v1 without renaming their roles.
 *
 * Winter is light by default. Dark mode is the explicit Blue-charcoal
 * `data-theme="dark"` variant. A scoped authored surface may opt in with
 * `data-design-system="kuickr-v2"`; explicitly selected Page body systems
 * remain isolated from this Kuickr chrome contract.
 * ========================================================================== */

:root,
[data-design-system="kuickr-v2"] {
  /* Type families */
  --kk-font-display: "Libre Baskerville", Georgia, serif;
  --kk-font-ui:      "Space Grotesk", system-ui, sans-serif;
  --kk-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Surfaces (back → front) */
  --kk-bg:        #ffffff;
  --kk-wash:      #eef2f5;
  --kk-paper:     #f8fafb;
  --kk-card:      #ffffff;
  --kk-fill:      #eef2f5;
  --kk-fill-soft: #f4f7f9;
  --kk-line:      #e6ecef;
  --kk-border:    #dbe3e8;

  /* Text */
  --kk-ink:        #12181f;
  --kk-text:       #25303a;
  --kk-text-soft:  #3a434c;
  --kk-muted:      #7c8791;
  --kk-muted-soft: #8f98a1;
  --kk-faint:      #a9b2ba;

  /* Brand — ink primary, ice orientation and focus */
  --kk-primary:         #12181f;
  --kk-on-primary:      #eef2f5;
  --kk-secondary:       #2f7fb0;
  --kk-secondary-hover: #3f8dc9;
  --kk-secondary-soft:  #dcedf5;
  --kk-on-secondary:    #ffffff;
  --kk-orientation:       var(--kk-secondary);
  --kk-orientation-hover: var(--kk-secondary-hover);

  /* Accent-as-text / on-accent — contrast-safe semantic roles (spec 35.3).
   * --kk-secondary above is an INDICATOR/orientation color (~4.4:1 ice on white —
   * do NOT use it for body text, eyebrows, key columns, or filled-button labels).
   * These roles give authors a name that can't fail contrast, AA-checked per theme.
   * Target ≥ 4.5:1 (normal text); verify with a checker before treating as final. */
  --kk-accent-text: #1c608e;  /* accent used AS TEXT on a light surface (~5.8:1 on white/card) */
  --kk-accent-fill: #23678f;  /* accent as a FILLED background, distinct from the indicator */
  --kk-on-accent:   #ffffff;  /* text sitting ON --kk-accent-fill (~5.5:1) */

  /* Semantic node / card types — reserve these hues for meaning */
  --kk-decision: #4b7bd7;
  --kk-blocker:  #d74b4b;
  --kk-question: #8b5cf6;
  --kk-idea:     #e8a53b;
  --kk-outcome:  #1f7a68;
  --kk-parked:   #66717b;

  /* Foregrounds for quick identity accents. Keep --kk-on-secondary's existing
   * brand-control contract separate from the identity use of that hue. */
  --kk-on-decision:           #0b0d0f;
  --kk-on-blocker:            #0b0d0f;
  --kk-on-question:           #0b0d0f;
  --kk-on-idea:               #15161a;
  --kk-on-outcome:            #ffffff;
  --kk-on-link:               #0b0d0f;
  --kk-on-identity-secondary: #0b0d0f;

  /* Visibility */
  --kk-private: #66717b;
  --kk-link:    #2f7fb0;
  --kk-public:  #1f7a68;

  /* Radii */
  --kk-r-xs:   4px;
  --kk-r-sm:   7px;
  --kk-r-md:   10px;
  --kk-r-lg:   14px;
  --kk-r-xl:   20px;
  --kk-r-pill: 999px;

  /* Spacing scale */
  --kk-s-1: 4px;
  --kk-s-2: 8px;
  --kk-s-3: 12px;
  --kk-s-4: 16px;
  --kk-s-5: 24px;
  --kk-s-6: 32px;
  --kk-s-7: 48px;
  --kk-s-8: 72px;

  /* Reading measure */
  --kk-read: 720px;

  /* Elevation */
  --kk-shadow-sm: 0 1px 2px rgba(18, 24, 31, .07);
  --kk-shadow-md: 0 6px 20px rgba(18, 24, 31, .09);
  --kk-shadow-lg: 0 24px 60px rgba(18, 24, 31, .16);

  /* Motion */
  --kk-t-fast:      120ms;
  --kk-t-base:      200ms;
  --kk-t-slow:      320ms;
  --kk-ease-out:    cubic-bezier(.4, 0, .2, 1);
  --kk-ease-settle: cubic-bezier(.16, 1, .3, 1);
}

[data-theme="dark"],
[data-design-system="kuickr-v2"][data-theme="dark"] {
  --kk-bg:        #121b24;
  --kk-wash:      #16212b;
  --kk-paper:     #18242e;
  --kk-card:      #1d2a35;
  --kk-fill:      #243441;
  --kk-fill-soft: #202f3b;
  --kk-line:      #2a3b49;
  --kk-border:    #314252;

  --kk-ink:        #eef2f5;
  --kk-text:       #eef2f5;
  --kk-text-soft:  #c3c9cf;
  --kk-muted:      #8f98a1;
  --kk-muted-soft: #74808a;
  --kk-faint:      #65717b;

  --kk-primary:         #eef2f5;
  --kk-on-primary:      #121b24;
  --kk-secondary:       #5aafe2;
  --kk-secondary-hover: #79c2eb;
  --kk-secondary-soft:  #203b4c;
  --kk-on-secondary:    #121b24;

  /* Accent-as-text / on-accent (dark) — bright ice reads on charcoal (spec 35.3) */
  --kk-accent-text: #5aafe2;  /* accent as text on a dark surface (~6.7:1 on card) */
  --kk-accent-fill: #5aafe2;  /* bright ice fill */
  --kk-on-accent:   #12181f;  /* ink on the bright fill (~8:1) */

  --kk-outcome: #5fd6c4;
  --kk-on-outcome: #15161a;
  --kk-on-identity-secondary: #15161a;
  --kk-private: #c3c9cf;
  --kk-public:  #5fd6c4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  [data-design-system="kuickr-v2"]:not([data-theme="light"]) {
    --kk-bg:        #121b24;
    --kk-wash:      #16212b;
    --kk-paper:     #18242e;
    --kk-card:      #1d2a35;
    --kk-fill:      #243441;
    --kk-fill-soft: #202f3b;
    --kk-line:      #2a3b49;
    --kk-border:    #314252;

    --kk-ink:        #eef2f5;
    --kk-text:       #eef2f5;
    --kk-text-soft:  #c3c9cf;
    --kk-muted:      #8f98a1;
    --kk-muted-soft: #74808a;
    --kk-faint:      #65717b;

    --kk-primary:         #eef2f5;
    --kk-on-primary:      #121b24;
    --kk-secondary:       #5aafe2;
    --kk-secondary-hover: #79c2eb;
    --kk-secondary-soft:  #203b4c;
    --kk-on-secondary:    #121b24;

    /* Accent-as-text / on-accent (dark) — bright ice reads on charcoal (spec 35.3) */
    --kk-accent-text: #5aafe2;  /* accent as text on a dark surface (~6.7:1 on card) */
    --kk-accent-fill: #5aafe2;  /* bright ice fill */
    --kk-on-accent:   #12181f;  /* ink on the bright fill (~8:1) */

    --kk-outcome: #5fd6c4;
    --kk-on-outcome: #15161a;
    --kk-on-identity-secondary: #15161a;
    --kk-private: #c3c9cf;
    --kk-public:  #5fd6c4;
  }
}

/* ============================================================================
 * Nodepad design tokens - scoped app/workspace snapshot
 * ----------------------------------------------------------------------------
 * Design-system library member: nodepad.
 *
 * Source CSS: InventList app/assets/stylesheets/nodepad_tokens.css.
 * Typography docs: InventList docs/design/TOKENS.md, DESIGN_PRINCIPLES.md,
 * DESIGN_SYSTEM.md, and INTERACTION_PATTERNS.md.
 *
 * Copied into Kuickr on 2026-06-29 so agents can select Nodepad separately
 * from the broader inventlist.com design-system reference. This token sheet is
 * scoped: apply class="np-tokens" to the page root before referencing these
 * variables in generated HTML.
 *
 * Refreshed 2026-07-21 (spec 35.3) to matte surfaces + Inter, retiring the
 * editorial serif to the immutable 23a1cbe5 snapshot.
 *
 * REALIGNED 2026-08-16 (spec 35.4, founder instruction) to the identity the
 * founder supplied when this feature was built: Geist, Geist Mono, Instrument
 * Serif as the accent face, warm paper #faf9f7, near-black ink #0e0d0b, and
 * amber #e8901a as the accent.
 *
 * This CLOSES A SPLIT, it does not open one. The nodepad app-shell adapter
 * (app/assets/stylesheets/design_systems/nodepad_shell.css) has always mapped
 * Geist + #faf9f7 + #0e0d0b + #e8901a into the --kk-* roles, so the chrome was
 * already wearing this identity while this sheet said Inter and focus-green.
 * A page authored on `nodepad` therefore did not match the chrome around it.
 * They now agree.
 *
 * WHAT DID NOT CHANGE: every token NAME (nothing referencing --np-* breaks), the
 * operator brand roles (--np-memory / --np-focus / --np-distill are semantic
 * operator colours, not the accent), the kind chips, and the sticky fills.
 * The retired snapshots 23a1cbe5 and d15c7c07 stay addressable.
 * ========================================================================== */

.np-tokens {
  /* Type families */
  --np-sans:    Geist, "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --np-display: Geist, "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --np-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  /* The accent face. 35.3 retired it; the founder's landing extraction keeps it,
     and the app-shell adapter always carried Geist — so the sheet was the odd
     one out, not the serif. Reserved for a short italic phrase, never body. */
  --np-accent-serif: "Instrument Serif", Georgia, serif;

  /* Type scale */
  --np-font-size-s: 13px;
  --np-font-size-m: 15px;
  --np-font-size-l: 17px;
  --np-font-size: var(--np-font-size-m);
  --np-font-size-title: 22px;
  --np-font-size-body: 15px;
  --np-font-size-meta: 11px;
  --np-font-size-kind: 10.5px;
  --np-font-size-ref: 11.5px;
  --np-line-height-title: 1.2;
  --np-line-height-body: 1.5;
  --np-line-height-meta: 1.2;

  /* Reading widths */
  --np-reading-narrow: 576px;
  --np-reading-wide: 768px;

  /* Surfaces */
  --np-bg:            #ffffff;
  --np-wash:          #faf9f7;
  --np-paper-runtime: #faf9f7;
  --np-paper-deep:    #f3f1ed;
  --np-paper-edge:    #e9e6e0;
  --np-rule-runtime:  #d9d3c7;

  /* Ink + text */
  --np-ink:          #0e0d0b;
  --np-ink-runtime:  #0e0d0b;
  --np-text:         #55504a;
  --np-ink-soft:     #3d3629;
  --np-muted:        #8c8578;
  --np-muted-soft:   #9d968b;
  --np-line:         #e9e6e0;
  --np-line-soft:    #efede8;
  --np-rule:         #0e0d0b;

  /* The accent. Amber is PUNCTUATION (rule 2): one element per view — a serif
     italic phrase, a callout rule, a terminal token. Never a large fill and
     never a button; primary actions are ink. --np-amber-text is the readable
     relative for links, --np-amber-ink for a mono label on an amber tint. */
  --np-amber:       #e8901a;
  --np-amber-text:  #875006;
  --np-amber-ink:   #9a6b0c;
  --np-highlight:      #fdf3d2;
  --np-highlight-line: #f5e3b4;

  /* Operator brand */
  --np-memory:  #7a1f1a;
  --np-focus:   #3a5a3f;
  --np-distill: #8a6a1f;
  --np-scratch: #847866;
  --np-queue:   #3a4f7a;

  --np-memory-soft:  color-mix(in srgb, var(--np-memory)  35%, #fff);
  --np-focus-soft:   color-mix(in srgb, var(--np-focus)   40%, #fff);
  --np-distill-soft: color-mix(in srgb, var(--np-distill) 45%, #fff);

  --operator-capture: var(--np-memory);
  --operator-focus:   var(--np-focus);
  --operator-distill: var(--np-distill);

  /* Kind chips */
  --kind-decision: #4b7bd7;
  --kind-blocker:  #d74b4b;
  --kind-question: #8b5cf6;
  --kind-idea:     #e8a53b;
  --kind-parked:   #6b7280;
  --kind-outcome:  #2fb36b;

  /* Sticky-note fills */
  --sticky-yellow: #fef5a8;
  --sticky-blue:   #d9e5ff;
  --sticky-pink:   #ffd9ea;
  --sticky-green:  #d1f0d6;
  --sticky-lilac:  #e2d9ff;

  /* Rhythm + radii */
  --r-1: 4px;  --r-2: 8px;  --r-3: 12px; --r-4: 16px;
  --r-5: 24px; --r-6: 32px; --r-7: 48px; --r-8: 72px;
  --r-base: 8px;
  --rad-1: 3px; --rad-2: 5px; --rad-3: 8px; --rad-4: 12px; --rad-pill: 999px;

  /* Motion */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);

  /* Local aliases used by Nodepad components. */
  --bg:         var(--np-bg);
  --wash:       var(--np-wash);
  --paper:      var(--np-paper-runtime);
  --paper-deep: var(--np-paper-deep);
  --paper-edge: var(--np-paper-edge);
  --rule-soft:  var(--np-rule-runtime);
  --ink:        var(--np-ink);
  --ink-runtime:var(--np-ink-runtime);
  --text:       var(--np-text);
  --ink-soft:   var(--np-ink-soft);
  --muted:      var(--np-muted);
  --muted-soft: var(--np-muted-soft);
  --line:       var(--np-line);
  --rule:       var(--np-rule);
  --memory:     var(--np-memory);
  --focus:      var(--np-focus);
  --distill:    var(--np-distill);
  --scratch:    var(--np-scratch);
  --queue:      var(--np-queue);
  --sans:       var(--np-sans);
  --display:    var(--np-display);
  --mono:       var(--np-mono);
  --font-size:  var(--np-font-size);
  --r1: var(--rad-2); --r2: var(--rad-3); --r3: var(--rad-4);

  --accent:      var(--np-amber);
  --accent-wash: color-mix(in srgb, var(--np-amber) 10%, transparent);

  /* Contrast-safe accent roles (spec 35.3). --accent and --np-theme-accent are
   * indicator/orientation colors — do NOT use them for body text or filled-
   * button labels. These two carry a name that can't fail contrast, AA-checked
   * per theme. Additive: they change no existing value.
   * accent-text = the accent as readable text on a surface (7.4:1 light paper,
   * 8.4:1 dark). on-accent = text on an accent fill, flipping ink and white. */
  --np-accent-text: #875006;  /* amber, darkened to carry text on paper — AA */
  --np-on-accent:   #ffffff;  /* text ON an accent fill — flips ink and white by theme */
}

.np-tokens[data-theme="light"],
[data-theme="light"] .np-tokens {
  --np-bg:            #ffffff;
  --np-wash:          #faf9f7;
  --np-paper-runtime: #faf9f7;
  --np-paper-deep:    #f3f1ed;
  --np-paper-edge:    #e9e6e0;
  --np-ink-runtime:   #0e0d0b;
  --np-text:          #55504a;
  --np-muted:         #8c8578;
  --np-accent-text:   #875006;
  --np-on-accent:     #ffffff;
}

.np-tokens[data-theme="dark"],
[data-theme="dark"] .np-tokens {
  --np-bg:            #0e0d0b;
  --np-wash:          #131110;
  --np-paper-runtime: #1a1816;
  --np-paper-deep:    #211e1a;
  --np-paper-edge:    #3a3833;
  --np-ink-runtime:   #faf9f7;
  --np-text:          #c9c3b6;
  --np-muted:         #8c8578;
  --np-accent-text:   #f0a742;  /* amber lifted to read on the ink ground */
  --np-on-accent:     #0e0d0b;  /* ink on the amber fill */
}

.np-tokens[data-density="compact"],
[data-density="compact"] .np-tokens {
  --r-base: 6px;
}

.np-tokens[data-density="comfortable"],
[data-density="comfortable"] .np-tokens {
  --r-base: 8px;
}

.np-tokens[data-density="cozy"],
[data-density="cozy"] .np-tokens {
  --r-base: 10px;
}

.np-tokens[data-font-size="s"],
[data-font-size="s"] .np-tokens {
  --np-font-size: var(--np-font-size-s);
}

.np-tokens[data-font-size="m"],
[data-font-size="m"] .np-tokens {
  --np-font-size: var(--np-font-size-m);
}

.np-tokens[data-font-size="l"],
[data-font-size="l"] .np-tokens {
  --np-font-size: var(--np-font-size-l);
}

:root                          { --np-theme-accent: #e8a53b; }
:root[data-accent="amber"]     { --np-theme-accent: #e8a53b; }
:root[data-accent="violet"]    { --np-theme-accent: #8b5cf6; }
:root[data-accent="memory"]    { --np-theme-accent: #7a1f1a; }
:root[data-accent="focus"]     { --np-theme-accent: #3a5a3f; }
:root[data-accent="distill"]   { --np-theme-accent: #8a6a1f; }
:root[data-accent="scratch"]   { --np-theme-accent: #847866; }
:root[data-accent="queue"]     { --np-theme-accent: #3a4f7a; }

/* Matte surface (spec 35.3): a solid wash, no ambient glow. The founder's
 * 2026-07-21 override retires the reference artifact's radial wash. */
.np-tokens.np-wash,
.np-tokens .np-wash {
  background: var(--np-wash);
}

/* Nodepad landing profile — audited from the live Nodepad marketing asset.
 * Source: https://nodepad.tools/assets/nodepad_landing-ca865b8d.css
 * Source SHA-256: df2ac65ac0d76a13974d430b4579468b9e5fd53cee2af2c369a3981f000abf77
 * Audited: 2026-09-03. Scope stays local; this file never injects :root values. */

.npl-tokens {
  /* Typography */
  --npl-sans: "Inter", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --npl-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --npl-font-size-display: clamp(54px, 8vw, 112px);
  --npl-font-size-section: clamp(38px, 5vw, 68px);
  --npl-font-size-card: 22px;
  --npl-font-size-body: 17px;
  --npl-font-size-small: 14px;
  --npl-font-size-eyebrow: 11px;
  --npl-font-size-meta: 13px;
  --npl-weight-display: 800;
  --npl-weight-section: 800;
  --npl-weight-body: 400;
  --npl-tracking-display: -0.045em;
  --npl-tracking-section: -0.035em;
  --npl-tracking-eyebrow: 0.14em;
  --npl-leading-display: 0.92;
  --npl-leading-body: 1.55;

  /* Core roles */
  --npl-ink: #141414;
  --npl-ink-soft: #57534E;
  --npl-ink-mute: #8A8780;
  --npl-rule: #E7E5E4;
  --npl-bg: #FBFAF8;
  --npl-white: #FFFFFF;
  --npl-accent: #D97706;
  --npl-accent-2: #B45309;

  /* Semantic feature tones */
  --npl-tone-resume: #FEF3C7;
  --npl-tone-markdown: #ECF1DF;
  --npl-tone-depth: #E6EEF6;
  --npl-tone-roles: #F3E9F7;
  --npl-tone-cli: #F0FDF4;

  /* Measured component materials */
  --npl-frame-bar: #F5F5F4;
  --npl-dot: #D7D3CC;
  --npl-dot-red: #E8836F;
  --npl-dot-yellow: #E5C661;
  --npl-dot-green: #93C18B;
  --npl-r-card: 12px;
  --npl-r-pill: 999px;
  --npl-shadow-card: 0 30px 60px -25px rgb(20 20 20 / 20%), 0 12px 24px -10px rgb(20 20 20 / 8%);
  --npl-read: 620px;
}

.npl-tone-resume { background: var(--npl-tone-resume); }
.npl-tone-markdown { background: var(--npl-tone-markdown); }
.npl-tone-depth { background: var(--npl-tone-depth); }
.npl-tone-roles { background: var(--npl-tone-roles); }
.npl-tone-cli { background: var(--npl-tone-cli); }

/* ============================================================================
 * Nodepad design tokens - scoped app/workspace snapshot
 * ----------------------------------------------------------------------------
 * Design-system library member: nodepad.
 *
 * Source CSS: InventList app/assets/stylesheets/nodepad_tokens.css.
 * Typography docs: InventList docs/design/TOKENS.md, DESIGN_PRINCIPLES.md,
 * DESIGN_SYSTEM.md, and INTERACTION_PATTERNS.md.
 *
 * Copied into Kuickr on 2026-06-29 so agents can select Nodepad separately
 * from the broader inventlist.com design-system reference. This token sheet is
 * scoped: apply class="np-tokens" to the page root before referencing these
 * variables in generated HTML.
 *
 * Refreshed 2026-07-21 (spec 35.3) to matte surfaces + Inter, retiring the
 * editorial serif to the immutable 23a1cbe5 snapshot.
 *
 * REALIGNED 2026-08-16 (spec 35.4, founder instruction) to the identity the
 * founder supplied when this feature was built: Geist, Geist Mono, Instrument
 * Serif as the accent face, warm paper #faf9f7, near-black ink #0e0d0b, and
 * amber #e8901a as the accent.
 *
 * This CLOSES A SPLIT, it does not open one. The nodepad app-shell adapter
 * (app/assets/stylesheets/design_systems/nodepad_shell.css) has always mapped
 * Geist + #faf9f7 + #0e0d0b + #e8901a into the --kk-* roles, so the chrome was
 * already wearing this identity while this sheet said Inter and focus-green.
 * A page authored on `nodepad` therefore did not match the chrome around it.
 * They now agree.
 *
 * WHAT DID NOT CHANGE: every token NAME (nothing referencing --np-* breaks), the
 * operator brand roles (--np-memory / --np-focus / --np-distill are semantic
 * operator colours, not the accent), the kind chips, and the sticky fills.
 * The retired snapshots 23a1cbe5 and d15c7c07 stay addressable.
 * ========================================================================== */

.np-tokens {
  /* Type families */
  --np-sans:    Geist, "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --np-display: Geist, "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --np-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  /* The accent face. 35.3 retired it; the founder's landing extraction keeps it,
     and the app-shell adapter always carried Geist — so the sheet was the odd
     one out, not the serif. Reserved for a short italic phrase, never body. */
  --np-accent-serif: "Instrument Serif", Georgia, serif;

  /* Type scale */
  --np-font-size-s: 13px;
  --np-font-size-m: 15px;
  --np-font-size-l: 17px;
  --np-font-size: var(--np-font-size-m);
  --np-font-size-title: 22px;
  --np-font-size-body: 15px;
  --np-font-size-meta: 11px;
  --np-font-size-kind: 10.5px;
  --np-font-size-ref: 11.5px;
  --np-line-height-title: 1.2;
  --np-line-height-body: 1.5;
  --np-line-height-meta: 1.2;

  /* Reading widths */
  --np-reading-narrow: 576px;
  --np-reading-wide: 768px;

  /* Surfaces */
  --np-bg:            #ffffff;
  --np-wash:          #faf9f7;
  --np-paper-runtime: #faf9f7;
  --np-paper-deep:    #f3f1ed;
  --np-paper-edge:    #e9e6e0;
  --np-rule-runtime:  #d9d3c7;

  /* Ink + text */
  --np-ink:          #0e0d0b;
  --np-ink-runtime:  #0e0d0b;
  --np-text:         #55504a;
  --np-ink-soft:     #3d3629;
  --np-muted:        #8c8578;
  --np-muted-soft:   #9d968b;
  --np-line:         #e9e6e0;
  --np-line-soft:    #efede8;
  --np-rule:         #0e0d0b;

  /* The accent. Amber is PUNCTUATION (rule 2): one element per view — a serif
     italic phrase, a callout rule, a terminal token. Never a large fill and
     never a button; primary actions are ink. --np-amber-text is the readable
     relative for links, --np-amber-ink for a mono label on an amber tint. */
  --np-amber:       #e8901a;
  --np-amber-text:  #875006;
  --np-amber-ink:   #9a6b0c;
  --np-highlight:      #fdf3d2;
  --np-highlight-line: #f5e3b4;

  /* Operator brand */
  --np-memory:  #7a1f1a;
  --np-focus:   #3a5a3f;
  --np-distill: #8a6a1f;
  --np-scratch: #847866;
  --np-queue:   #3a4f7a;

  --np-memory-soft:  color-mix(in srgb, var(--np-memory)  35%, #fff);
  --np-focus-soft:   color-mix(in srgb, var(--np-focus)   40%, #fff);
  --np-distill-soft: color-mix(in srgb, var(--np-distill) 45%, #fff);

  --operator-capture: var(--np-memory);
  --operator-focus:   var(--np-focus);
  --operator-distill: var(--np-distill);

  /* Kind chips */
  --kind-decision: #4b7bd7;
  --kind-blocker:  #d74b4b;
  --kind-question: #8b5cf6;
  --kind-idea:     #e8a53b;
  --kind-parked:   #6b7280;
  --kind-outcome:  #2fb36b;

  /* Sticky-note fills */
  --sticky-yellow: #fef5a8;
  --sticky-blue:   #d9e5ff;
  --sticky-pink:   #ffd9ea;
  --sticky-green:  #d1f0d6;
  --sticky-lilac:  #e2d9ff;

  /* Rhythm + radii */
  --r-1: 4px;  --r-2: 8px;  --r-3: 12px; --r-4: 16px;
  --r-5: 24px; --r-6: 32px; --r-7: 48px; --r-8: 72px;
  --r-base: 8px;
  --rad-1: 3px; --rad-2: 5px; --rad-3: 8px; --rad-4: 12px; --rad-pill: 999px;

  /* Motion */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);

  /* Local aliases used by Nodepad components. */
  --bg:         var(--np-bg);
  --wash:       var(--np-wash);
  --paper:      var(--np-paper-runtime);
  --paper-deep: var(--np-paper-deep);
  --paper-edge: var(--np-paper-edge);
  --rule-soft:  var(--np-rule-runtime);
  --ink:        var(--np-ink);
  --ink-runtime:var(--np-ink-runtime);
  --text:       var(--np-text);
  --ink-soft:   var(--np-ink-soft);
  --muted:      var(--np-muted);
  --muted-soft: var(--np-muted-soft);
  --line:       var(--np-line);
  --rule:       var(--np-rule);
  --memory:     var(--np-memory);
  --focus:      var(--np-focus);
  --distill:    var(--np-distill);
  --scratch:    var(--np-scratch);
  --queue:      var(--np-queue);
  --sans:       var(--np-sans);
  --display:    var(--np-display);
  --mono:       var(--np-mono);
  --font-size:  var(--np-font-size);
  --r1: var(--rad-2); --r2: var(--rad-3); --r3: var(--rad-4);

  --accent:      var(--np-amber);
  --accent-wash: color-mix(in srgb, var(--np-amber) 10%, transparent);

  /* Contrast-safe accent roles (spec 35.3). --accent and --np-theme-accent are
   * indicator/orientation colors — do NOT use them for body text or filled-
   * button labels. These two carry a name that can't fail contrast, AA-checked
   * per theme. Additive: they change no existing value.
   * accent-text = the accent as readable text on a surface (7.4:1 light paper,
   * 8.4:1 dark). on-accent = text on an accent fill, flipping ink and white. */
  --np-accent-text: #875006;  /* amber, darkened to carry text on paper — AA */
  --np-on-accent:   #ffffff;  /* text ON an accent fill — flips ink and white by theme */
}

.np-tokens[data-theme="light"],
[data-theme="light"] .np-tokens {
  --np-bg:            #ffffff;
  --np-wash:          #faf9f7;
  --np-paper-runtime: #faf9f7;
  --np-paper-deep:    #f3f1ed;
  --np-paper-edge:    #e9e6e0;
  --np-ink-runtime:   #0e0d0b;
  --np-text:          #55504a;
  --np-muted:         #8c8578;
  --np-accent-text:   #875006;
  --np-on-accent:     #ffffff;
}

.np-tokens[data-theme="dark"],
[data-theme="dark"] .np-tokens {
  --np-bg:            #0e0d0b;
  --np-wash:          #131110;
  --np-paper-runtime: #1a1816;
  --np-paper-deep:    #211e1a;
  --np-paper-edge:    #3a3833;
  --np-ink-runtime:   #faf9f7;
  --np-text:          #c9c3b6;
  --np-muted:         #8c8578;
  --np-accent-text:   #f0a742;  /* amber lifted to read on the ink ground */
  --np-on-accent:     #0e0d0b;  /* ink on the amber fill */
}

.np-tokens[data-density="compact"],
[data-density="compact"] .np-tokens {
  --r-base: 6px;
}

.np-tokens[data-density="comfortable"],
[data-density="comfortable"] .np-tokens {
  --r-base: 8px;
}

.np-tokens[data-density="cozy"],
[data-density="cozy"] .np-tokens {
  --r-base: 10px;
}

.np-tokens[data-font-size="s"],
[data-font-size="s"] .np-tokens {
  --np-font-size: var(--np-font-size-s);
}

.np-tokens[data-font-size="m"],
[data-font-size="m"] .np-tokens {
  --np-font-size: var(--np-font-size-m);
}

.np-tokens[data-font-size="l"],
[data-font-size="l"] .np-tokens {
  --np-font-size: var(--np-font-size-l);
}

:root                          { --np-theme-accent: #e8a53b; }
:root[data-accent="amber"]     { --np-theme-accent: #e8a53b; }
:root[data-accent="violet"]    { --np-theme-accent: #8b5cf6; }
:root[data-accent="memory"]    { --np-theme-accent: #7a1f1a; }
:root[data-accent="focus"]     { --np-theme-accent: #3a5a3f; }
:root[data-accent="distill"]   { --np-theme-accent: #8a6a1f; }
:root[data-accent="scratch"]   { --np-theme-accent: #847866; }
:root[data-accent="queue"]     { --np-theme-accent: #3a4f7a; }

/* Matte surface (spec 35.3): a solid wash, no ambient glow. The founder's
 * 2026-07-21 override retires the reference artifact's radial wash. */
.np-tokens.np-wash,
.np-tokens .np-wash {
  background: var(--np-wash);
}

/* InventList v22 Page profile — scoped public token snapshot. */

.inventlist-v22 {
  /* Ground and ink */
  --il-ink: #141414;
  --il-ink-soft: #57534E;
  --il-ink-muted: #8A8780;
  --il-bg: #FBFAF8;
  --il-paper: #FFFFFF;
  --il-rule: #E7E5E4;
  --il-rule-strong: #D6D3D1;

  /* Accent and states */
  --il-accent: #7C3AED;
  --il-accent-soft: #F4F0FB;
  --il-accent-deep: #6D28D9;
  --il-ok: #15803D;
  --il-ok-soft: #DCFCE7;
  --il-ok-line: #BBF7D0;
  --il-warn: #92400E;
  --il-warn-soft: #FEF3C7;
  --il-warn-line: #FED7AA;
  --il-bad: #991B1B;
  --il-bad-soft: #FEE2E2;
  --il-bad-line: #FECACA;

  /* Reusable role tones */
  --il-tone-ai: #F3E9F7;
  --il-tone-ai-ink: #6B21A8;
  --il-tone-client: #E6EEF6;
  --il-tone-client-ink: #1E40AF;
  --il-tone-server: #F8EFD6;
  --il-tone-server-ink: #92400E;
  --il-tone-data: #ECF1DF;
  --il-tone-data-ink: #3F6212;

  /* Type */
  --il-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --il-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --il-body-size: 14.5px;
  --il-body-leading: 1.55;
  --il-display-size: 44px;
  --il-display-leading: 0.92;
  --il-display-tracking: -0.045em;
  --il-eyebrow-size: 11px;
  --il-eyebrow-tracking: 0.14em;

  /* Rhythm and shape */
  --il-space-1: 4px;
  --il-space-2: 8px;
  --il-space-3: 12px;
  --il-space-4: 16px;
  --il-space-5: 20px;
  --il-space-6: 24px;
  --il-space-7: 32px;
  --il-space-8: 48px;
  --il-radius-code: 3px;
  --il-radius-meta: 4px;
  --il-radius-control: 8px;
  --il-radius-card: 12px;
  --il-radius-pill: 999px;

  /* Elevation and reading layout */
  --il-shadow-soft: 0 1px 2px rgba(20, 20, 20, 0.04);
  --il-shadow-card: 0 30px 60px -25px rgba(20, 20, 20, 0.20), 0 12px 24px -10px rgba(20, 20, 20, 0.08);
  --il-reading-width: 1000px;
  --il-page-inline: 24px;
  --il-page-block-start: 32px;
  --il-page-block-end: 80px;
}

@media (max-width: 620px) {
  .inventlist-v22 {
    --il-display-size: 32px;
    --il-page-inline: 16px;
    --il-page-block-start: 24px;
    --il-page-block-end: 60px;
  }
}

/* ============================================================================
 * NOCTURNE game design tokens - the `--gm-*` system
 * ----------------------------------------------------------------------------
 * Design-system library member: game.
 *
 * Source visual: docs/kuickr/plans/47-game-design-nocturne.html.
 * Temporary runtime source: app/assets/stylesheets/play.css while the play
 * shell is mid-flight. This file is the registry contract; future play-shell
 * CSS should consume these variables instead of redefining them locally.
 *
 * Scope: apply class="gm-tokens" to published game pages or the trusted play
 * shell before referencing these variables.
 * ========================================================================== */

.gm-tokens {
  /* Type families */
  --gm-font-display: "Libre Baskerville", Georgia, serif;
  --gm-font-ui:      "Space Grotesk", system-ui, sans-serif;
  --gm-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Realm surfaces */
  --gm-ink: #0c0b12;
  --gm-ink-2: #14121d;
  --gm-panel: rgba(20,18,28,.72);
  --gm-cream: #f3ecdc;
  --gm-muted: #8f8899;

  /* Living light */
  --gm-ember: #ff9a4a;
  --gm-gold: #e9c266;
  --gm-ice: #5fd6c4;
  --gm-glow: linear-gradient(135deg, #ff9a4a, #e9c266);
  --gm-line: rgba(233,194,102,.18);

  /* Instrument geometry */
  --gm-cut: 7px;
  --gm-cut-lg: 14px;
  --gm-bevel: polygon(var(--gm-cut) 0, 100% 0, 100% calc(100% - var(--gm-cut)), calc(100% - var(--gm-cut)) 100%, 0 100%, 0 var(--gm-cut));

  /* Motion */
  --gm-t-fast: 120ms;
  --gm-t-base: 200ms;
  --gm-t-slow: 320ms;
  --gm-ease-out: cubic-bezier(.4, 0, .2, 1);
  --gm-ease-settle: cubic-bezier(.16, 1, .3, 1);
}

/* ============================================================================
 * NOCTURNE game design tokens - the `--gm-*` system
 * ----------------------------------------------------------------------------
 * Design-system library member: game.
 *
 * Source visual: docs/kuickr/plans/47-game-design-nocturne.html.
 * Temporary runtime source: app/assets/stylesheets/play.css while the play
 * shell is mid-flight. This file is the registry contract; future play-shell
 * CSS should consume these variables instead of redefining them locally.
 *
 * Scope: apply class="gm-tokens" to published game pages or the trusted play
 * shell before referencing these variables.
 * ========================================================================== */

.gm-tokens {
  /* Type families */
  --gm-font-display: "Libre Baskerville", Georgia, serif;
  --gm-font-ui:      "Space Grotesk", system-ui, sans-serif;
  --gm-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Realm surfaces */
  --gm-ink: #0c0b12;
  --gm-ink-2: #14121d;
  --gm-panel: rgba(20,18,28,.72);
  --gm-cream: #f3ecdc;
  --gm-muted: #8f8899;

  /* Living light */
  --gm-ember: #ff9a4a;
  --gm-gold: #e9c266;
  --gm-ice: #5fd6c4;
  --gm-glow: linear-gradient(135deg, #ff9a4a, #e9c266);
  --gm-line: rgba(233,194,102,.18);

  /* Instrument geometry */
  --gm-cut: 7px;
  --gm-cut-lg: 14px;
  --gm-bevel: polygon(var(--gm-cut) 0, 100% 0, 100% calc(100% - var(--gm-cut)), calc(100% - var(--gm-cut)) 100%, 0 100%, 0 var(--gm-cut));

  /* Motion */
  --gm-t-fast: 120ms;
  --gm-t-base: 200ms;
  --gm-t-slow: 320ms;
  --gm-ease-out: cubic-bezier(.4, 0, .2, 1);
  --gm-ease-settle: cubic-bezier(.16, 1, .3, 1);
}