:root {
  /* OKLCH Color Palette (2026 Modern Light Blue Theme) */
  --primary-hue: 250;
  --primary: oklch(55% 0.2 var(--primary-hue));
  --primary-soft: oklch(90% 0.05 var(--primary-hue));
  --accent: oklch(75% 0.15 190); /* Cyan-ish accent */

  --surface: oklch(98% 0.01 var(--primary-hue));
  --surface-glass: rgba(255, 255, 255, 0.4);
  --surface-glow: oklch(95% 0.05 var(--primary-hue));

  --text: oklch(25% 0.02 var(--primary-hue));
  --text-muted: oklch(45% 0.02 var(--primary-hue));
  --text-on-primary: oklch(100% 0 0);

  /* Spacing & Layout Tokens */
  --spacing-xs: 0.5rem;
  --spacing-s: 1rem;
  --spacing-m: 1.5rem;
  --spacing-l: 2.5rem;
  --spacing-xl: 4rem;

  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;
  --radius-round: 9999px;

  --blur-standard: 12px;
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.04);
  --border-glass: 1px solid rgba(255, 255, 255, 0.3);

  --bg-circle-1: oklch(92% 0.1 var(--primary-hue));
  --bg-circle-2: oklch(95% 0.05 190);

  --container-max-width: 1200px;
}

@media (prefers-color-scheme: dark) {
  /* Optional: keeping it light for now as per previous issue but defining tokens for adaptability */
  :root {
    --primary: oklch(75% 0.15 var(--primary-hue));
    --surface: oklch(20% 0.02 var(--primary-hue));
    --surface-glass: rgba(0, 0, 0, 0.3);
    --text: oklch(95% 0.01 var(--primary-hue));
    --text-muted: oklch(75% 0.01 var(--primary-hue));
    --border-glass: 1px solid rgba(255, 255, 255, 0.1);

    --bg-circle-1: oklch(25% 0.05 var(--primary-hue));
    --bg-circle-2: oklch(30% 0.03 190);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 80% 20%, var(--bg-circle-1) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, var(--bg-circle-2) 0%, transparent 40%),
    var(--surface);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  text-wrap: balance;
  line-height: 1.1;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}