/* ============================================
   SPECTRUM FLARE — design tokens
   Black-first. #1414fa accent. Used sparingly.
   Mirrors `Spectrum Flare Design System/colors_and_type.css`.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* ===== CORE PALETTE ===== */
  --black: #000000;
  --ink: #0A0A0A;
  --ink-1: #141414;
  --ink-2: #1F1F1F;
  --ink-3: #2A2A2A;
  --white: #FFFFFF;
  --bone: #F5F5F5;

  /* ===== ACCENT =====
     Brightened from the design system's #1414FA → #3B3BFF for legibility on pure black.
     The reference token (#1414FA) was too low-contrast for display copy. */
  --flare: #3B3BFF;
  --flare-hover: #5C5CFF;
  --flare-press: #1E1EE0;
  --flare-glow: rgba(59, 59, 255, 0.45);
  --flare-wash: rgba(59, 59, 255, 0.10);

  /* ===== TEXT (on black) ===== */
  --text-strong: rgba(255, 255, 255, 1);
  --text-body:   rgba(255, 255, 255, 0.78);
  --text-muted:  rgba(255, 255, 255, 0.56);
  --text-subtle: rgba(255, 255, 255, 0.36);

  /* ===== TEXT (on white — rare) ===== */
  --text-strong-on-light: rgba(0, 0, 0, 0.92);
  --text-body-on-light:   rgba(0, 0, 0, 0.68);
  --text-muted-on-light:  rgba(0, 0, 0, 0.48);

  /* ===== BORDERS ===== */
  --border-hair: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-flare: rgba(59, 59, 255, 0.5);

  /* ===== SEMANTIC ===== */
  --success: #00E27A;
  --danger:  #FF3B5C;
  --warning: #FFB020;

  /* ===== TYPE ===== */
  --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --display-xl: clamp(2.5rem, 9vw, 7rem);    /* hero — scales harder on mobile */
  --display-lg: clamp(2rem, 6.5vw, 5rem);
  --display-md: clamp(1.75rem, 5vw, 3.5rem);
  --display-sm: clamp(1.5rem, 3.2vw, 2.25rem);

  --heading-lg: 1.5rem;
  --heading-md: 1.25rem;
  --body-lg: 1.125rem;
  --body: 1rem;
  --body-sm: 0.9375rem;
  --caption: 0.875rem;
  --eyebrow: 0.75rem;
  --micro: 0.6875rem;

  --track-display: -0.02em;
  --track-body: 0;
  --track-eyebrow: 0.16em;
  --track-button: 0.04em;
  --track-caps: 0.08em;

  --lh-display: 0.95;
  --lh-tight: 1.15;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  /* ===== SPACING (4px base) ===== */
  --s-3xs: 0.25rem;
  --s-2xs: 0.5rem;
  --s-xs:  0.75rem;
  --s-sm:  1rem;
  --s-md:  1.5rem;
  --s-lg:  2rem;
  --s-xl:  3rem;
  --s-2xl: 4rem;
  --s-3xl: 6rem;
  --s-4xl: 8rem;

  --section-pad-y: clamp(4rem, 8vw, 7rem);

  /* ===== RADII ===== */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 40px;
  --r-full: 9999px;

  /* ===== ELEVATION ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.7);
  --shadow-flare: 0 0 0 1px var(--flare), 0 12px 40px var(--flare-glow);
  --shadow-flare-soft: 0 8px 32px rgba(59, 59, 255, 0.22);
  --shadow-focus-ring: 0 0 0 3px rgba(59, 59, 255, 0.35);

  /* ===== AMBIENT LENS ACCENTS ===== */
  --lens-accent-tr: radial-gradient(ellipse 60% 40% at 85% 15%, rgba(59, 59, 255, 0.20), transparent 60%);
  --lens-accent-bl: radial-gradient(ellipse 50% 35% at 15% 90%, rgba(59, 59, 255, 0.16), transparent 60%);
  --lens-accent-cool-tr: radial-gradient(ellipse 50% 35% at 90% 10%, rgba(255, 255, 255, 0.06), transparent 65%);

  /* ===== TRANSITIONS ===== */
  --t-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== LAYOUT ===== */
  --container-narrow: 960px;
  --container: 1280px;
  --container-wide: 1440px;
}