:root {
  color-scheme: light;
  --gray-50: oklch(0.985 0.004 150); --gray-100: oklch(0.962 0.006 150);
  --gray-200: oklch(0.91 0.009 150); --gray-300: oklch(0.83 0.012 150);
  --gray-400: oklch(0.71 0.016 150); --gray-500: oklch(0.57 0.017 150);
  --gray-600: oklch(0.47 0.018 150); --gray-700: oklch(0.36 0.021 150);
  --gray-800: oklch(0.27 0.022 150); --gray-950: oklch(0.19 0.02 150);
  --green-300: oklch(0.85 0.12 148); --green-500: oklch(0.68 0.15 148);
  --green-700: oklch(0.39 0.09 148); --red-700: oklch(0.43 0.17 28);
  --red-300: oklch(0.8 0.12 28); --white: oklch(1 0 0);
  --background: var(--gray-100); --foreground: var(--gray-950); --card: var(--white);
  --primary: var(--green-700); --primary-foreground: var(--white); --primary-hover: var(--gray-800);
  --secondary: var(--gray-200); --muted: var(--gray-600); --accent: var(--green-300);
  --border: var(--gray-200); --ring: var(--green-700); --destructive: var(--red-700);
  --outline-image: oklch(0 0 0 / 0.1);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius: 16px; --radius-sm: 8px; --radius-lg: 24px;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.2rem; --text-lg: 1.44rem;
  --text-xl: 1.728rem; --text-2xl: 2.488rem; --text-display: 4.3rem;
  --font-body: 'Segoe UI', Arial, sans-serif;
  --shadow: 0 4px 8px oklch(0 0 0 / 0.015), 0 16px 48px oklch(0 0 0 / 0.025);
  --z-sticky: 10;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --background: var(--gray-950); --foreground: var(--gray-50); --card: var(--gray-800);
  --primary: var(--green-300); --primary-foreground: var(--gray-950); --primary-hover: var(--green-500);
  --secondary: var(--gray-700); --muted: var(--gray-300); --border: var(--gray-700);
  --accent: var(--green-300); --ring: var(--green-300); --destructive: var(--red-300);
  --outline-image: oklch(1 0 0 / 0.1);
}