:root {
  --accent: oklch(0.62 0.19 255);
  --accent-fg: oklch(0.99 0 0);
  --accent-soft: oklch(0.62 0.19 255 / 0.10);

  --bg: oklch(0.985 0 0);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.965 0 0);
  --fg: oklch(0.20 0 0);
  --fg-strong: oklch(0.10 0 0);
  --muted: oklch(0.50 0 0);
  --border: oklch(0.90 0 0);
  --border-strong: oklch(0.78 0 0);

  --link: var(--accent);
  --link-hover: oklch(0.50 0.20 255);
  --selection-bg: oklch(0.62 0.19 255 / 0.25);

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs--1: clamp(0.82rem, 0.78rem + 0.18vw, 0.92rem);
  --fs-0: clamp(0.97rem, 0.93rem + 0.22vw, 1.06rem);
  --fs-1: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
  --fs-2: clamp(1.45rem, 1.25rem + 0.95vw, 1.95rem);
  --fs-3: clamp(1.85rem, 1.45rem + 1.80vw, 2.55rem);

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  --content-max: 72rem;
  --note-sidebar-width: 16rem;
  --header-height: 3.5rem;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;
  --transition: 150ms ease;
  --shadow-sm: 0 2px 4px oklch(0 0 0 / 0.06);
  --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.10), 0 4px 12px oklch(0 0 0 / 0.05);
  --card-cover-vignette: linear-gradient(to top, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0) 55%);
}

[data-theme="dark"] {
  --accent: oklch(0.74 0.15 255);
  --accent-fg: oklch(0.14 0.005 255);
  --accent-soft: oklch(0.74 0.15 255 / 0.16);

  --bg: oklch(0.215 0.002 245);
  --surface: oklch(0.255 0.002 245);
  --surface-2: oklch(0.295 0.002 245);
  --fg: oklch(0.90 0.002 245);
  --fg-strong: oklch(0.95 0.002 245);
  --muted: oklch(0.66 0.003 245);
  --border: oklch(0.34 0.002 245);
  --border-strong: oklch(0.46 0.002 245);

  --link: var(--accent);
  --link-hover: oklch(0.84 0.12 255);
  --selection-bg: oklch(0.74 0.15 255 / 0.32);
  --shadow-sm: 0 2px 4px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.55), 0 4px 12px oklch(0 0 0 / 0.30);
  --card-cover-vignette: linear-gradient(to top, rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0) 55%);
}