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

:root {
  /* ---------- Surfaces ----------
     Pure-black base. Every surface above the background is translucent and
     blurred: no element is ever fully opaque. */
  --bg-950: #000000;
  --bg-900: #040404;
  --bg-800: #080808;
  --bg-700: #0d0d0d;

  /* Translucent surfaces (always < 1 alpha, pair with --blur-*) */
  --surface-1: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.055);
  --surface-3: rgba(255, 255, 255, 0.08);
  --surface-glass: rgba(10, 10, 12, 0.55);
  --surface-glass-strong: rgba(10, 10, 12, 0.72);
  --surface-violet: rgba(59, 130, 246, 0.12);
  --surface-violet-strong: rgba(59, 130, 246, 0.2);

  --border-subtle: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-violet: rgba(59, 130, 246, 0.35);

  /* ---------- Blur ---------- */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 28px;

  /* ---------- Text (white-first, never pure-opaque greys) ---------- */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-tertiary: rgba(255, 255, 255, 0.5);
  --text-inverse: #000000;

  /* ---------- Accents ----------
     Violet-only palette. Legacy variable names kept for downstream
     compatibility so no rule breaks. */
  --accent-cyan: #3b82f6;
  --accent-cyan-strong: #60a5fa;
  --accent-blue: #2563eb;
  --accent-blue-strong: #3b82f6;
  --accent-violet: #1d4ed8;
  --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --accent-gradient-soft: linear-gradient(180deg, rgba(59, 130, 246, 0.16) 0%, rgba(37, 99, 235, 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: "Montserrat", "Segoe UI", sans-serif;
  --font-body: "Montserrat", "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 ----------
     Single 8px radius across the whole UI. Only genuinely circular
     elements (dots, icon circles) use 50% directly. */
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-pill: 8px;
  --radius-circle: 50%;

  /* ---------- 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(59, 130, 246, 0.22), 0 0 40px rgba(59, 130, 246, 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;
  }
}