/* ═══════════════════════════════════════════════════
   LAB PALETTE — CSS Custom Properties
   Light mode (default) + dark mode override
   ═══════════════════════════════════════════════════ */

:root {
  --paper:       #f6f5f1;
  --surface:     #ffffff;
  --panel:       #fafaf7;
  --panel2:      #f1efe9;
  --ink:         #0f1014;
  --ink2:        #3b3f47;
  --muted:       #7a7e87;
  --muted2:      #a9adb4;
  --line:        #e4e3dd;
  --line-soft:   #eeede7;
  --accent:      #2c3e8e;
  --accent-soft: #e9edfa;
  --accent-line: #bcc6e7;
  --ai:          #7c3aed;
  --ai-soft:     #f1ebfd;
  --good:        #4d7c47;
  --good-soft:   rgba(77,124,71,0.10);
  --mid:         #a07e1f;
  --mid-soft:    rgba(160,126,31,0.10);
  --bad:         #b04a3c;
  --bad-soft:    rgba(176,74,60,0.10);
  --primary-bg:  #0f1014;
  --primary-fg:  #ffffff;
  --on-fit:      #ffffff;
  --font-sans:   'Geist', 'Inter', system-ui, sans-serif;
  --font-mono:   'Geist Mono', ui-monospace, monospace;
}

[data-theme="dark"] {
  --paper:       #0d0e11;
  --surface:     #14161a;
  --panel:       #181a20;
  --panel2:      #1f222a;
  --ink:         #ededea;
  --ink2:        #c2c4ca;
  --muted:       #8b8f97;
  --muted2:      #5d6068;
  --line:        rgba(255,255,255,0.07);
  --line-soft:   rgba(255,255,255,0.04);
  --accent:      #7d97e8;
  --accent-soft: rgba(125,151,232,0.16);
  --accent-line: rgba(125,151,232,0.32);
  --ai:          #b388f7;
  --ai-soft:     rgba(179,136,247,0.14);
  --good:        #8cc578;
  --good-soft:   rgba(140,197,120,0.15);
  --mid:         #d4a83d;
  --mid-soft:    rgba(212,168,61,0.15);
  --bad:         #d96a52;
  --bad-soft:    rgba(217,106,82,0.15);
  --primary-bg:  #ededea;
  --primary-fg:  #0d0e11;
  --on-fit:      #0d0e11;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

html, body, #root {
  height: 100%;
  margin: 0;
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
}

/* ── Scrollbars — thin, unobtrusive ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); }
::-webkit-scrollbar-thumb:hover { background: var(--muted2); }

/* ── Range inputs — LAB style ── */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  height: 4px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 0;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: var(--surface);
  border: 2px solid var(--accent);
  margin-top: -5px;
  cursor: pointer;
}
input[type=range]::-moz-range-track {
  height: 4px;
  background: var(--line);
  border-radius: 0;
}
input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: var(--surface);
  border: 2px solid var(--accent);
}

/* ── iOS: ukryj strzałki spinner w input[type=number] ── */
input[type=number] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Tabular nums ── */
.tabular { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ── Mono labels (uppercase tracking) ── */
.lab-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}

/* ── Accent left-inset shadow — benchmark / selected card ── */
.inset-accent  { box-shadow: inset 3px 0 0 var(--accent); }
.inset-accent4 { box-shadow: inset 4px 0 0 var(--accent); }

/* ── AI glow ── */
.ai-glow {
  box-shadow: 0 0 0 1px var(--ai), 0 0 12px var(--ai-soft);
}

/* ── Editing inputs ── */
.edit-input {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--accent-line);
  color: var(--ink);
  text-align: center;
  padding: 2px 4px;
  outline: none;
  font-family: var(--font-mono);
  font-size: 13px;
  border-radius: 0;
}
.edit-input:focus { border-color: var(--accent); }

/* ── Custom shadow ── */
.custom-shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

/* ── Drag states ── */
.drag-ghost { opacity: 0.3; transform: scale(0.97); }
.drag-target { opacity: 0.5; }

/* ── Print-safe (no background, no shadows) ── */
@media print {
  body { background: white; color: black; }
  .no-print { display: none !important; }
}