:root {
  color-scheme: light;
  --font-ui: "Source Sans 3", "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-editorial: "Source Serif 4", "Noto Serif", "Noto Serif SC", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", "Source Code Pro", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --page: #fbf9fd;
  --page-alt: #f6f0f8;
  --surface: #fffefe;
  --surface-soft: #f8f3fa;
  --surface-raised: #ffffff;
  --surface-contrast: #171522;
  --ink: #171422;
  --ink-soft: #41394d;
  --muted: #655b72;
  --muted-faint: #8a8095;
  --reverse-ink: #fffaf2;

  --lavender-900: #4d3266;
  --lavender-700: #755393;
  --lavender-500: #9a78b8;
  --lavender-300: #c6b1d8;
  --lavender-150: #e5d9ed;
  --lavender-75: #f4edf8;

  --gold-800: #865c16;
  --gold-700: #a87820;
  --gold-600: #b98a2f;
  --gold-500: #c79a43;
  --gold-300: #e1c47f;
  --gold-150: #f1e2b9;
  --gold-75: #faf4df;

  --line: #e3dce7;
  --line-strong: #cdbfd5;
  --line-gold: rgba(168, 120, 32, 0.42);
  --focus: #2f6ea3;

  --status-available: #347457;
  --status-metadata: #3f7088;
  --status-unavailable: #68706c;
  --status-nd: #7a654f;
  --status-stable: #347457;
  --status-reference: #646a67;
  --status-error: #a33a2b;

  --shadow-sm: 0 2px 8px rgba(32, 23, 42, 0.06);
  --shadow-md: 0 14px 42px rgba(43, 28, 58, 0.11);
  --shadow-dialog: 0 26px 80px rgba(22, 14, 31, 0.26);
  --backdrop: rgba(20, 14, 27, 0.52);

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --header-primary-height: 96px;
  --header-nav-height: 52px;
  --page-max: 1440px;
  --content-max: 1312px;
  --page-gutter: 32px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --page: #090812;
  --page-alt: #0d0b18;
  --surface: #11101d;
  --surface-soft: #171329;
  --surface-raised: #19162a;
  --surface-contrast: #07070e;
  --ink: #fbf6ff;
  --ink-soft: #e0d6e7;
  --muted: #b9aec5;
  --muted-faint: #8d8298;
  --reverse-ink: #100e18;

  --lavender-900: #eadbfa;
  --lavender-700: #c6a9e2;
  --lavender-500: #a885c7;
  --lavender-300: #6c5286;
  --lavender-150: #352a45;
  --lavender-75: #1c1729;

  --gold-800: #f5d98c;
  --gold-700: #e4ba5d;
  --gold-600: #d7a744;
  --gold-500: #c89634;
  --gold-300: #8b6724;
  --gold-150: #3f321a;
  --gold-75: #201b11;

  --line: rgba(226, 211, 237, 0.15);
  --line-strong: rgba(229, 208, 240, 0.27);
  --line-gold: rgba(228, 186, 93, 0.46);
  --focus: #75b3e0;

  --status-available: #6fc796;
  --status-metadata: #77b6d1;
  --status-unavailable: #a9b0ac;
  --status-nd: #d2b184;
  --status-stable: #6fc796;
  --status-reference: #c7ccc9;
  --status-error: #ef8576;

  --shadow-sm: 0 3px 12px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 16px 52px rgba(0, 0, 0, 0.38);
  --shadow-dialog: 0 28px 90px rgba(0, 0, 0, 0.64);
  --backdrop: rgba(0, 0, 0, 0.74);
}

@media (max-width: 1180px) {
  :root {
    --page-gutter: 24px;
    --header-primary-height: 80px;
  }
}

@media (max-width: 760px) {
  :root {
    --page-gutter: 16px;
    --header-primary-height: 64px;
    --header-nav-height: 0px;
  }
}