:root {
  /* Design Tokens (Primitives) */
  --clr-ice-white: #f8faff;
  --clr-glacier-blue: #a3c1da;
  --clr-granite-light: #e0e0e0;
  --clr-granite-medium: #8e9aaf;
  --clr-granite-dark: #2d3436;
  --clr-midnight-blue: #0f172a;
  --clr-slate-deep: #1e293b;
  --clr-moon-glow: #f1f5f9;
  --clr-mint-accent: #00f5d4;

  /* Spacing (Fluid) */
  --space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
  --space-s: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-m: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
  --space-l: clamp(2rem, 1.8rem + 1vw, 3rem);
  --space-xl: clamp(3rem, 2.6rem + 2vw, 5rem);
  --space-2xl: clamp(5rem, 4.4rem + 3vw, 8rem);

  /* Typography */
  --font-sans: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --size-step-0: clamp(1rem, 0.95rem + 0.25vw, 1.2rem);
  --size-step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.6rem);
  --size-step-2: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --size-step-3: clamp(2.2rem, 1.8rem + 2vw, 3.5rem);
  --size-step-4: clamp(3.5rem, 2.8rem + 3.5vw, 6rem);
}

:root {
  --color-surface: var(--clr-ice-white);
  --color-surface-mixed: #f0f4f8;
  --color-text: var(--clr-granite-dark);
  --color-text-muted: var(--clr-granite-medium);
  --color-primary: var(--clr-glacier-blue);
  --color-accent: var(--clr-mint-accent);
  --color-border: var(--clr-granite-light);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: var(--clr-midnight-blue);
    --color-surface-mixed: var(--clr-slate-deep);
    --color-text: var(--clr-moon-glow);
    --color-text-muted: var(--clr-granite-medium);
    --color-primary: var(--clr-slate-deep);
    --color-accent: var(--clr-mint-accent);
    --color-border: #334155;
  }
}

/* Base Styles */
body {
  margin: 0;
  padding: 0;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--size-step-0);
  line-height: 1.5;
  transition: background-color 0.8s ease, color 0.8s ease;
  overflow-x: hidden;
}

@layer components, utilities;