/* GENERATED by `node tools/tokens.mjs` from design/tokens.json — do not edit by hand. */
/*
 * Consume the semantic tier (--c-*) and the scales (--sp-*, --tx-*). The primitives
 * (--p-*) are published for the token gallery only: name a primitive in a component and
 * the next theme cannot move it.
 *
 * `--dot` is the unit. Every length is a whole number of dots, so setting --dot to 3px
 * previews a 150% screen exactly the way `Metrics::at` would.
 */
:root {
  --dot: 2px;
  --text-grid: 16px;

  /* primitives — the gallery's, not yours */
  --p-navy-100: #dfe6f3;
  --p-navy-200: #8d9ab3;
  --p-navy-300: #55617a;
  --p-navy-400: #3a4a6b;
  --p-navy-500: #2a3448;
  --p-navy-600: #232c40;
  --p-navy-700: #1a2030;
  --p-navy-800: #111623;
  --p-navy-900: #0d111c;
  --p-parchment-100: #faf2df;
  --p-parchment-200: #f0e4c4;
  --p-parchment-300: #e2d3ac;
  --p-parchment-400: #cfbd91;
  --p-parchment-500: #b9a679;
  --p-parchment-600: #93826a;
  --p-parchment-700: #8a7448;
  --p-parchment-800: #6d5c45;
  --p-parchment-900: #3b2f21;
  --p-gold-400: #e8cf8a;
  --p-gold-500: #c6a35a;
  --p-gold-600: #9a7524;
  --p-gold-700: #7d5c17;
  --p-leaf-400: #48bb78;
  --p-leaf-500: #4a6b33;
  --p-leaf-600: #3c5729;
  --p-sky-400: #8ecae6;
  --p-sky-500: #3f5d78;
  --p-sky-600: #33506a;
  --p-rust-400: #ff6b6b;
  --p-rust-500: #8f3a2e;
  --p-rust-600: #7a3025;
  --p-stone-300: #a89d8a;
  --p-stone-400: #8b97a8;
  --p-stone-500: #8a7963;
  --p-stone-600: #4a5568;
  --p-shadow-desk-dark: rgba(4, 6, 10, .55);
  --p-shadow-desk-paper: rgba(24, 18, 10, .62);
  --p-shadow-lift-dark: rgba(0, 0, 0, .55);
  --p-shadow-lift-paper: rgba(59, 47, 33, .28);
  --p-shadow-ink-dark08: rgba(255, 255, 255, .08);
  --p-shadow-ink-dark04: rgba(255, 255, 255, .04);
  --p-shadow-ink-paper16: rgba(59, 47, 33, .16);
  --p-shadow-ink-paper09: rgba(59, 47, 33, .09);

  /* space — counted in dots */
  --sp-0: calc(var(--dot) * 0);
  --sp-1: calc(var(--dot) * 1);
  --sp-2: calc(var(--dot) * 2);
  --sp-3: calc(var(--dot) * 3);
  --sp-4: calc(var(--dot) * 4);
  --sp-6: calc(var(--dot) * 6);
  --sp-8: calc(var(--dot) * 8);
  --sp-10: calc(var(--dot) * 10);
  --sp-12: calc(var(--dot) * 12);
  --sp-16: calc(var(--dot) * 16);
  --sp-24: calc(var(--dot) * 24);

  /* text — whole layers of the dot font, nothing in between */
  --tx-layer1: calc(var(--text-grid) * 1);
  --tx-layer2: calc(var(--text-grid) * 2);
  --ln-hair: 1px;
  --ln-double: 2px;

  /* component — only what differs from the scale */
  --k-panel-pad-x: calc(var(--dot) * 12);
  --k-panel-pad-y: calc(var(--dot) * 12);
  --k-panel-gold-inset: calc(var(--dot) * 3);
  --k-panel-corner-inset: calc(var(--dot) * 4);
  --k-panel-corner: calc(var(--dot) * 8);
  --k-panel-bar: calc(var(--dot) * 2);
  --k-panel-lift: calc(var(--dot) * 2);
  --k-section-pad-x: calc(var(--dot) * 6);
  --k-section-pad-y: calc(var(--dot) * 4);
  --k-section-gap: calc(var(--dot) * 8);
  --k-section-head-gap: calc(var(--dot) * 4);
  --k-section-row-gap: calc(var(--dot) * 4);
  --k-control-pad-x: calc(var(--dot) * 4);
  --k-control-pad-y: calc(var(--dot) * 2);
  --k-control-box-size: calc(var(--dot) * 6);
  --k-control-box-gap: calc(var(--dot) * 3);
  --k-control-arrow: calc(var(--dot) * 4);
  --k-control-pip: calc(var(--dot) * 3);
  --k-control-info: calc(var(--dot) * 8);
  --k-nav-pad-x: calc(var(--dot) * 3);
  --k-nav-pad-y: calc(var(--dot) * 6);
  --k-nav-row-pad-y: calc(var(--dot) * 3);
  --k-nav-gap: calc(var(--dot) * 2);
  --k-nav-mark-gap: calc(var(--dot) * 4);
  --k-tab-pad-x: calc(var(--dot) * 6);
  --k-tab-pad-b: calc(var(--dot) * 3);
  --k-tab-gap: calc(var(--dot) * 1);
  --k-tab-rise-on: calc(var(--dot) * 3);
  --k-tab-rise-off: calc(var(--dot) * 4);
  --k-tab-max-w: calc(var(--dot) * 84);
  --k-tab-dot: calc(var(--dot) * 3);
  --k-bubble-pad-x: calc(var(--dot) * 4);
  --k-bubble-pad-y: calc(var(--dot) * 3);
  --k-bubble-tail: calc(var(--dot) * 3);
  --k-bubble-lift: calc(var(--dot) * 2);
  --k-bubble-cols: calc(var(--dot) * 14);
  --k-bubble-lines: calc(var(--dot) * 3);
  --k-cell-canvas: calc(var(--dot) * 40);
  --k-cell-gap: calc(var(--dot) * 4);
  --k-cell-trail-step: calc(var(--dot) * 17);
}

