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 design tokens — the `--kk-*` system (deck-app redesign)
 * ----------------------------------------------------------------------------
 * Design-system library member: kuickr.
 *
 * Source of truth: extracted from docs/prototypes/deck-app/"Kuickr Design
 * Tokens.html" on 2026-06-23. Contract: Kuickr numbered design-system plan
 * docs.
 *
 * This SUPERSEDES the warm-paper `--k-*` vocabulary in
 * app/assets/stylesheets/kuickr.css. During the rebuild both may coexist; new
 * UI references `var(--kk-*)`. Never hard-code hex — reference a token.
 *
 * Light values live in :root; dark overrides apply via [data-theme="dark"]
 * (explicit toggle) — match the prototype, which uses an explicit toggle, not
 * prefers-color-scheme.
 * ========================================================================== */

:root {
  /* 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:      #faf7f2;
  --kk-paper:     #fcfcfb;
  --kk-card:      #ffffff;
  --kk-fill:      #f1f0ec;
  --kk-fill-soft: #f3f2ef;
  --kk-line:      #ece8e0;
  --kk-border:    #e4e3de;

  /* Text */
  --kk-ink:        #15161a;
  --kk-text:       #1f1f22;
  --kk-text-soft:  #3a3633;
  --kk-muted:      #6b7280;
  --kk-muted-soft: #9ca3af;
  --kk-faint:      #b8b5ad;

  /* Brand — ink primary, brass secondary */
  --kk-primary:         #15161a;
  --kk-on-primary:      #fafaf8;
  --kk-secondary:       #b58a2f;
  --kk-secondary-hover: #9c7626;
  --kk-secondary-soft:  #f3ead4;
  --kk-on-secondary:    #ffffff;

  /* Semantic node / card types */
  --kk-decision: #4b7bd7;
  --kk-blocker:  #d74b4b;
  --kk-question: #8b5cf6;
  --kk-idea:     #e8a53b;
  --kk-outcome:  #2fb36b;
  --kk-parked:   #6b7280;

  /* Visibility */
  --kk-private: #9a958c;
  --kk-link:    #8a6a1f;
  --kk-public:  #3a5a3f;

  /* 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(40, 34, 26, .07);
  --kk-shadow-md: 0 6px 20px rgba(40, 34, 26, .09);
  --kk-shadow-lg: 0 24px 60px rgba(40, 34, 26, .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"] {
  --kk-bg:        #0f0e0c;
  --kk-wash:      #141310;
  --kk-paper:     #1b1a16;
  --kk-card:      #1f1d19;
  --kk-fill:      #26241e;
  --kk-fill-soft: #211f1a;
  --kk-line:      #262320;
  --kk-border:    #2c2a25;

  --kk-ink:        #f4f1ea;
  --kk-text:       #e7e2d7;
  --kk-text-soft:  #c3bdb1;
  --kk-muted:      #9a958c;
  --kk-muted-soft: #7e7a72;
  --kk-faint:      #5f5b53;

  --kk-primary:         #f4f1ea;
  --kk-on-primary:      #15140f;
  --kk-secondary:       #caa047;
  --kk-secondary-hover: #d8b25e;
  --kk-secondary-soft:  #2e2716;
  --kk-on-secondary:    #15140f;
}

/* ============================================================================
 * inventlist.com design tokens — vendored reference snapshot
 * ----------------------------------------------------------------------------
 * Source: InventList docs/design/TOKENS.md.
 * Importable upstream mirror: InventList dev/assets/tokens.css.
 *
 * Copied into Kuickr on 2026-06-25 so the design-system library can expose
 * inventlist.com as a named selectable system beside Kuickr. Keep the existing
 * InventList token names (`--np-*`, `--kind-*`, `--operator-*`) intact; the
 * system name is inventlist.com, not a token-prefix rewrite.
 * ========================================================================== */

:root {
  /* ─── Surfaces (toned-down off-white track) ─────────────── */
  --np-bg:            #fff;
  --np-wash:          #f6f6f4;   /* page background */
  --np-paper-runtime: #fafaf8;   /* node / card paper */
  --np-paper-deep:    #f1f0ec;   /* secondary fills, footers */
  --np-paper-edge:    #e4e3de;   /* card borders */
  --np-rule-runtime:  #d6d4cd;   /* internal rules / dividers */

  /* Ink + text */
  --np-ink:          #0f0f10;    /* hardest ink (v2 ledger) */
  --np-ink-runtime:  #15161a;    /* runtime ink — slightly softer */
  --np-text:         #1f1f22;
  --np-ink-soft:     #3a3633;
  --np-muted:        #6b7280;
  --np-muted-soft:   #9ca3af;
  --np-line:         #ececea;
  --np-line-soft:    #f3f2ef;

  /* Heavy role rule (ledger v2) */
  --np-rule:         #1f1f22;

  /* ─── Operator brand (the runtime trio + 2) ─────────────── */
  --np-memory:  #7a1f1a;   /* oxblood   — Capture / Memory */
  --np-focus:   #3a5a3f;   /* forest    — Focus */
  --np-distill: #8a6a1f;   /* gold      — Distill / ★ */
  --np-scratch: #847866;   /* graphite  — ephemeral */
  --np-queue:   #3a4f7a;   /* steel     — queued-next */

  /* Soft variants — computed off the operator base */
  --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-state aliases */
  --operator-capture: var(--np-memory);
  --operator-focus:   var(--np-focus);
  --operator-distill: var(--np-distill);

  /* ─── Kind chips (semantic, decoupled from operator) ────── */
  --kind-decision: #4b7bd7;
  --kind-blocker:  #d74b4b;
  --kind-question: #8b5cf6;
  --kind-idea:     #e8a53b;
  --kind-parked:   #6b7280;
  --kind-outcome:  #2fb36b;

  /* ─── Stickies (notes only — never chips) ───────────────── */
  --sticky-yellow: #fef5a8;
  --sticky-blue:   #d9e5ff;
  --sticky-pink:   #ffd9ea;
  --sticky-green:  #d1f0d6;
  --sticky-lilac:  #e2d9ff;

  /* ─── Legacy compatibility (original v2 ledger block) ────
     Kept for shipping CSS that still references them. Prefer the
     operator brand and kind tokens above for new work. */
  --np-paper:   #f6f4ee;   /* deeper warm paper — original v2 ledger */
  --np-cyan:    #3bb5c9;
  --np-teal:    #2fb3a3;
  --np-purple:  #8b5cf6;
  --np-amber:   #e8a53b;
  --np-orange:  #ea6a3c;
  --np-red:     #d74b4b;
  --np-green:   #2fb36b;
  --np-blue:    #4b7bd7;
  --np-pink:    #e17cc0;
  --np-slate:   #6b7280;

  --kind-capture: var(--np-cyan);   /* legacy alias — use --np-memory  */
  --kind-focus:   var(--np-orange); /* legacy alias — use --np-focus   */

  /* ─── Type ──────────────────────────────────────────────── */
  --np-sans:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --np-display: "Instrument Serif", "Fraunces", Georgia, serif;
  --np-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ─── 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;
  --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);

  /* Doc accent (forest). */
  --accent:      var(--np-focus);
  --accent-wash: color-mix(in srgb, var(--np-focus) 8%, transparent);
}

