/* ==========================================================================
   FEEDER — DESIGN TOKENS
   Single source of truth for color, type, spacing and motion values.
   ========================================================================== */

:root {
  /* ---------- Surfaces ----------
     Dark-neutral system: background / surface / card, per brand spec. */
  --bg-950: #090909;
  --bg-900: #0c0c0c;
  --bg-800: #111111;
  --bg-700: #161616;
  --surface-1: rgba(255, 255, 255, 0.025);
  --surface-2: rgba(255, 255, 255, 0.045);
  --surface-glass: rgba(17, 17, 17, 0.5);
  --surface-glass-strong: rgba(17, 17, 17, 0.75);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* ---------- Text ---------- */
  --text-primary: #ffffff;
  --text-secondary: #b5b5b5;
  --text-tertiary: #767676;
  --text-inverse: #090909;

  /* ---------- Accents ----------
     Premium violet system. Legacy variable names kept for downstream
     compatibility; values repurposed to the violet-only palette (no blue). */
  --accent-cyan: #a855f7;
  --accent-cyan-strong: #c084fc;
  --accent-blue: #7c3aed;
  --accent-blue-strong: #9061f9;
  --accent-violet: #8b5cf6;
  --accent-gradient: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  --accent-gradient-soft: linear-gradient(180deg, rgba(139, 92, 246, 0.16) 0%, rgba(124, 58, 237, 0.05) 100%);

  /* ---------- Feedback ---------- */
  --success: #35d399;
  --success-bg: rgba(53, 211, 153, 0.1);
  --danger: #f7685b;
  --danger-bg: rgba(247, 104, 91, 0.1);

  /* ---------- Typography ---------- */
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.75rem;
  --fs-5xl: 4.75rem;
  --fs-6xl: 6rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;

  --ls-tight: -0.03em;
  --ls-normal: -0.01em;
  --ls-wide: 0.08em;
  --ls-wider: 0.18em;

  /* ---------- Spacing scale (8px base) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8.5rem;

  /* ---------- Radius ---------- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---------- Shadows (neutral, layered) ---------- */
  --shadow-sm: 0px 2px 3px -1px rgba(0, 0, 0, 0.30), 0px 1px 0px 0px rgba(255, 255, 255, 0.02), 0px 0px 0px 1px rgba(255, 255, 255, 0.05);
  --shadow-md: 0px 1px 1px -0.5px rgba(0, 0, 0, 0.3), 0px 3px 3px -1.5px rgba(0, 0, 0, 0.3), 0px 6px 6px -3px rgba(0, 0, 0, 0.3), 0px 12px 12px -6px rgba(0, 0, 0, 0.28), 0px 24px 24px -12px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 12.5px 10px rgba(0, 0, 0, 0.18), 0 22.3px 17.9px rgba(0, 0, 0, 0.2), 0 41.8px 33.4px rgba(0, 0, 0, 0.24), 0 100px 80px rgba(0, 0, 0, 0.32);
  --glow-cyan: 0 0 0 1px rgba(168, 85, 247, 0.22), 0 0 40px rgba(168, 85, 247, 0.1);

  /* ---------- Motion ---------- */
  --ease-out: power3.out;
  --ease-out-strong: power4.out;
  --dur-micro: 0.18s;
  --dur-fast: 0.32s;
  --dur-normal: 0.6s;
  --dur-slow: 0.95s;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-h: 84px;
}

/* Fluid type overrides for hero-scale headings */
@media (min-width: 1600px) {
  :root {
    --fs-6xl: 7.5rem;
    --fs-5xl: 5.75rem;
  }
}