/* The original look - light text on dark navy, one gold rim. The default. */
:root, [data-theme="dark"] {
  --c-surface-deep: #0d111c;
  --c-surface-base: #1a2030;
  --c-surface-raised: #232c40;
  --c-surface-sunken: rgba(255, 255, 255, .04);
  --c-surface-sunken-deep: rgba(255, 255, 255, .08);
  --c-surface-desk: rgba(4, 6, 10, .55);
  --c-text-body: #dfe6f3;
  --c-text-soft: #8d9ab3;
  --c-text-faint: #55617a;
  --c-text-on-accent: #0d111c;
  --c-edge-outer: #3a4a6b;
  --c-edge-inner: #2a3448;
  --c-edge-accent: #c6a35a;
  --c-accent: #c6a35a;
  --c-accent-hi: #e8cf8a;
  --c-danger: #ff6b6b;
  --c-state-working: #48bb78;
  --c-state-thinking: #8ecae6;
  --c-state-blocked: #ff6b6b;
  --c-state-idle: #8b97a8;
  --c-state-unhooked: #4a5568;
  --c-shadow-lift: rgba(0, 0, 0, .55);
  --c-shadow-sunk: rgba(255, 255, 255, .08);
}

/* Old paper and ink. The ink is a faded brown, never pure black - black reads as a screen, not print. */
[data-theme="paper"] {
  --c-surface-deep: #cfbd91;
  --c-surface-base: #e2d3ac;
  --c-surface-raised: #f0e4c4;
  --c-surface-sunken: rgba(59, 47, 33, .09);
  --c-surface-sunken-deep: rgba(59, 47, 33, .16);
  --c-surface-desk: rgba(24, 18, 10, .62);
  --c-text-body: #3b2f21;
  --c-text-soft: #6d5c45;
  --c-text-faint: #93826a;
  --c-text-on-accent: #faf2df;
  --c-edge-outer: #8a7448;
  --c-edge-inner: #b9a679;
  --c-edge-accent: #9a7524;
  --c-accent: #9a7524;
  --c-accent-hi: #c6a35a;
  --c-danger: #8f3a2e;
  --c-state-working: #4a6b33;
  --c-state-thinking: #3f5d78;
  --c-state-blocked: #8f3a2e;
  --c-state-idle: #8a7963;
  --c-state-unhooked: #a89d8a;
  --c-shadow-lift: rgba(59, 47, 33, .28);
  --c-shadow-sunk: rgba(59, 47, 33, .16);
}