:root {
  color-scheme: light;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Fira Code", ui-monospace, monospace;

  --gray-2: #f2f2f5;
  --gray-3: #d8d8e2;
  --gray-4: #adadbc;
  --gray-7: #2e2e3a;

  --background-primary: #ffffff;
  --background-secondary: #f7f7f8;
  --background-selected: #f0f0f2;
  --background-hover: #f7f7f8;
  --background-note: #f9f9fb;
  --background-success-subtle: #f0fbf6;
  --background-danger-subtle: #fff0f6;
  --background-topbar: rgba(255, 255, 255, 0.55);
  --overlay-backdrop: rgba(0, 0, 0, 0.2);

  --title-default: #1c1c26;
  --text-default: #1c1c26;
  --text-secondary: #4a4a58;
  --text-tertiary: #7a7a8a;
  --accent: #5a04bc;
  --accent-bright: #8e4ec6;
  --accent-soft: #f1ecf9;
  --accent-stroke: #c2a0ee;
  --text-danger: #c0404a;
  --text-success: #38a878;

  --stroke-default: #ebebf1;
  --stroke-strong: #d8d8e2;
  --stroke-success-alt: #38a878;
  --stroke-danger-alt: #c0404a;

  --radius-small: 4px;
  --radius-medium: 6px;
  --radius-large: 12px;
  --radius-rounded: 100000px;
  --elevation-1: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  --elevation-2: 0px 8px 24px -4px rgba(0, 0, 0, 0.12), 0px 2px 6px rgba(0, 0, 0, 0.06);

  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --gray-2: #0d0d12;
  --gray-3: #2e2e3a;
  --gray-4: #4a4a58;
  --gray-7: #d8d8e2;

  --background-primary: #0d0d12;
  --background-secondary: #040405;
  --background-selected: #1c1c26;
  --background-hover: #111117;
  --background-note: #1c1c26;
  --background-success-subtle: #0d0d12;
  --background-danger-subtle: #240a10;
  --background-topbar: rgba(13, 13, 18, 0.45);
  --overlay-backdrop: rgba(0, 0, 0, 0.8);

  --title-default: #f2f2f5;
  --text-default: #f2f2f5;
  --text-secondary: #adadbc;
  --text-tertiary: #7a7a8a;
  --accent: #9a5bec;
  --accent-bright: #9a5bec;
  --accent-soft: #1a1229;
  --accent-stroke: #4a2a7a;
  --text-danger: #e87878;
  --text-success: #38a878;

  --stroke-default: #1c1c26;
  --stroke-strong: #2e2e3a;
  --stroke-success-alt: #175c3d;
  --stroke-danger-alt: #8f3040;

  --elevation-1: 0px 1px 3px 0px rgba(0, 0, 0, 0.24);
  --elevation-2: 0px 8px 24px -4px rgba(0, 0, 0, 0.6), 0px 2px 6px rgba(0, 0, 0, 0.4);
}