/* ==========================================================================
   fudidate — design tokens
   Values taken from the Figma file "fudidate-v2" (variables + sampled frames).
   Dark-only brand: plum ink, brand-red/brand-pink CTA, violet controls.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Ink / surfaces (sampled from the Figma frames) --- */
  --ink-950: #0a0512;
  --ink-900: #0f0717;   /* sheet / screen background */
  --ink-850: #140b1f;
  --ink-800: #1b1423;   /* chip, inactive control */
  --ink-700: #241a30;

  --surface-1: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-3: rgba(255, 255, 255, 0.09);
  --surface-sheet: rgba(21, 14, 34, 0.82);

  --line-1: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.22);

  /* --- Brand (Figma variables) --- */
  --coral-600: #e00034;
  --coral-500: #ff083e;   /* brand-red */
  --coral-400: #ff5b69;   /* brand-pink */
  --coral-300: #ff8d97;
  --violet-500: #8c72c7;  /* active filter chip */
  --violet-400: #a892dc;
  --magenta-500: #a01f7a;
  --plum-700: #3a1440;

  --grad-coral: linear-gradient(90deg, #ff5b69 0%, #ff083e 100%);
  --grad-coral-hover: linear-gradient(90deg, #ff6f7c 0%, #ff2451 100%);
  --grad-violet: linear-gradient(90deg, #a892dc 0%, #7a5cbd 100%);
  --grad-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));

  /* --- Text --- */
  --text-1: #ffffff;
  --text-2: #c8c0d6;
  --text-3: #9a91ab;
  --text-4: #6f677e;

  /* --- Radii --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-3xl: 48px;
  --r-pill: 999px;

  /* --- Shadow / glow --- */
  --sh-card: 0 24px 60px -24px rgba(0, 0, 0, 0.9);
  --sh-lift: 0 40px 90px -30px rgba(0, 0, 0, 0.95);
  --glow-coral: 0 18px 44px -14px rgba(255, 8, 62, 0.5);
  --glow-violet: 0 18px 44px -16px rgba(140, 114, 199, 0.5);

  /* --- Type --- */
  /* Design uses ITC Avant Garde Gothic Demi + Helvetica. Both are licensed /
     platform fonts, so the stack degrades to the closest web equivalents:
     Outfit (geometric, Avant Garde-like) and Inter. */
  --font-display: "ITC Avant Garde Gothic Demi", "ITC Avant Garde Gothic", "Outfit", "Figtree", -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Helvetica Neue", "Helvetica", "Inter", system-ui, Arial, sans-serif;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.1rem, 1.03rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.25rem, 1.7rem + 2.6vw, 3.8rem);
  --step-5: clamp(2.9rem, 1.9rem + 4.8vw, 6rem);

  /* --- Layout --- */
  --shell: 1200px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);
  --section-y: clamp(4rem, 2.6rem + 5.2vw, 7.5rem);
}