:root {
  --font-heading: "Instrument Serif", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --text-xs: 8.5px;
  --text-sm: 12.0px;
  --text-base: 17.0px;
  --text-lg: 24.0px;
  --text-xl: 34.0px;
  --text-2xl: 48.0px;
  --text-3xl: 68.0px;
  --text-4xl: 96.0px;
  --text-5xl: 136.0px;
  --radius-sm: 9px;
  --radius-md: 18px;
  --radius-lg: 27px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 16px 48px rgb(0 0 0 / 0.12);
}
:root {
  --bg: #fcfcfc;
  --surface: #f9f9f9;
  --surface-2: #f0f0f0;
  --border: #d9d9d9;
  --border-strong: #bbbbbb;
  --text: #202020;
  --muted: #646464;
  --accent: #6e56cf;
  --accent-hover: #654dc4;
  --accent-soft: #f4f0fe;
  --accent-text: #6550b9;
  --on-accent: #ffffff;
  --second: #00a2c7;
  --second-soft: #def7f9;
  --second-text: #107d98;
  --success: #30a46c;
  --warning: #ffc53d;
  --danger: #e5484d;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111111;
    --surface: #191919;
    --surface-2: #222222;
    --border: #3a3a3a;
    --border-strong: #606060;
    --text: #eeeeee;
    --muted: #b4b4b4;
    --accent: #6e56cf;
    --accent-hover: #7d66d9;
    --accent-soft: #291f43;
    --accent-text: #baa7ff;
    --on-accent: #ffffff;
    --second: #00a2c7;
    --second-soft: #082c36;
    --second-text: #4ccce6;
    --success: #30a46c;
    --warning: #ffc53d;
    --danger: #e5484d;
  }
}