/* ============================================================
   variables.css — Design tokens
   ============================================================ */
:root {
  /* ---- Colors ---- */
  --color-bg:            #09090B;
  --color-bg-elevated:   #111113;
  --color-bg-surface:    rgba(255,255,255,0.03);
  --color-bg-surface-hover: rgba(255,255,255,0.05);

  --color-text:          #F0F0F2;
  --color-text-secondary: #8A8F98;
  --color-text-tertiary:  rgba(255,255,255,0.35);
  --color-text-muted:     rgba(255,255,255,0.20);

  --color-border:        rgba(255,255,255,0.06);
  --color-border-subtle: rgba(255,255,255,0.04);
  --color-border-hover:  rgba(255,255,255,0.12);

  --color-accent:        #E8E8ED;
  --color-accent-dim:    rgba(255,255,255,0.06);
  --color-accent-text:   rgba(255,255,255,0.70);

  /* Glow colors per section */
  --glow-hero:           rgba(124,92,252,0.06);
  --glow-demo:           rgba(99,60,220,0.08);
  --glow-feature-a:      rgba(80,160,255,0.06);
  --glow-feature-b:      rgba(124,92,252,0.06);
  --glow-feature-c:      rgba(40,200,120,0.05);
  --glow-pricing:        rgba(124,92,252,0.05);

  /* ---- macOS Mockup Colors ---- */
  --mockup-bg:           #1a1a1e;
  --mockup-titlebar:     #28282c;
  --mockup-red:          #ff5f57;
  --mockup-yellow:       #febc2e;
  --mockup-green:        #28c840;

  /* ---- Overlay Colors (from OverlayManager.swift sharedHead) ---- */
  --overlay-bg:          rgba(18,18,20,0.95); /* 0.50 in app, solid for web */
  --overlay-text:        #f0f0f2;
  --overlay-text-dim:    rgba(255,255,255,0.28);
  --overlay-subtle-bg:   rgba(255,255,255,0.08);
  --overlay-subtle-border: rgba(255,255,255,0.15);
  --overlay-code-bg:     rgba(0,0,0,0.3);
  --overlay-code-inline: rgba(255,255,255,0.08);
  --overlay-link:        #6cb4ff;

  /* ---- Typography ---- */
  --font-display:  'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:     'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
  /* Overlay uses system font stack exactly as in Swift source */
  --font-overlay:  -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  40px;
  --text-5xl:  52px;
  --text-6xl:  64px;
  --text-hero: clamp(52px, 8vw, 80px);

  /* ---- Spacing ---- */
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;
  --space-5xl:  128px;
  --space-section: clamp(96px, 12vw, 160px);

  /* ---- Layout ---- */
  --max-width:  1200px;
  --nav-height: 64px;

  /* ---- Z-index scale ---- */
  --z-base:     1;
  --z-above:    10;
  --z-nav:      100;
  --z-overlay:  200;
  --z-modal:    300;

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.6s;

  /* ---- Radius ---- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-full: 9999px;
}