[data-theme="dark"] {
  --np-wash:          #131211;
  --np-paper-runtime: #1a1917;
  --np-paper-deep:    #211f1c;
  --np-paper-edge:    #2b2925;
  --np-ink-runtime:   #f4f3ef;
  --np-text:          #ece8e0;
  --np-muted:         #9a958c;
}

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

:root {
  --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);
  --mono: var(--np-mono);
  --r1: var(--rad-2); --r2: var(--rad-3); --r3: var(--rad-4);
}

/* ============================================================================
 * 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);
}

/* ============================================================================
 * 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 design tokens — the marketing identity
 * ----------------------------------------------------------------------------
 * Design-system library member: nodepad-landing (spec 35.4).
 *
 * Source: the founder's extraction of nodepad.tools' LANDING page, supplied as
 * `Nodepad Design System.dc.html`. Every value below is copied verbatim from it;
 * nothing here is inferred, sampled or tuned.
 *
 * WHY THIS EXISTS AS ITS OWN MEMBER, not an edit to `nodepad`:
 * spec 35.3 refreshed the `nodepad` member to Nodepad's PRODUCT identity — Inter
 * across body and headings, matte surfaces, focus-green — on the strength of a
 * live browser inspection of nodepad.tools. That member is selectable as Kuickr
 * app chrome (`allowed_surfaces` includes kuickr_app), so re-pointing it would
 * restyle the signed-in application for everyone who picked Nodepad.
 *
 * But 35.3's type evidence disagrees with the founder's own extraction: the
 * landing runs **Geist**, not Inter, and keeps the Instrument Serif italic that
 * 35.3 retired to the frozen 23a1cbe5 snapshot. Both are true — a product UI and
 * a marketing site are allowed to differ — so the fix is to register the missing
 * one rather than overwrite the present one.
 *
 * Scoped: apply class="npl-tokens" to the page root. The `--npl-*` prefix keeps
 * it collision-free when a page loads the product tokens (`--np-*`) as well.
 *
 * THREE RULES OF USE ship with this system and are part of it, not commentary:
 *   1. Two grounds only — --npl-paper everywhere; --npl-ink is reserved for the
 *      one terminal moment per page. There is no third background.
 *   2. Amber is punctuation — one amber element per view: a serif italic phrase,
 *      a callout rule, or a terminal token. Never a large fill, never a button.
 *   3. Tints carry meaning — card tints distinguish categories, not decoration.
 *      Each tint pairs with its own hairline and its own mono label colour.
 * ========================================================================== */

