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

  --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: 8px;
  --radius-md: 12px;
  --border-width: 1px;

  --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-warning: #d98a1a;
  --color-error: #d11f1f;
  --color-info: #3a7bdb;
}

[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);
}

[data-theme="light"] {
  --app-bg: var(--color-white-100);
  --surface-1: var(--color-white-0);
  --surface-2: #efefea;
  --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);
}