:root {
  --border-radius: 6px;
  --radius: 6px;
  --font-sans: "Inter", system-ui, sans-serif;
  --sidebar-width-comfortable: 280px;
  --sidebar-width-compact: 240px;
  --backstage-sidebar-width: 280px;
  --color-base-50: oklch(98.5% .002 247.839);
  --color-base-100: oklch(96.7% .003 264.542);
  --color-base-200: oklch(92.8% .006 264.531);
  --color-base-300: oklch(87.2% .01 258.338);
  --color-base-400: oklch(70.7% .022 261.325);
  --color-base-500: oklch(55.1% .027 264.364);
  --color-base-600: oklch(44.6% .03 256.802);
  --color-base-700: oklch(37.3% .034 259.733);
  --color-base-800: oklch(27.8% .033 256.848);
  --color-base-900: oklch(21% .034 264.665);
  --color-base-950: oklch(13% .028 261.692);
  --color-font-subtle-light: var(--color-base-500);
  --color-font-subtle-dark: var(--color-base-400);
  --color-font-default-light: var(--color-base-600);
  --color-font-default-dark: var(--color-base-300);
  --color-font-important-light: var(--color-base-900);
  --color-font-important-dark: var(--color-base-100);
  --color-primary-50: rgb(254, 242, 242);
  --color-primary-100: rgb(254, 226, 226);
  --color-primary-200: rgb(254, 202, 202);
  --color-primary-300: rgb(252, 165, 165);
  --color-primary-400: rgb(248, 113, 113);
  --color-primary-500: rgb(239, 68, 68);
  --color-primary-600: rgb(220, 38, 38);
  --color-primary-700: rgb(185, 28, 28);
  --color-primary-800: rgb(153, 27, 27);
  --color-primary-900: rgb(127, 29, 29);
  --color-primary-950: rgb(69, 10, 10);
  --background: var(--color-base-100);
  --foreground: var(--color-base-900);
  --card: rgb(255 255 255);
  --card-foreground: var(--color-base-900);
  --muted: var(--color-base-200);
  --muted-foreground: var(--color-base-500);
  --border: color-mix(in oklab, var(--color-base-300) 80%, transparent);
  --border-subtle: var(--border);
  --input: var(--border);
  --input-background: var(--background);
  --ring: color-mix(in oklab, var(--color-primary-500) 25%, transparent);
  --elevation-card: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --primary-foreground: rgb(255 255 255);
}

.dark {
  --background: var(--color-base-950);
  --foreground: var(--color-base-50);
  --card: var(--color-base-900);
  --card-foreground: var(--color-base-50);
  --muted: var(--color-base-800);
  --muted-foreground: var(--color-base-400);
  --border: color-mix(in oklab, var(--color-base-700) 48%, transparent);
  --border-subtle: var(--border);
  --input: var(--border);
  --input-background: var(--color-base-900);
  --ring: color-mix(in oklab, var(--color-primary-500) 30%, transparent);
  --elevation-card: 0 1px 3px 0 rgb(0 0 0 / 0.12), 0 1px 2px -1px rgb(0 0 0 / 0.08);
  --primary-foreground: rgb(255 255 255);
  --color-primary-500: rgb(248, 113, 113);
  --color-primary-600: rgb(239, 68, 68);
}