:root {
  --primary-50: var(--color-cyan-50);
  --primary-100: var(--color-cyan-100);
  --primary-200: var(--color-cyan-200);
  --primary-300: var(--color-cyan-300);
  --primary-400: var(--color-cyan-400);
  --primary-500: var(--color-cyan-500);
  --primary-600: var(--color-cyan-600);
  --primary-700: var(--color-cyan-700);
  --primary-800: var(--color-cyan-800);
  --primary-900: var(--color-cyan-900);
  --primary-950: var(--color-cyan-950);

  --bg: white;
  --bg-muted: var(--color-slate-50);
  --bg-elevated: var(--color-slate-100);
  --bg-accented: var(--color-slate-200);
  --bg-inverted: var(--color-slate-900);

  --text: var(--color-slate-950);
  --text-muted: var(--color-slate-600);
  --text-inverted: var(--color-slate-50);

  --primary: var(--primary-500);
  --primary-hover: var(--primary-600);
  --primary-active: var(--primary-700);
  --primary-contrast: var(--color-white);
  --primary-soft: var(--primary-100);
  --primary-soft-hover: var(--primary-200);
  --primary-soft-text: var(--primary-800);

  --info: var(--color-blue-500);
  --success: var(--color-green-500);
  --warning: var(--color-yellow-500);
  --danger: var(--color-red-500);

  --border: var(--color-slate-200);
  --border-strong: var(--color-slate-300);
  --border-accent: var(--primary-300);

  --input: var(--bg-muted);
  --input-border: var(--border);
  --input-border-focus: var(--border-accent);

  --hero-from: var(--primary-50);
  --hero-via: var(--color-white);
  --hero-to: var(--color-slate-100);
  --hero-overlay: linear-gradient(110deg, rgb(15 23 42 / 0.08), rgb(14 116 144 / 0.06));
  --hero-title: var(--color-slate-950);
  --hero-body: var(--color-slate-700);
  --hero-panel-bg: rgb(255 255 255 / 0.78);
  --hero-panel-border: var(--color-slate-200);

  --feature-from: var(--color-white);
  --feature-to: var(--primary-50);
  --feature-border: var(--color-slate-200);

  --badge-tech-bg: var(--primary-100);
  --badge-tech-border: var(--primary-300);
  --badge-tech-text: var(--primary-900);

  --shadow-elevated: 0 24px 50px -36px rgb(14 116 144 / 0.45);
}

.dark {
  --bg: var(--color-slate-950);
  --bg-muted: var(--color-slate-900);
  --bg-elevated: var(--color-slate-900);
  --bg-accented: var(--color-slate-800);
  --bg-inverted: var(--color-slate-50);

  --text: var(--color-slate-100);
  --text-muted: var(--color-slate-400);
  --text-inverted: var(--color-slate-950);

  --primary: var(--primary-400);
  --primary-hover: var(--primary-300);
  --primary-active: var(--primary-200);
  --primary-contrast: var(--primary-950);
  --primary-soft: rgb(6 182 212 / 0.22);
  --primary-soft-hover: rgb(34 211 238 / 0.3);
  --primary-soft-text: var(--primary-200);

  --border: var(--color-slate-800);
  --border-strong: var(--color-slate-700);
  --border-accent: var(--primary-700);

  --hero-from: var(--color-slate-950);
  --hero-via: var(--color-slate-900);
  --hero-to: var(--primary-950);
  --hero-overlay: linear-gradient(110deg, rgb(2 6 23 / 0.5), rgb(8 47 73 / 0.4));
  --hero-title: var(--color-slate-50);
  --hero-body: var(--color-slate-300);
  --hero-panel-bg: rgb(2 6 23 / 0.45);
  --hero-panel-border: var(--color-slate-700);

  --feature-from: var(--color-slate-900);
  --feature-to: rgb(8 47 73 / 0.38);
  --feature-border: var(--color-slate-700);

  --badge-tech-bg: rgb(8 145 178 / 0.2);
  --badge-tech-border: var(--primary-700);
  --badge-tech-text: var(--primary-200);

  --shadow-elevated: 0 30px 65px -34px rgb(2 6 23 / 0.92);
}