/* ═══════════════════════════════════════════════════════════════════════════
   plancia-ui — tokens (GENERATED from tokens.json with `npm run tokens`: do
   not edit by hand). Dark "plancia" theme on :root; the light theme
   redefines the same color variables under [data-theme="light"]
   (the application decides when to put the attribute on the root element).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --p-bg: #070a12;
  --p-s1: #0d1220;
  --p-s2: #131a2b;
  --p-s3: #161e31;
  --p-inset: #0a0e18;
  --p-s1a: rgba(13, 18, 32, 0.92);
  --p-s3a: rgba(22, 30, 49, 0.94);
  --p-hover: rgba(148, 163, 184, 0.08);
  --p-border: #1f2a3d;
  --p-border-soft: rgba(148, 163, 184, 0.08);
  --p-border-strong: #2b3950;
  --p-text-hi: #eef2f9;
  --p-text: #c3cbdb;
  --p-text-dim: #8b95a8;
  --p-accent: #00c8ff;
  --p-accent-soft: rgba(0, 200, 255, 0.12);
  --p-accent-ink: #06202c;
  --p-ok: #34d399;
  --p-ok-soft: rgba(52, 211, 153, 0.14);
  --p-warn: #fbbf24;
  --p-warn-soft: rgba(251, 191, 36, 0.14);
  --p-yellow: #fde047;
  --p-yellow-soft: rgba(253, 224, 71, 0.14);
  --p-orange: #f97316;
  --p-orange-soft: rgba(249, 115, 22, 0.14);
  --p-danger: #f87171;
  --p-danger-soft: rgba(248, 113, 113, 0.14);
  --p-info: #38bdf8;
  --p-info-soft: rgba(56, 189, 248, 0.14);
  --p-neutral: #94a3b8;
  --p-neutral-soft: rgba(148, 163, 184, 0.12);
  --p-scale-0: #34d399;
  --p-scale-1: #fde047;
  --p-scale-2: #fbbf24;
  --p-scale-3: #f97316;
  --p-scale-4: #dc2626;
  --p-scale-5: #9f1239;
  --p-viz-1: #3e96ea;
  --p-viz-2: #d76797;
  --p-viz-3: #729513;
  --p-viz-4: #a17adf;
  --p-viz-5: #d67523;
  --p-viz-6: #16a7a3;
  --p-seq-1: #0e4f64;
  --p-seq-2: #006581;
  --p-seq-3: #0b7a9a;
  --p-seq-4: #1990b5;
  --p-seq-5: #26a7d0;
  --p-seq-6: #33beeb;
  --p-seq-7: #60d4fe;
  --p-div-1: #41c8f6;
  --p-div-2: #1aa1c9;
  --p-div-3: #0b7a9a;
  --p-div-4: #2b3950;
  --p-div-5: #b64340;
  --p-div-6: #df6862;
  --p-div-7: #fb9890;
  --p-accent-glow: 0 0 0 3px rgba(0, 200, 255, 0.18);
  --p-ok-glow: 0 0 8px rgba(52, 211, 153, 0.55);
  --p-warn-glow: 0 0 8px rgba(251, 191, 36, 0.5);
  --p-danger-glow: 0 0 8px rgba(248, 113, 113, 0.55);
  --p-sh1: 0 8px 24px rgba(0, 0, 0, 0.35);
  --p-sh2: 0 18px 48px rgba(0, 0, 0, 0.5);
  --p-font-ui: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --p-font-mono: 'JetBrains Mono', 'Consolas', monospace;
  --p-t11: 11px;
  --p-t12: 12px;
  --p-t13: 13px;
  --p-t14: 14px;
  --p-t16: 16px;
  --p-t20: 20px;
  --p-t28: 28px;
  --p-space-1: 4px;
  --p-space-2: 8px;
  --p-space-3: 12px;
  --p-space-4: 16px;
  --p-space-6: 24px;
  --p-space-8: 32px;
  --p-r1: 4px;
  --p-r2: 8px;
  --p-r3: 12px;
  --p-r-pill: 999px;
  --p-z-base: 0;
  --p-z-overlay: 10;
  --p-z-panel: 100;
  --p-z-popover: 200;
  --p-z-tooltip: 300;
  --p-z-modal: 400;
  --p-motion-fast: 120ms;
  --p-motion-base: 200ms;
  --p-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --p-row: 8px;
  --p-row-h: 32px;
  --p-focus: 0 0 0 2px var(--p-bg), 0 0 0 4px var(--p-accent);
  color-scheme: dark;
}

/* Density: the standard row is 32 px with 8 px padding; "comfortable" breathes */
[data-density="comfortable"] {
  --p-row: 12px;
  --p-row-h: 40px;
}

