@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-accent:        #00BFA5;
  --color-accent-light:  #4DD9C4;
  --color-accent-dark:   #009980;
  --color-accent-glow:   rgba(0, 191, 165, 0.30);
  --color-accent-glow-strong: rgba(0, 191, 165, 0.50);

  --gradient-brand:  linear-gradient(135deg, #4DD9C4 0%, #00BFA5 100%);
  --gradient-text:   linear-gradient(135deg, #009980 0%, #4DD9C4 100%);

  --color-bg:            #f5f5f7;
  --color-bg-alt:        #ffffff;
  --color-surface:       rgba(255, 255, 255, 0.72);
  --color-surface-solid: #ffffff;
  --color-border:        rgba(0, 0, 0, 0.08);
  --color-border-solid:  #d2d2d7;
  --color-text:          #1d1d1f;
  --color-text-secondary:#6e6e73;
  --color-text-tertiary: #aeaeb2;

  --glass-bg:     rgba(255, 255, 255, 0.75);
  --glass-blur:   saturate(180%) blur(20px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.60);

  --font-sans:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.375rem;
  --font-size-2xl:  1.75rem;
  --font-size-3xl:  2.5rem;
  --font-size-4xl:  3.5rem;
  --font-size-5xl:  5rem;
  --font-size-hero: clamp(3rem, 8vw, 5.5rem);

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-2xl:  48px;
  --radius-full: 9999px;

  --shadow-sm:   0 2px 8px rgba(0,0,0,.06);
  --shadow-md:   0 8px 30px rgba(0,0,0,.08);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.10);
  --shadow-glow: 0 0 60px var(--color-accent-glow), 0 0 20px var(--color-accent-glow);

  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition:  200ms var(--ease-out);
  --transition-slow: 500ms var(--ease-out);

  --max-width: 980px;
  --nav-height: 52px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            #000000;
    --color-bg-alt:        #161617;
    --color-surface:       rgba(255, 255, 255, 0.06);
    --color-surface-solid: #1c1c1e;
    --color-border:        rgba(255, 255, 255, 0.10);
    --color-border-solid:  #3a3a3c;
    --color-text:          #f5f5f7;
    --color-text-secondary:#a1a1a6;
    --color-text-tertiary: #6c6c70;
    --color-accent-glow:   rgba(0, 191, 165, 0.20);
    --color-accent-glow-strong: rgba(0, 191, 165, 0.35);
    --glass-bg:     rgba(28, 28, 30, 0.80);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --shadow-sm:    0 2px 8px rgba(0,0,0,.30);
    --shadow-md:    0 8px 30px rgba(0,0,0,.40);
    --shadow-lg:    0 20px 60px rgba(0,0,0,.60);
  }
}

[data-theme="dark"] {
  --color-bg:            #000000;
  --color-bg-alt:        #161617;
  --color-surface:       rgba(255, 255, 255, 0.06);
  --color-surface-solid: #1c1c1e;
  --color-border:        rgba(255, 255, 255, 0.10);
  --color-border-solid:  #3a3a3c;
  --color-text:          #f5f5f7;
  --color-text-secondary:#a1a1a6;
  --color-text-tertiary: #6c6c70;
  --color-accent-glow:   rgba(0, 191, 165, 0.20);
  --color-accent-glow-strong: rgba(0, 191, 165, 0.35);
  --glass-bg:     rgba(28, 28, 30, 0.80);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --shadow-sm:    0 2px 8px rgba(0,0,0,.30);
  --shadow-md:    0 8px 30px rgba(0,0,0,.40);
  --shadow-lg:    0 20px 60px rgba(0,0,0,.60);
}

[data-theme="light"] {
  --color-bg:            #f5f5f7;
  --color-bg-alt:        #ffffff;
  --color-surface:       rgba(255, 255, 255, 0.72);
  --color-surface-solid: #ffffff;
  --color-border:        rgba(0, 0, 0, 0.08);
  --color-border-solid:  #d2d2d7;
  --color-text:          #1d1d1f;
  --color-text-secondary:#6e6e73;
  --color-text-tertiary: #aeaeb2;
  --color-accent-glow:   rgba(0, 191, 165, 0.30);
  --color-accent-glow-strong: rgba(0, 191, 165, 0.50);
  --glass-bg:     rgba(255, 255, 255, 0.75);
  --glass-border: 1px solid rgba(255, 255, 255, 0.60);
  --shadow-sm:   0 2px 8px rgba(0,0,0,.06);
  --shadow-md:   0 8px 30px rgba(0,0,0,.08);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.10);
}