/* ==========================================================================
   HYPERFORMICS — DESIGN TOKENS
   Every color, blur, shadow, spacing and type value the site uses lives here.
   ========================================================================== */

:root {
  /* ---- Brand hues — the ONLY 4 hues anywhere on this page ---- */
  --c-primary: #B747B8;
  --c-secondary: #6D28D9;
  --c-support: #4F46E5;
  --c-bg: #0F172A;

  /* ---- Tinted-slate neutrals (derived from --c-bg, never pure gray) ---- */
  --c-bg-1: #0F172A;
  --c-bg-2: #141B33;
  --c-bg-3: #1A2340;
  --c-bg-4: #212B4D;
  --c-text-1: #F1F5F9;
  --c-text-2: #99A3C2;
  --c-text-3: #6B7494;
  --c-border-hairline: rgba(226, 232, 255, 0.08);

  /* ---- Gradients — built only from the 3 accent hues, fixed 135deg ---- */
  --grad-primary: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
  --grad-full: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 55%, var(--c-support) 100%);
  --grad-text: linear-gradient(135deg, #F0A8F2 0%, var(--c-primary) 45%, var(--c-secondary) 100%);
  --grad-radial-glow: radial-gradient(circle, rgba(183, 71, 184, 0.35) 0%, rgba(109, 40, 217, 0.12) 45%, transparent 75%);

  /* ---- Glass surfaces — 3 elevation tiers ---- */
  --glass-1: rgba(241, 245, 255, 0.035);
  --glass-2: rgba(241, 245, 255, 0.065);
  --glass-3: rgba(241, 245, 255, 0.10);
  --glass-tint-primary: rgba(183, 71, 184, 0.09);
  --glass-tint-secondary: rgba(109, 40, 217, 0.09);

  --glass-border: rgba(241, 245, 255, 0.12);
  --glass-border-hover: rgba(241, 245, 255, 0.22);
  --glass-border-glow: rgba(183, 71, 184, 0.45);

  /* ---- Blur tiers ---- */
  --blur-sm: blur(12px) saturate(150%);
  --blur-md: blur(20px) saturate(180%);
  --blur-lg: blur(32px) saturate(200%);

  /* ---- Shadow / glow recipes ---- */
  --shadow-card: 0 8px 32px rgba(2, 4, 12, 0.45);
  --shadow-card-hover: 0 20px 56px rgba(2, 4, 12, 0.55);
  --glow-primary: 0 0 40px rgba(183, 71, 184, 0.28);
  --glow-secondary: 0 0 40px rgba(109, 40, 217, 0.28);
  --glow-support: 0 0 40px rgba(79, 70, 229, 0.28);
  --glow-primary-strong: 0 0 90px rgba(183, 71, 184, 0.42);
  --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --shadow-glass-default: var(--shadow-card), var(--inset-highlight);
  --shadow-glass-hover: var(--shadow-card-hover), var(--glow-primary), inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* ---- Spacing scale — generous, Apple/Linear/Stripe proportions ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;
  --space-7: 8rem;
  --space-8: 12rem;
  --space-9: 16rem;

  --content-max: 1280px;
  --content-wide: 1440px;
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --section-pad-y: clamp(5rem, 12vw, 12rem);

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  --fs-hero: clamp(2.5rem, 5vw + 1rem, 5.5rem);
  --fs-h1: clamp(2.25rem, 4vw + 1rem, 4rem);
  --fs-h2: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
  --fs-h3: clamp(1.125rem, 1vw + 0.5rem, 1.375rem);
  --fs-body-lg: clamp(1.0625rem, 0.5vw + 0.9rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.08em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---- Motion ---- */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-base: 0.5s;
  --dur-slow: 0.9s;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --z-nav: 500;
  --z-modal: 900;
}