/* ============================================================
   openclawclinic — design tokens
   Calm clinical instrument. Light + dark, both first-class.
   color = signal, never decoration.
   ============================================================ */

/* ---- LIGHT (default) ------------------------------------- */
:root,
[data-theme="light"] {
  /* surfaces — warm, very low chroma off-whites */
  --bg:          oklch(0.971 0.004 95);
  --bg-sunken:   oklch(0.955 0.005 95);
  --surface:     oklch(0.995 0.002 95);
  --surface-2:   oklch(0.962 0.004 95);
  --surface-raised: oklch(1 0 0);

  /* hairlines */
  --line:        oklch(0.905 0.005 95);
  --line-strong: oklch(0.845 0.006 95);

  /* ink */
  --ink:    oklch(0.27 0.012 80);
  --ink-2:  oklch(0.455 0.010 80);
  --ink-3:  oklch(0.605 0.008 85);
  --ink-4:  oklch(0.715 0.006 85);

  /* status accents — share L & C, vary hue (driven by hue vars). used sparingly. */
  --good:        oklch(0.585 0.052 var(--good-h));
  --good-ink:    oklch(0.46 0.055 var(--good-h));
  --good-soft:   oklch(0.585 0.052 var(--good-h) / 0.13);
  --good-line:   oklch(0.585 0.052 var(--good-h) / 0.32);

  --attn:        oklch(0.565 0.061 var(--attn-h));
  --attn-ink:    oklch(0.47 0.065 var(--attn-h));
  --attn-soft:   oklch(0.565 0.061 var(--attn-h) / 0.13);
  --attn-line:   oklch(0.565 0.061 var(--attn-h) / 0.34);

  /* acute = strongest treatment of the attention hue */
  --acute:       oklch(0.515 0.085 var(--acute-h));
  --acute-ink:   oklch(0.46 0.09 var(--acute-h));
  --acute-soft:  oklch(0.515 0.085 var(--acute-h) / 0.11);
  --acute-line:  oklch(0.515 0.085 var(--acute-h) / 0.32);

  /* chart system — baseline band is neutral, dot carries status */
  --c-line:     oklch(0.5 0.01 85);
  --c-baseline: oklch(0.62 0.008 85);
  --c-band:     oklch(0.6 0.008 85 / 0.11);
  --c-band-line:oklch(0.6 0.008 85 / 0.28);
  --c-grid:     oklch(0.9 0.005 95);
  --c-axis:     oklch(0.7 0.006 85);
  --c-threshold:oklch(0.55 0.07 352 / 0.6);
  --c-ghost:    oklch(0.7 0.008 85 / 0.5);

  --shadow-frame: 0 1px 2px oklch(0.2 0.02 80 / 0.04), 0 12px 40px oklch(0.2 0.02 80 / 0.10);
  --shadow-card:  0 1px 0 oklch(0.2 0.02 80 / 0.02);
  --hatch:        oklch(0.6 0.008 85 / 0.10);
}

/* ---- DARK ------------------------------------------------- */
[data-theme="dark"] {
  --bg:          oklch(0.176 0.005 255);
  --bg-sunken:   oklch(0.148 0.005 255);
  --surface:     oklch(0.214 0.006 255);
  --surface-2:   oklch(0.252 0.006 255);
  --surface-raised: oklch(0.236 0.007 255);

  --line:        oklch(0.298 0.007 255);
  --line-strong: oklch(0.378 0.009 255);

  --ink:    oklch(0.935 0.004 250);
  --ink-2:  oklch(0.735 0.006 250);
  --ink-3:  oklch(0.575 0.007 250);
  --ink-4:  oklch(0.47 0.007 250);

  --good:        oklch(0.735 0.058 var(--good-h));
  --good-ink:    oklch(0.79 0.06 var(--good-h));
  --good-soft:   oklch(0.735 0.058 var(--good-h) / 0.15);
  --good-line:   oklch(0.735 0.058 var(--good-h) / 0.36);

  --attn:        oklch(0.715 0.072 var(--attn-h));
  --attn-ink:    oklch(0.775 0.075 var(--attn-h));
  --attn-soft:   oklch(0.715 0.072 var(--attn-h) / 0.16);
  --attn-line:   oklch(0.715 0.072 var(--attn-h) / 0.38);

  --acute:       oklch(0.665 0.095 var(--acute-h));
  --acute-ink:   oklch(0.74 0.10 var(--acute-h));
  --acute-soft:  oklch(0.665 0.095 var(--acute-h) / 0.15);
  --acute-line:  oklch(0.665 0.095 var(--acute-h) / 0.36);

  --c-line:     oklch(0.78 0.01 250);
  --c-baseline: oklch(0.6 0.008 250);
  --c-band:     oklch(0.72 0.008 250 / 0.13);
  --c-band-line:oklch(0.72 0.008 250 / 0.26);
  --c-grid:     oklch(0.3 0.007 255);
  --c-axis:     oklch(0.5 0.007 250);
  --c-threshold:oklch(0.72 0.08 352 / 0.6);
  --c-ghost:    oklch(0.6 0.008 250 / 0.5);

  --shadow-frame: 0 1px 2px oklch(0 0 0 / 0.3), 0 18px 50px oklch(0 0 0 / 0.5);
  --shadow-card:  none;
  --hatch:        oklch(0.7 0.008 250 / 0.10);
}

/* ---- fonts + scale --------------------------------------- */
:root {
  --font-ui:   'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* status hues — overridable by the accent-palette tweak */
  --good-h: 132;
  --attn-h: 352;
  --acute-h: 18;

  --r-xs: 5px;
  --r-sm: 7px;
  --r:    11px;
  --r-lg: 15px;
  --r-xl: 22px;

  --ease: cubic-bezier(0.4, 0.1, 0.2, 1);
}

/* ---- base ------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* monospace instrument label — small, tracked, uppercase */
.mono-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-feature-settings: "tnum" 1;
}

/* tabular numeric readout */
.num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.01em;
}

/* big hero readout */
.readout {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }

button { font-family: inherit; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}