/* Light theme: same variable contract, different color values */
[data-theme="light"] {
  --p-bg: #e9edf3;
  --p-s1: #f4f6fa;
  --p-s2: #fbfcfe;
  --p-s3: #ffffff;
  --p-inset: #edf0f5;
  --p-s1a: rgba(244, 246, 250, 0.92);
  --p-s3a: rgba(255, 255, 255, 0.94);
  --p-hover: rgba(15, 23, 42, 0.06);
  --p-border: #d3d9e3;
  --p-border-soft: rgba(15, 23, 42, 0.08);
  --p-border-strong: #b6c0cf;
  --p-text-hi: #0b1220;
  --p-text: #2c3648;
  --p-text-dim: #5c6879;
  --p-accent: #0077b6;
  --p-accent-soft: rgba(0, 119, 182, 0.12);
  --p-accent-ink: #ffffff;
  --p-ok: #047857;
  --p-ok-soft: rgba(4, 120, 87, 0.12);
  --p-warn: #b45309;
  --p-warn-soft: rgba(180, 83, 9, 0.12);
  --p-yellow: #a16207;
  --p-yellow-soft: rgba(161, 98, 7, 0.12);
  --p-orange: #c2410c;
  --p-orange-soft: rgba(194, 65, 12, 0.12);
  --p-danger: #b91c1c;
  --p-danger-soft: rgba(185, 28, 28, 0.12);
  --p-info: #0369a1;
  --p-info-soft: rgba(3, 105, 161, 0.12);
  --p-neutral: #556274;
  --p-neutral-soft: rgba(85, 98, 116, 0.12);
  --p-scale-0: #047857;
  --p-scale-1: #a16207;
  --p-scale-2: #b45309;
  --p-scale-3: #c2410c;
  --p-scale-4: #b91c1c;
  --p-scale-5: #881337;
  --p-viz-1: #4697e4;
  --p-viz-2: #d36a96;
  --p-viz-3: #6d8e1c;
  --p-viz-4: #a07cdb;
  --p-viz-5: #d27830;
  --p-viz-6: #00a19d;
  --p-seq-1: #8edefe;
  --p-seq-2: #45cbf9;
  --p-seq-3: #22b5e1;
  --p-seq-4: #139ec6;
  --p-seq-5: #0087ab;
  --p-seq-6: #16708d;
  --p-seq-7: #0a5b74;
  --p-div-1: #0e4f64;
  --p-div-2: #007494;
  --p-div-3: #089ac3;
  --p-div-4: #d3d9e3;
  --p-div-5: #d8625c;
  --p-div-6: #af3c3a;
  --p-div-7: #861118;
  --p-accent-glow: 0 0 0 3px rgba(0, 119, 182, 0.18);
  --p-ok-glow: 0 0 6px rgba(4, 120, 87, 0.35);
  --p-warn-glow: 0 0 6px rgba(180, 83, 9, 0.35);
  --p-danger-glow: 0 0 6px rgba(185, 28, 28, 0.35);
  --p-sh1: 0 8px 24px rgba(15, 23, 42, 0.12);
  --p-sh2: 0 18px 48px rgba(15, 23, 42, 0.18);
  color-scheme: light;
}