:root {
  --font-heading: "Montserrat", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --header-surface: #ffffff;
  --header-ink: #174483;
  --header-border: #dfe4eb;
  --header-field-muted: #f4f6f9;
  --heading-color: #174483;
  --link-color: #3794ce;
  --accent: #3794ce;
  --accent-hover: #2a7fb3;
  --accent-soft: #e9f4fb;
  --focus-ring: #3794ce;
  --ink: #19212b;
  --muted: #5f6b7a;
  --subtle: #8490a0;
  --canvas: #fbfcfe;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #f4f6f9;
  --border: #dfe4eb;
  --border-strong: #c4ccd7;
  --success: #18794e;
  --success-bg: #eaf7f0;
  --info: #155e95;
  --info-bg: #eaf4fb;
  --warning: #8a5700;
  --warning-bg: #fff7df;
  --critical: #a72b2b;
  --critical-bg: #fff0f0;
  --code-bg: #202838;
  --code-ink: #eff3fa;
  --shadow-sm: 0 1px 2px rgba(24, 34, 48, 0.06);
  --shadow-md: 0 10px 32px rgba(24, 34, 48, 0.09);
  --radius-sm: 0.4rem;
  --radius-md: 0.7rem;
  --radius-lg: 1rem;
  --content-max: 1400px;
  --page-gutter: 1.25rem;
  --reading-max: 48rem;
  --header-height: 4.6rem;
  --sidebar-width: 17rem;
  --toc-width: 13rem;
  --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;
  --space-12: 3rem;
}

:root[data-theme="dark"] {
  --heading-color: #dcecff;
  --link-color: #70bce7;
  --accent: #3794ce;
  --accent-hover: #70bce7;
  --focus-ring: #70bce7;
  --ink: #f1f4f8;
  --muted: #bac4d1;
  --subtle: #93a0af;
  --canvas: #12161c;
  --surface: #1a2028;
  --surface-raised: #202833;
  --surface-muted: #242d38;
  --border: #354151;
  --border-strong: #4a5768;
  --accent-soft: #173a55;
  --success: #75d2a3;
  --success-bg: #153c2b;
  --info: #7fc3ee;
  --info-bg: #15344b;
  --warning: #f1c86f;
  --warning-bg: #493712;
  --critical: #f19b9b;
  --critical-bg: #4b2020;
  --code-bg: #0c1016;
  --code-ink: #f4f7fb;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --heading-color: #dcecff;
    --link-color: #70bce7;
    --accent: #3794ce;
    --accent-hover: #70bce7;
    --focus-ring: #70bce7;
    --ink: #f1f4f8;
    --muted: #bac4d1;
    --subtle: #93a0af;
    --canvas: #12161c;
    --surface: #1a2028;
    --surface-raised: #202833;
    --surface-muted: #242d38;
    --border: #354151;
    --border-strong: #4a5768;
    --accent-soft: #173a55;
    --success: #75d2a3;
    --success-bg: #153c2b;
    --info: #7fc3ee;
    --info-bg: #15344b;
    --warning: #f1c86f;
    --warning-bg: #493712;
    --critical: #f19b9b;
    --critical-bg: #4b2020;
    --code-bg: #0c1016;
    --code-ink: #f4f7fb;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.35);
  }
}