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