/* ============================================
   SPIRE LIGHT — DESIGN TOKENS
   Premium dark-theme speech data vendor
   ============================================ */

:root {
  /* ── Color System ── */
  
  /* Primary backgrounds */
  --bg-deepest:    #f4f7fb;
  --bg-deep:       #ffffff;
  --bg-section:    #f8fafc;
  --bg-card:       #ffffff;
  --bg-card-hover: #f1f5f9;
  
  /* Ambient Shading Backgrounds */
  --bg-ambient-light: radial-gradient(circle at top right, rgba(56, 182, 255, 0.05), transparent 40%),
                      radial-gradient(circle at bottom left, rgba(20, 184, 166, 0.03), transparent 40%),
                      #ffffff;
  --bg-ambient-alt:   radial-gradient(circle at top left, rgba(56, 182, 255, 0.04), transparent 50%),
                      radial-gradient(circle at bottom right, rgba(56, 182, 255, 0.04), transparent 50%),
                      #f8fafc;
  
  /* Accent — Spire Light cyan-blue */
  --accent:        #38b6ff;
  --accent-bright: #1da4f5;
  --accent-dim:    #7bcaff;
  --accent-glow:   rgba(56, 182, 255, 0.15);
  --accent-subtle: rgba(56, 182, 255, 0.08);
  
  /* Secondary */
  --secondary:     #0f172a;
  --teal:          #14b8a6;
  --teal-dim:      rgba(20, 184, 166, 0.15);
  
  /* Text */
  --text-white:    #ffffff; /* keep for buttons */
  --text-heading:  #0f172a;
  --text-body:     #334155;
  --text-muted:    #64748b;
  --text-dim:      #94a3b8;
  
  /* Borders & surfaces */
  --border-subtle:  #e2e8f0;
  --border-light:   #cbd5e1;
  --border-accent:  rgba(56, 182, 255, 0.3);
  --glass-bg:       rgba(255, 255, 255, 0.90);
  --glass-border:   #e2e8f0;
  
  /* ── Typography ── */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  
  --fs-hero:    clamp(2.5rem, 5vw, 4.5rem);
  --fs-h1:      clamp(2rem, 4vw, 3.5rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.75rem);
  --fs-h4:      1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-xs:      0.75rem;
  --fs-mono:    0.8125rem;
  
  --lh-tight:   1.2;
  --lh-heading: 1.3;
  --lh-body:    1.7;
  
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  
  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-caps:     0.1em;
  
  /* ── Spacing (8px grid) ── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  2.5rem;    /* 40px */
  --space-8:  3rem;      /* 48px */
  --space-9:  4rem;      /* 64px */
  --space-10: 5rem;      /* 80px */
  --space-11: 6rem;      /* 96px */
  --space-12: 8rem;      /* 128px */
  
  /* ── Borders & Radius ── */
  --radius-sm:  0px;
  --radius-md:  0px;
  --radius-lg:  0px;
  --radius-xl:  0px;
  --radius-full: 0px;
  
  /* ── Shadows ── */
  --shadow-card:     0 4px 24px rgba(0, 0, 0, 0.05);
  --shadow-card-lg:  0 8px 40px rgba(0, 0, 0, 0.08);
  --shadow-glow:     0 0 30px var(--accent-glow);
  --shadow-glow-sm:  0 0 15px rgba(56, 182, 255, 0.15);
  
  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-normal:  300ms;
  --dur-slow:    500ms;
  --dur-slower:  800ms;
  
  /* ── Layout ── */
  --container-max:  1200px;
  --container-wide: 1400px;
  --header-height:  72px;
}