/* Primitive → semantic → component. Derived from the supplied R10/R11 design research. */
:root {
  --black: #000; --gray-950: #0d0d0d; --gray-925: #111; --gray-900: #151515;
  --gray-850: #1a1a1a; --gray-800: #262626; --gray-700: #333;
  --gray-500: #777; --gray-400: #aaa; --white: #fff;
  --pink-500: #ff1eb4; --pink-300: #ff6cc2; --lime-300: #d2ff5e;
  --red-400: #ff8181; --blue-400: #81b4ff; --orange-400: #ffb379;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px;
  --font-ui: "Segoe UI", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
  --font-mono: "Cascadia Code", Consolas, monospace;
  --bg: var(--gray-950); --sidebar-bg: var(--gray-925); --surface: var(--gray-850);
  --surface-raised: var(--gray-800); --text: #f6f6f6; --muted: var(--gray-400);
  --subtle: #858585; --border: #ffffff12; --border-strong: #ffffff24;
  --accent: var(--pink-500); --accent-text: var(--pink-300); --success: var(--lime-300);
  --danger: var(--red-400); --focus: var(--pink-300);
  --button-bg: var(--accent); --button-fg: var(--black); --button-radius: var(--radius-pill);
  --input-bg: var(--gray-900); --card-bg: var(--surface); --card-radius: var(--radius-lg);
  --shadow-dialog: 0 28px 100px #0009; --sidebar-width: 208px;
  color-scheme: dark;
}