.npl-tokens {
  /* Type families */
  --npl-sans:  Geist, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --npl-mono:  "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --npl-serif: "Instrument Serif", Georgia, serif;

  /* Type scale — display is Geist 800 at -0.035em / 0.94 */
  --npl-font-size-display: 64px;
  --npl-font-size-section: 34px;
  --npl-font-size-card:    22px;
  --npl-font-size-body:    17px;
  --npl-font-size-small:   14px;
  --npl-font-size-eyebrow: 12px;
  --npl-font-size-meta:    11px;
  --npl-weight-display: 800;
  --npl-weight-section: 700;
  --npl-weight-body:    400;
  --npl-tracking-display: -0.035em;
  --npl-tracking-section: -0.025em;
  --npl-tracking-card:    -0.02em;
  --npl-tracking-eyebrow:  0.14em;
  --npl-leading-display: 0.94;
  --npl-leading-body:    1.55;
  --npl-leading-card:    1.15;

  /* Core palette */
  --npl-paper:     #FAF9F7;  /* the ground, everywhere */
  --npl-surface:   #FFFFFF;  /* cards and panels on the ground */
  --npl-ink:       #0E0D0B;  /* near-black: text, and the ONE dark panel */
  --npl-amber:     #E8901A;  /* the accent — punctuation only */
  --npl-body:      #55504A;  /* body text */
  --npl-muted:     #8C8578;  /* labels, eyebrows, mono metadata */
  --npl-hairline:  #E9E6E0;  /* every rule and card border */
  --npl-highlight: #FDF3D2;  /* callout / quote wash */

  /* Amber's readable relatives — the accent itself is decoration, these carry text */
  --npl-amber-link: #D07C0F;  /* amber as a text link on paper */
  --npl-amber-ink:  #9A6B0C;  /* mono label colour on an amber tint */
  --npl-highlight-line: #F5E3B4;
  --npl-callout-ink: #3D3629;

  /* Card tints — each with its own hairline and label ink (rule 3) */
  --npl-tint-amber:      #FCEFC7;
  --npl-tint-amber-line: #F5E3B4;
  --npl-tint-amber-ink:  #9A6B0C;
  --npl-tint-blue:       #E8EDF7;
  --npl-tint-blue-line:  #DAE2F1;
  --npl-tint-blue-ink:   #3B5480;
  --npl-tint-violet:      #F4EAF8;
  --npl-tint-violet-line: #E7D9F0;
  --npl-tint-green:      #EAF4EC;
  --npl-tint-green-line: #D9EADD;
  --npl-tint-green-ink:  #3F6042;
  --npl-tint-sand:       #EFEFE4;
  --npl-tint-sand-line:  #E3E3D4;

  /* The terminal panel — the one place --npl-ink is a ground */
  --npl-term-dot:  #3A3833;
  --npl-term-dim:  #6E6A61;
  --npl-term-text: #C9C3B6;

  /* Controls — pill buttons; primary is INK, never amber (rule 2) */
  --npl-btn-line: #D9D3C7;
  --npl-r-btn:  999px;
  --npl-r-chip: 6px;
  --npl-r-sm:   8px;
  --npl-r-md:  10px;
  --npl-r-lg:  12px;
  --npl-r-xl:  14px;

  /* Reading width */
  --npl-read: 620px;
}

/* ============================================================================
 * 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;
}