:root {
  /* ─── Colors ───────────────────────────────────────────────── */
  --bg-deep:       #050507;          /* hero / page base */
  --bg-dark:       #0A0A0B;
  --bg-card-dark:  #111114;          /* cards on dark */
  --bg-elevated:   #18181C;          /* elevated elements */
  --bg-light:      #F5F5F7;
  --bg-section:    #FFFFFF;
  --text-primary:  #1A1A1F;
  --text-on-dark:  #F5F5F7;
  --text-muted:    #8B8B92;
  --accent:        #00c7d1;
  --accent-hover:  #00b3bd;
  --accent-pressed: #009ba3;
  --accent-soft:   rgba(0, 199, 209, 0.1);
  --accent-glow:   rgba(0, 199, 209, 0.45);
  --accent-grad-from: #00c7d1;
  --accent-grad-to: #008b94;
  --border-light:  rgba(0, 0, 0, 0.08);
  --border-dark:   rgba(255, 255, 255, 0.08);
  --success:       #00C48C;
  --danger:        #FF4757;

  /* ─── Gradients ─────────────────────────────────────────────── */
  --gradient-hero: radial-gradient(ellipse at center top, rgba(0, 199, 209, 0.15), transparent 60%);
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));

  /* ─── Effects ───────────────────────────────────────────────── */
  --blur-glass: blur(20px) saturate(180%);

  /* ─── Typography ───────────────────────────────────────────── */
  --font-heading: 'Geist', system-ui, -apple-system, sans-serif;
  --font-body:    'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-h1:    clamp(2rem, 5vw, 3.5rem); /* ~32px to 56px */
  --fs-h2:    clamp(2rem, 4vw, 3rem);
  --fs-h3:    clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;

  /* Letter-spacing for tech-look */
  --ls-tight:  -0.04em;   /* large headings */
  --ls-normal: -0.01em;   /* body text */
  --ls-wide:    0.08em;   /* UPPERCASE micro-text */

  /* ─── Spacing ──────────────────────────────────────────────── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 5rem;

  /* ─── Border Radii ─────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  /* ─── Shadows ──────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);

  /* ─── Container ─────────────────────────────────────────────── */
  --container-max:     1280px;
  --container-padding: clamp(1rem, 4vw, 2rem);

  /* ─── Transitions ───────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-premium:      cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Z-index scale ─────────────────────────────────────────── */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;

  /* ─── Navbar ────────────────────────────────────────────────── */
  --navbar-height: 72px;
}