:root,
.theme-light {
  --canvas: oklch(98.5% 0.003 285);
  --surface: oklch(100% 0 0);
  --surface-sunk: oklch(96.5% 0.005 285);
  --surface-raised: oklch(99.5% 0.002 285);

  --ink: oklch(22% 0.008 285);
  --ink-muted: oklch(48% 0.008 285);
  --ink-faint: oklch(68% 0.008 285);

  --line: oklch(91% 0.004 285);
  --line-strong: oklch(85% 0.005 285);

  --brand: oklch(48% 0.10 155);
  --brand-hover: oklch(54% 0.11 155);
  --brand-press: oklch(42% 0.09 155);
  --brand-ink: oklch(98% 0.01 150);
  --brand-soft: oklch(94% 0.035 155);
  --brand-ring: oklch(48% 0.10 155 / 0.35);

  /* Focus indicator — desaturated brand so the outline reads as
     "attention" without screaming. About 1/3 the chroma of --brand. */
  --focus: oklch(55% 0.035 155);

  /* Sidebar surface — slightly cooler/darker than canvas so the inset
     content area reads as "the page" and the sidebar reads as chrome. */
  --sidebar: oklch(96.5% 0.005 285);
  --sidebar-fg: oklch(22% 0.008 285);
  --sidebar-accent: oklch(92% 0.006 285);
  --sidebar-line: oklch(89% 0.005 285);

  --success: oklch(58% 0.12 145);
  --warn: oklch(70% 0.13 75);
  --danger: oklch(56% 0.18 25);

  /* Categorical chart palette — indexed via lib/chart-palette.ts
     (SSOT for cycling logic). Slot 1 is the brand hue so single-series
     charts and the first category always match the product accent;
     the rest walk the hue wheel at roughly matched lightness/chroma
     so no category visually dominates. Mirrors Hogly's seriesColor
     ordering (tint → blue → purple → orange → pink → cyan → red → amber). */
  --chart-1: var(--brand);
  --chart-2: oklch(55% 0.13 245);
  --chart-3: oklch(52% 0.14 300);
  --chart-4: oklch(62% 0.13 60);
  --chart-5: oklch(58% 0.15 355);
  --chart-6: oklch(58% 0.10 210);
  --chart-7: oklch(55% 0.16 25);
  --chart-8: oklch(66% 0.12 90);

  --shadow-tactile-sm:
    inset 0 1px 0 oklch(100% 0 0 / 0.5),
    0 1px 1px oklch(25% 0.01 285 / 0.02),
    0 2px 6px -1px oklch(25% 0.01 285 / 0.03);
  --shadow-tactile:
    inset 0 1px 0 oklch(100% 0 0 / 0.6),
    0 1px 2px oklch(25% 0.01 285 / 0.025),
    0 6px 20px -6px oklch(25% 0.01 285 / 0.05);
  --shadow-tactile-lg:
    inset 0 1px 0 oklch(100% 0 0 / 0.65),
    0 2px 4px oklch(25% 0.01 285 / 0.03),
    0 14px 36px -10px oklch(25% 0.01 285 / 0.07);
  --shadow-press: inset 0 2px 4px oklch(25% 0.01 285 / 0.05);
  --shadow-brand:
    inset 0 1px 0 oklch(100% 0 0 / 0.18),
    0 1px 2px oklch(20% 0.05 155 / 0.30),
    0 8px 20px -6px oklch(20% 0.05 155 / 0.30);
}
.theme-dark {
  --canvas: oklch(15% 0.008 285);
  --surface: oklch(19% 0.008 285);
  --surface-sunk: oklch(13% 0.007 285);
  --surface-raised: oklch(22% 0.009 285);

  --ink: oklch(96% 0.005 285);
  --ink-muted: oklch(72% 0.008 285);
  --ink-faint: oklch(50% 0.008 285);

  --line: oklch(28% 0.008 285);
  --line-strong: oklch(36% 0.010 285);

  --brand: oklch(70% 0.12 155);
  --brand-hover: oklch(76% 0.13 155);
  --brand-press: oklch(64% 0.11 155);
  --brand-ink: oklch(15% 0.02 155);
  --brand-soft: oklch(28% 0.06 155);
  --brand-ring: oklch(70% 0.12 155 / 0.4);
  --focus: oklch(72% 0.045 155);

  /* Sidebar surface — slightly lighter than canvas in dark mode so it
     reads as a raised chrome surface against the page. */
  --sidebar: oklch(18% 0.008 285);
  --sidebar-fg: oklch(96% 0.005 285);
  --sidebar-accent: oklch(24% 0.009 285);
  --sidebar-line: oklch(26% 0.008 285);

  --success: oklch(70% 0.13 145);
  --warn: oklch(78% 0.14 75);
  --danger: oklch(70% 0.17 25);

  /* Categorical chart palette — dark variants: same hues as light,
     lifted lightness so bars stay legible on sunk surfaces. */
  --chart-1: var(--brand);
  --chart-2: oklch(70% 0.12 245);
  --chart-3: oklch(70% 0.13 300);
  --chart-4: oklch(74% 0.13 60);
  --chart-5: oklch(72% 0.14 355);
  --chart-6: oklch(74% 0.10 210);
  --chart-7: oklch(68% 0.15 25);
  --chart-8: oklch(78% 0.12 90);

  --shadow-tactile-sm:
    inset 0 1px 0 oklch(100% 0 0 / 0.03),
    0 1px 1px oklch(0% 0 0 / 0.2),
    0 2px 6px -1px oklch(0% 0 0 / 0.15);
  --shadow-tactile:
    inset 0 1px 0 oklch(100% 0 0 / 0.04),
    0 1px 2px oklch(0% 0 0 / 0.22),
    0 6px 20px -6px oklch(0% 0 0 / 0.2);
  --shadow-tactile-lg:
    inset 0 1px 0 oklch(100% 0 0 / 0.05),
    0 2px 4px oklch(0% 0 0 / 0.25),
    0 14px 36px -10px oklch(0% 0 0 / 0.28);
  --shadow-press: inset 0 2px 4px oklch(0% 0 0 / 0.2);
  --shadow-brand:
    inset 0 1px 0 oklch(100% 0 0 / 0.10),
    0 1px 2px oklch(0% 0 0 / 0.5),
    0 8px 20px -6px oklch(40% 0.10 155 / 0.4);
}