/* Light mode (default) */
:root {
  --accent: var(--green-5);
  --accent-foreground: white;
  --amber-1: oklch(0.35 0.15 70);
  --amber-2: oklch(0.48 0.17 70);
  --amber-3: oklch(0.60 0.18 70);
  --amber-4: oklch(0.70 0.15 70);
  --amber-5: oklch(0.80 0.12 70);
  --amber-6: oklch(0.88 0.08 70);
  --amber-7: oklch(0.94 0.04 70);
  --background: var(--slate-9);
  --blue-1: oklch(0.30 0.15 250);
  --blue-2: oklch(0.42 0.17 250);
  --blue-3: oklch(0.55 0.18 250);
  --blue-4: oklch(0.65 0.15 250);
  --blue-5: oklch(0.75 0.12 250);
  --blue-6: oklch(0.85 0.08 250);
  --blue-7: oklch(0.93 0.04 250);
  --border: var(--slate-7);
  --borders-0: 1px;
  --borders-1: 2px;
  --borders-2: 3px;
  --borders-3: 4px;
  --card: white;
  --card-foreground: var(--slate-1);
  --destructive: var(--red-4);
  --destructive-foreground: white;
  --destructive-hover: var(--red-3);
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'Fira Code', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
  --fontSize-0: 0.75rem;
  --fontSize-1: 1.58rem;
  --fontSize-2: 2.18rem;
  --fontSize-3: 2.58rem;
  --fontSize-4: 2.82rem;
  --fontSize-5: 2.95rem;
  --fontSize-6: 2.99rem;
  --fontSize-7: 3rem;
  --foreground: var(--slate-1);
  --green-1: oklch(0.25 0.12 145);
  --green-2: oklch(0.38 0.14 145);
  --green-3: oklch(0.50 0.15 145);
  --green-4: oklch(0.63 0.15 145);
  --green-5: oklch(0.71 0.12 145);
  --green-6: oklch(0.78 0.08 145);
  --green-7: oklch(0.90 0.04 145);
  --info: var(--blue-4);
  --info-foreground: white;
  --input-border: var(--slate-6);
  --lineHeight-0: 1;
  --lineHeight-1: 1;
  --lineHeight-2: 2;
  --lineHeight-3: 2;
  --lineHeight-4: 2;
  --link: var(--blue-3);
  --link-hover: var(--blue-2);
  --muted: var(--slate-8);
  --muted-foreground: var(--slate-4);
  --primary: var(--green-4);
  --primary-foreground: white;
  --primary-hover: var(--green-3);
  --radii-0: 0px;
  --radii-1: 7px;
  --radii-2: 12px;
  --radii-3: 15px;
  --radii-4: 16px;
  --red-1: oklch(0.30 0.20 25);
  --red-2: oklch(0.42 0.22 25);
  --red-3: oklch(0.55 0.22 25);
  --red-4: oklch(0.65 0.18 25);
  --red-5: oklch(0.75 0.14 25);
  --red-6: oklch(0.85 0.10 25);
  --red-7: oklch(0.93 0.05 25);
  --secondary: var(--slate-5);
  --secondary-foreground: white;
  --secondary-hover: var(--slate-4);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --slate-1: oklch(0.15 0.02 250);
  --slate-2: oklch(0.25 0.02 250);
  --slate-3: oklch(0.35 0.02 250);
  --slate-4: oklch(0.45 0.02 250);
  --slate-5: oklch(0.55 0.02 250);
  --slate-6: oklch(0.65 0.02 250);
  --slate-7: oklch(0.75 0.01 250);
  --slate-8: oklch(0.85 0.01 250);
  --slate-9: oklch(0.95 0.01 250);
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 6px;
  --spacing-3: 9px;
  --spacing-4: 14px;
  --spacing-5: 20px;
  --spacing-6: 30px;
  --spacing-7: 46px;
  --spacing-8: 68px;
  --spacing-9: 103px;
  --spacing-fluid-lg: clamp(2rem, 1.33rem + 0.21vw, 4rem);
  --spacing-fluid-md: clamp(1rem, 0.67rem + 0.10vw, 2rem);
  --spacing-fluid-sm: clamp(0.5rem, 0.33rem + 0.05vw, 1rem);
  --spacing-fluid-xl: clamp(3rem, 2.00rem + 0.31vw, 6rem);
  --success: var(--green-4);
  --success-foreground: white;
  --warning: var(--amber-4);
  --warning-foreground: var(--slate-1);
}

/* Dark mode (OS preference) */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) {
    --accent: var(--green-5);
    --accent-foreground: var(--slate-1);
    --background: var(--slate-1);
    --border: var(--slate-3);
    --card: var(--slate-2);
    --card-foreground: var(--slate-9);
    --destructive: var(--red-5);
    --destructive-foreground: white;
    --destructive-hover: var(--red-6);
    --foreground: var(--slate-9);
    --info: var(--blue-5);
    --info-foreground: white;
    --input-border: var(--slate-4);
    --link: var(--blue-5);
    --link-hover: var(--blue-6);
    --muted: var(--slate-3);
    --muted-foreground: var(--slate-6);
    --primary: var(--green-5);
    --primary-foreground: var(--slate-1);
    --primary-hover: var(--green-6);
    --secondary: var(--slate-4);
    --secondary-foreground: white;
    --secondary-hover: var(--slate-5);
    --success: var(--green-5);
    --success-foreground: var(--slate-1);
    --warning: var(--amber-5);
    --warning-foreground: var(--slate-1);
  }
}

/* Dark mode (user preference override) */
:root.dark-mode {
  --accent: var(--green-5);
  --accent-foreground: var(--slate-1);
  --background: var(--slate-1);
  --border: var(--slate-3);
  --card: var(--slate-2);
  --card-foreground: var(--slate-9);
  --destructive: var(--red-5);
  --destructive-foreground: white;
  --destructive-hover: var(--red-6);
  --foreground: var(--slate-9);
  --info: var(--blue-5);
  --info-foreground: white;
  --input-border: var(--slate-4);
  --link: var(--blue-5);
  --link-hover: var(--blue-6);
  --muted: var(--slate-3);
  --muted-foreground: var(--slate-6);
  --primary: var(--green-5);
  --primary-foreground: var(--slate-1);
  --primary-hover: var(--green-6);
  --secondary: var(--slate-4);
  --secondary-foreground: white;
  --secondary-hover: var(--slate-5);
  --success: var(--green-5);
  --success-foreground: var(--slate-1);
  --warning: var(--amber-5);
  --warning-foreground: var(--slate-1);
}

/* Light mode (user preference override when OS prefers dark) */
@media (prefers-color-scheme: dark) {
  :root.light-mode {
    --accent: var(--green-5);
    --accent-foreground: white;
    --background: var(--slate-9);
    --border: var(--slate-7);
    --card: white;
    --card-foreground: var(--slate-1);
    --destructive: var(--red-4);
    --destructive-foreground: white;
    --destructive-hover: var(--red-3);
    --foreground: var(--slate-1);
    --info: var(--blue-4);
    --info-foreground: white;
    --input-border: var(--slate-6);
    --link: var(--blue-3);
    --link-hover: var(--blue-2);
    --muted: var(--slate-8);
    --muted-foreground: var(--slate-4);
    --primary: var(--green-4);
    --primary-foreground: white;
    --primary-hover: var(--green-3);
    --secondary: var(--slate-5);
    --secondary-foreground: white;
    --secondary-hover: var(--slate-4);
    --success: var(--green-4);
    --success-foreground: white;
    --warning: var(--amber-4);
    --warning-foreground: var(--slate-1);
  }
}