Design systems

/* ============================================================================
 * 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.
 * ========================================================================== */

.np-tokens {
  /* Type families */
  --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;

  /* 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:            #fff;
  --np-wash:          #f6f6f4;
  --np-paper-runtime: #fafaf8;
  --np-paper-deep:    #f1f0ec;
  --np-paper-edge:    #e4e3de;
  --np-rule-runtime:  #d6d4cd;

  /* Ink + text */
  --np-ink:          #0f0f10;
  --np-ink-runtime:  #15161a;
  --np-text:         #1f1f22;
  --np-ink-soft:     #3a3633;
  --np-muted:        #6b7280;
  --np-muted-soft:   #9ca3af;
  --np-line:         #ececea;
  --np-line-soft:    #f3f2ef;
  --np-rule:         #1f1f22;

  /* 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)  12%, #fff);
  --np-focus-soft:   color-mix(in srgb, var(--np-focus)   12%, #fff);
  --np-distill-soft: color-mix(in srgb, var(--np-distill) 15%, #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-focus);
  --accent-wash: color-mix(in srgb, var(--np-focus) 8%, transparent);
}

.np-tokens[data-theme="light"],
[data-theme="light"] .np-tokens {
  --np-bg:            #fff;
  --np-wash:          #f6f6f4;
  --np-paper-runtime: #fafaf8;
  --np-paper-deep:    #f1f0ec;
  --np-paper-edge:    #e4e3de;
  --np-ink-runtime:   #15161a;
  --np-text:          #1f1f22;
  --np-muted:         #6b7280;
}

.np-tokens[data-theme="dark"],
[data-theme="dark"] .np-tokens {
  --np-bg:            #0f0f10;
  --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;
}

.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; }

.np-tokens.np-wash,
.np-tokens .np-wash {
  background:
    radial-gradient(ellipse 1100px 700px at 15% -10%, rgba(122, 31, 26, 0.035), transparent 60%),
    radial-gradient(ellipse 900px 600px at 95% 110%, rgba(58, 90, 63, 0.040), transparent 60%),
    radial-gradient(ellipse 700px 500px at 50% 50%, rgba(138, 106, 31, 0.022), transparent 70%),
    var(--np-wash);
  background-attachment: fixed;
}