/* Design tokens. Every colour, font, radius, shadow and motion value used by ui.css comes from here.
   Dark is the default (:root); light is :root[data-theme="light"]. Hue 255 neutral family.
   Rules (docs/html-ui.md 3.4): no colour with L >= 65% and C >= 0.20, no cream/ivory/beige surfaces,
   no coloured glow shadows, no gradient text. Dark values are tuned separately, not inverted from light. */
:root {
  color-scheme: dark;

  /* surfaces */
  --canvas: #1e1e1e;                            /* renderer clear colour: same in both themes */
  --paper: oklch(15.5% 0.006 255);
  --paper-2: oklch(19.6% 0.007 255);
  --paper-3: oklch(23.5% 0.008 255);
  --panel: oklch(19.6% 0.007 255 / 0.92);
  --panel-solid: oklch(19.6% 0.007 255);
  --line: oklch(34% 0.010 255);
  --line-soft: oklch(28% 0.009 255);
  --scrim: oklch(8% 0.005 255 / 0.62);

  /* text */
  --ink: oklch(94.5% 0.004 255);
  --muted: oklch(70% 0.010 255);
  --on-accent: oklch(15.5% 0.006 255);

  /* accent and states */
  --accent: oklch(69% 0.15 254);
  --accent-press: oklch(62% 0.15 254);
  --focus: oklch(69% 0.15 254);
  --danger: oklch(68% 0.14 25);
  --danger-bg: oklch(26% 0.05 25);
  --warn: oklch(76% 0.11 85);
  --warn-bg: oklch(27% 0.04 85);
  --ok: oklch(72% 0.11 160);

  /* gizmo axes (calm, not neon) */
  --axis-x: oklch(66% 0.14 25);
  --axis-y: oklch(68% 0.12 155);
  --axis-z: oklch(66% 0.14 254);
  --axis-ink: oklch(15.5% 0.006 255);

  /* type */
  --font-ui: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --lh: 1.45;
  --fw-regular: 400;
  --fw-medium: 560;
  --fw-bold: 680;

  /* shape and depth */
  --radius: 8px;
  --radius-panel: 12px;
  --radius-round: 999px;
  --shadow-panel: 0 6px 24px oklch(0% 0 0 / 0.38);
  --shadow-pop: 0 10px 32px oklch(0% 0 0 / 0.48);

  /* motion */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] {
  color-scheme: light;

  --paper: oklch(98.8% 0.003 255);
  --paper-2: oklch(96.2% 0.004 255);
  --paper-3: oklch(93.4% 0.005 255);
  --panel: oklch(98.8% 0.003 255 / 0.92);
  --panel-solid: oklch(98.8% 0.003 255);
  --line: oklch(84% 0.008 255);
  --line-soft: oklch(90% 0.006 255);
  --scrim: oklch(20% 0.01 255 / 0.4);

  --ink: oklch(17.5% 0.008 255);
  --muted: oklch(45% 0.012 255);
  --on-accent: oklch(98.8% 0.003 255);

  --accent: oklch(55% 0.19 254);
  --accent-press: oklch(49% 0.19 254);
  --focus: oklch(55% 0.19 254);
  --danger: oklch(52% 0.16 25);
  --danger-bg: oklch(95% 0.03 25);
  --warn: oklch(48% 0.10 70);
  --warn-bg: oklch(95% 0.03 80);
  --ok: oklch(48% 0.10 160);

  --axis-x: oklch(56% 0.16 25);
  --axis-y: oklch(55% 0.12 155);
  --axis-z: oklch(55% 0.17 254);
  --axis-ink: oklch(98.8% 0.003 255);

  --shadow-panel: 0 4px 18px oklch(20% 0.01 255 / 0.16);
  --shadow-pop: 0 8px 28px oklch(20% 0.01 255 / 0.22);
}