:root {
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --type-page-title-size: 60px;
  --type-section-title-size: 1.75rem;
  --type-group-title-size: 1.1rem;
  --type-body-size: 1rem;
  --type-helper-size: 0.8125rem;
  --type-eyebrow-size: 0.78rem;
  --type-body-line-height: 1.65;
  --type-helper-line-height: 1.5;

  --layout-page-top: 44px;
  --layout-page-bottom: 72px;
  --layout-header-content-gap: 30px;
  --layout-major-section-gap: 48px;
  --layout-section-content-gap: 24px;
  --layout-related-group-gap: 16px;
  --panel-padding-compact: 16px;
  --panel-padding-standard: 24px;
  --modal-content-gap: 12px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --border-width: 1px;
  --page-primary-rule: 2px solid var(--accent);
  --field-underline-color: var(--border-2);
  --field-underline-focus-color: var(--color-red-500);
  --field-shadow: 0 10px 24px rgba(15, 18, 24, 0.06);
  --field-focus-shadow: 0 0 0 3px var(--focus-ring), var(--field-shadow);
  --math-selection-background: #b4d5fe;
  --math-selection-background-muted: #d4d4d4;

  --shadow-overlay: 0 20px 50px rgba(0, 0, 0, 0.22);
  --transition-fast: 140ms ease;
  --transition-base: 220ms ease;

  --color-red-500: #d11f1f;
  --color-red-400: #f04444;
  --color-red-700: #8f1111;

  --color-black-950: #050505;
  --color-black-900: #111111;
  --color-gray-800: #1b1b19;
  --color-gray-600: #4f4f4a;
  --color-gray-400: #8b8b85;
  --color-gray-200: #d6d6d1;
  --color-gray-100: #e7e7e3;
  --color-white-100: #f5f5f2;
  --color-white-0: #ffffff;

  --color-success: #1fa971;
  --color-flawless: #6f3cc3;
  --color-warning: #d98a1a;
  --color-error: #d11f1f;
  --color-danger-hover: #b91c1c;
  --color-info: #3a7bdb;
  --color-role-admin: #6b31d8;

  --status-success-soft: color-mix(in srgb, var(--color-success) 12%, transparent);
  --status-warning-soft: color-mix(in srgb, var(--color-warning) 12%, transparent);
  --status-info-soft: color-mix(in srgb, var(--color-info) 12%, transparent);
  --status-error-soft: color-mix(in srgb, var(--color-error) 12%, transparent);
  --status-role-admin-soft: rgba(159, 93, 255, 0.14);
  --status-neutral-soft: var(--surface-3);

  --interactive-wash: var(--surface-3);
  --muted-control-bg: var(--surface-2);
  --metadata-chip-bg: color-mix(in srgb, var(--text-1) 8%, var(--surface-1));

  --reference-markdown-red: var(--color-red-500);
  --reference-markdown-red-soft: #fff4f4;
  --reference-markdown-red-line: #e3b1b1;
  --reference-markdown-block-text: var(--color-black-950);
  --reference-markdown-block-muted: #2f2f2a;
  --reference-markdown-block-bg: var(--color-white-0);
  --reference-markdown-red-inset-shadow: rgba(209, 31, 31, 0.025);
  --reference-callout-bg: #9ff2f2;
  --reference-callout-border: var(--color-black-900);
  --reference-callout-shadow: rgba(209, 31, 31, 0.28);
  --reference-callout-ring-shadow: rgba(209, 31, 31, 0.10);
}

[data-theme="dark"] {
  --app-bg: var(--color-black-950);
  --surface-1: var(--color-black-900);
  --surface-2: var(--color-gray-800);
  --surface-3: rgba(255, 255, 255, 0.04);

  --text-1: var(--color-white-100);
  --text-2: var(--color-gray-200);
  --text-3: var(--color-gray-400);

  --border-1: rgba(214, 214, 209, 0.18);
  --border-2: rgba(214, 214, 209, 0.3);

  --accent: var(--color-red-500);
  --accent-hover: var(--color-red-400);
  --accent-strong: var(--color-red-700);
  --accent-contrast: var(--color-white-0);
  --accent-soft: rgba(209, 31, 31, 0.12);

  --focus-ring: rgba(240, 68, 68, 0.5);
  --reference-markdown-red-soft: #f4dddd;
  --reference-callout-shadow: rgba(255, 255, 255, 0.34);
}

[data-theme="light"] {
  --app-bg: var(--color-white-0);
  --surface-1: var(--color-white-0);
  --surface-2: var(--color-white-100);
  --surface-3: rgba(5, 5, 5, 0.04);

  --text-1: var(--color-black-950);
  --text-2: var(--color-gray-600);
  --text-3: var(--color-gray-400);

  --border-1: rgba(27, 27, 25, 0.12);
  --border-2: rgba(27, 27, 25, 0.22);

  --accent: var(--color-red-500);
  --accent-hover: var(--color-red-400);
  --accent-strong: var(--color-red-700);
  --accent-contrast: var(--color-white-0);
  --accent-soft: rgba(209, 31, 31, 0.08);

  --focus-ring: rgba(209, 31, 31, 0.28);
}