:root {
  /* Surfaces — near-black, layered */
  --color-bg: #050507;
  --color-bg-elevated: #0a0a0d;
  --color-bg-subtle: #101014;
  --color-surface: rgba(255, 255, 255, 0.03);
  --color-surface-hover: rgba(255, 255, 255, 0.055);
  --color-surface-strong: rgba(255, 255, 255, 0.075);
  --color-glass: rgba(12, 12, 16, 0.65);
  --color-glass-strong: rgba(10, 10, 14, 0.82);

  /* Borders */
  --color-border: rgba(255, 255, 255, 0.075);
  --color-border-hover: rgba(255, 255, 255, 0.14);
  --color-border-strong: rgba(255, 255, 255, 0.2);

  /* Text — Apple/Linear greys */
  --color-text: #f4f4f5;
  --color-text-secondary: rgba(244, 244, 245, 0.64);
  --color-text-muted: rgba(244, 244, 245, 0.4);

  /* Accent — soft emerald, contrasts logo magenta */
  --color-accent: #3ddc97;
  --color-accent-soft: rgba(61, 220, 151, 0.12);
  --color-accent-glow: rgba(61, 220, 151, 0.22);
  --color-accent-hover: #5ae5a9;
  --color-accent-deep: #22c47e;
  --color-link: #3ddc97;
  --color-success: #3ddc97;
  --color-white: #ffffff;
  --color-black: #050507;

  /* Brand — hot pink / power from logo */
  --color-brand: #e8457a;
  --color-brand-soft: rgba(232, 69, 122, 0.14);
  --color-brand-glow: rgba(232, 69, 122, 0.35);
  --color-brand-bright: #ff4d8d;

  /* Typography — Geist = Vercel DNA */
  --font-sans: "Geist", "Geist Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-mascot: "Comfortaa", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.875rem, 3.6vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 5vw, 3.5rem);
  --text-hero: clamp(2.75rem, 6.2vw, 4.75rem);

  --leading-tight: 1.02;
  --leading-snug: 1.4;
  --leading-normal: 1.55;
  --tracking-tight: -0.035em;
  --tracking-display: -0.045em;
  --tracking-wide: 0.12em;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --section-space: clamp(5.5rem, 11vw, 8.5rem);

  --container-max: 1120px;
  --container-wide: 1240px;
  --container-padding: 1.5rem;
  --navbar-height: 80px;
  --navbar-offset: 0px;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 80px var(--color-accent-glow);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.15, 0.64, 1);
  --duration-fast: 160ms;
  --duration-normal: 280ms;
  --duration-slow: 480ms;
  --duration-slower: 720ms;

  --z-progress: 120;
  --z-navbar: 100;
  --z-overlay: 90;
  --z-modal: 110;
  --z-float: 50;
}

@media (min-width: 768px) {
  :root {
    --container-padding: 2rem;
    --navbar-height: 92px;
    --navbar-offset: 18px;
  }
}

@media (min-width: 1200px) {
  :root {
    --container-max: 1160px;
    --container-wide: 1280px;
  }
}