/* Shared colour tokens. A cool, low-chroma lab palette: neutral slate surfaces,
   one deep process-blue accent for actions and slider fills, and soft status
   tints whose text stays readable on top of them. */
:root {
  color-scheme: light;

  --canvas: oklch(92.5% 0.012 240);
  --surface: oklch(100% 0 0);
  --surface-sunken: oklch(96.2% 0.008 240);
  --border: oklch(89.5% 0.012 240);
  --border-strong: oklch(65% 0.02 240);

  --ink: oklch(24% 0.025 250);
  --ink-2: oklch(45% 0.025 250);
  --ink-3: oklch(55% 0.02 250);

  --accent: oklch(50% 0.13 245);
  --accent-hover: oklch(43% 0.13 245);
  --accent-soft: oklch(95% 0.03 245);
  --focus: oklch(60% 0.15 245);

  --ok-bg: oklch(94.5% 0.055 155);
  --ok-border: oklch(70% 0.12 155);
  --ok-ink: oklch(35% 0.08 155);
  --warn-bg: oklch(95.5% 0.075 90);
  --warn-border: oklch(78% 0.13 80);
  --warn-ink: oklch(40% 0.08 65);
  --bad-bg: oklch(94% 0.045 25);
  --bad-border: oklch(64% 0.17 25);
  --bad-ink: oklch(44% 0.15 25);

  --radius: 12px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px oklch(30% 0.03 250 / 0.06), 0 6px 18px oklch(30% 0.03 250 / 0.06);
}

::selection {
  background: oklch(88% 0.06 245);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

input,
select,
textarea {
  accent-color: var(--accent);
  caret-color: var(--accent);
}

/* Fields draw their focus ring inside the border so neighbouring rows
   can't clip it */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--focus) !important;
  box-shadow: inset 0 0 0 1px var(--focus);
}