:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --content-max: 1180px;
  --sidebar-width: 272px;
  --sidebar-rail-width: 84px;
  --topbar-height: 64px;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root,
[data-theme-preference="light"],
[data-theme-preference="system"] {
  --bg: #f7f4f6;
  --surface: #fffdfd;
  --surface-raised: #ffffff;
  --text: #2f2930;
  --text-muted: #746b74;
  --border: #ddd4dc;
  --primary: #77536f;
  --primary-hover: #62445c;
  --primary-soft: #f0e7ee;
  --on-primary: #ffffff;
  --success: #26734d;
  --warning: #996515;
  --danger: #b42318;
  --on-danger: #ffffff;
  --info: #2f69a8;
  --focus: #77536f;
  --code-bg: #eef2f8;
  --code-text: #24324a;
  --shadow: 0 8px 22px rgba(69, 49, 64, 0.07);
  color-scheme: light;
}

[data-theme-preference="dark"] {
  --bg: #1d1916;
  --surface: #27211c;
  --surface-raised: #302720;
  --text: #f3eadf;
  --text-muted: #c2b3a2;
  --border: #4b3b2f;
  --primary: #d39a45;
  --primary-hover: #e2ad5b;
  --primary-soft: #3b2d20;
  --on-primary: #1d1916;
  --success: #86c9a5;
  --warning: #f2cf77;
  --danger: #ef9389;
  --on-danger: #1d1916;
  --info: #9bbfe8;
  --focus: #e1aa57;
  --code-bg: #181411;
  --code-text: #eadfce;
  --shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  [data-theme-preference="system"] {
    --bg: #1d1916;
    --surface: #27211c;
    --surface-raised: #302720;
    --text: #f3eadf;
    --text-muted: #c2b3a2;
    --border: #4b3b2f;
    --primary: #d39a45;
    --primary-hover: #e2ad5b;
    --primary-soft: #3b2d20;
    --on-primary: #1d1916;
    --success: #86c9a5;
    --warning: #f2cf77;
    --danger: #ef9389;
    --on-danger: #1d1916;
    --info: #9bbfe8;
    --focus: #e1aa57;
    --code-bg: #181411;
    --code-text: #eadfce;
    --shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    color-scheme: dark;
  }
}