:root {
  --site-color-primary: #22c55e;
  --site-color-primary-dark: #16a34a;
  --site-color-accent: #4ade80;
  --site-color-success: #22c55e;
  --site-color-error: #ef4444;
  --site-color-warning: #f59e0b;

  --site-spacing-xs: 0.25rem;
  --site-spacing-sm: 0.5rem;
  --site-spacing-md: 1rem;
  --site-spacing-lg: 1.5rem;
  --site-spacing-xl: 2.5rem;
  --site-spacing-2xl: 4rem;
  --site-spacing-3xl: 6rem;

  --site-radius-sm: 6px;
  --site-radius-md: 12px;
  --site-radius-lg: 20px;
  --site-radius-full: 9999px;

  --site-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.12);
  --site-shadow-md: 0 4px 14px rgb(0 0 0 / 0.18);
  --site-shadow-lg: 0 16px 40px rgb(0 0 0 / 0.28);

  --site-transition-fast: 150ms ease;
  --site-transition-normal: 250ms ease;
  --site-transition-slow: 400ms ease;

  --site-container: 1200px;
  --site-container-narrow: 760px;
  --site-container-padding: clamp(1rem, 4vw, 2rem);

  --site-z-skip: 90;
  --site-z-nav: 100;
  --site-z-drawer: 200;
  --site-z-modal: 300;
  --site-z-toast: 400;

  --site-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  --site-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --site-text-xs:  clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --site-text-sm:  clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem);
  --site-text-md:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --site-text-lg:  clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --site-text-xl:  clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  --site-text-2xl: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
  --site-text-3xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --site-text-4xl: clamp(2.5rem, 1.8rem + 3vw, 4.25rem);

  --site-line-tight: 1.15;
  --site-line-snug: 1.35;
  --site-line-normal: 1.6;
  --site-line-relaxed: 1.75;
}

:root[data-theme="dark"] {
  --site-color-background: #0b0b12;
  --site-color-surface: #14141d;
  --site-color-surface-elevated: #1a1a25;
  --site-color-text: #f1f5f9;
  --site-color-text-muted: #94a3b8;
  --site-color-border: #1f2937;
  --site-color-overlay: rgb(0 0 0 / 0.65);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --site-color-background: #ffffff;
  --site-color-surface: #f4f4f6;
  --site-color-surface-elevated: #ffffff;
  --site-color-text: #0b0b12;
  --site-color-text-muted: #475569;
  --site-color-border: #e2e8f0;
  --site-color-overlay: rgb(0 0 0 / 0.45);
  color-scheme: light;
}

:root[data-theme="light"] {
  --site-color-primary: #16a34a;
  --site-color-accent: #065f46;
}