/* =========================================================================
   TOKENS — Design System (FunnelsLab 2.0 + Liquid Glass + Stitch Taste)
   Single source of truth for colors, typography, motion, surfaces.

   Strategic override note:
   "AI Purple ban" (taste-design skill) is OVERRIDDEN — brand identity is
   purple #391793 (Morado Dominante). Inter ban also overridden historically,
   but upgraded to Outfit per the skill's preferred alternatives.
   ========================================================================= */

:root {
  /* ----- Brand palette (locked) ---------------------------------------- */
  --primary: #391793;          /* Morado dominante — pilar visual de marca */
  --primary-700: #2E1275;      /* Hover profundo */
  --primary-300: #7A5BC8;      /* Tinte claro para acentos suaves */
  --primary-glow: rgba(57, 23, 147, 0.32);

  --yellow: #FBBB41;           /* Secundario — atención amigable, highlights, iconos */
  --magenta: #981255;          /* Acento ocasional (uso limitado) */
  --pink: #F71E53;             /* Color de Acción Exclusiva — CTAs, enlaces */
  --pink-700: #C4093D;         /* Hover profundo del rosa */
  --pink-glow: rgba(247, 30, 83, 0.40);
  --orange: #F7581F;           /* Acento ocasional (uso limitado) */
  --green: #10B981;            /* Success / checks */

  /* ----- Semantic accent aliases (single source of truth) -------------- */
  --accent-cta: var(--pink);       /* All conversion buttons / links */
  --accent-warm: var(--yellow);    /* Highlights, icons, friendly accents */

  /* ----- Neutrals (warm-neutral canvas, faithful to brand brief) ------- */
  --white: #FFFFFF;
  --gray-bg: #F8F9FA;          /* Crema claro neutro de apoyo (was #F6F5FB) */
  --gray-light: #ECEAF5;
  --gray-200: #E0DDEF;
  --text-secondary: #5B5A78;
  --text-dark: #1A1530;        /* Off-black tintado en morado (never #000) */
  --text-soft: #2A2545;

  /* ----- Typography ---------------------------------------------------- */
  /* Outfit: characterful sans, characterful enough to override Inter ban */
  --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --fw-extra: 900;

  --tracking-tight: -0.025em;
  --tracking-tighter: -0.045em;
  --tracking-wide: 0.06em;
  --tracking-widest: 0.18em;

  /* Fluid type scale — mobile-first clamp(min, preferred, max) */
  --fs-eyebrow: 0.75rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 0.5rem + 1.6vw, 1.375rem);
  --fs-h3: clamp(1.375rem, 1rem + 1.6vw, 1.875rem);
  --fs-h2: clamp(2rem, 1.2rem + 3vw, 3rem);
  --fs-h1: clamp(2.375rem, 1.4rem + 4.2vw, 4rem);
  --fs-display: clamp(2.75rem, 1.5rem + 5.5vw, 5.25rem);
  --fs-price: clamp(3rem, 2rem + 4vw, 4.5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  /* ----- Radii (consistency lock) -------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ----- Shadows (tinted with brand purple, no pure black) ------------- */
  /* Whisper tier (taste-design skill) — for flat / non-elevated surfaces */
  --shadow-xs: 0 1px 2px rgba(57, 23, 147, 0.03);
  --shadow-sm: 0 2px 8px -2px rgba(57, 23, 147, 0.06);  /* whisper */
  /* Elevated tier */
  --shadow-md: 0 10px 24px -6px rgba(57, 23, 147, 0.10);
  --shadow-lg: 0 24px 48px -12px rgba(57, 23, 147, 0.16);
  --shadow-xl: 0 40px 80px -20px rgba(57, 23, 147, 0.26);
  --shadow-glass: 0 8px 32px -8px rgba(57, 23, 147, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  /* CTA tier — tinted in pink (--accent-cta), not purple */
  --shadow-btn: 0 12px 24px -6px rgba(247, 30, 83, 0.35);
  --shadow-btn-hover: 0 18px 36px -8px rgba(247, 30, 83, 0.50);

  /* ----- Liquid glass surfaces ----------------------------------------- */
  --glass-blur: 24px;
  --glass-blur-mobile: 14px;
  --glass-saturate: 180%;
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.7);
  --glass-bg-soft: rgba(255, 255, 255, 0.35);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-border-inner: rgba(255, 255, 255, 0.9);
  --glass-highlight: rgba(255, 255, 255, 0.85);

  --glass-dark-bg: rgba(26, 21, 48, 0.55);
  --glass-dark-border: rgba(255, 255, 255, 0.12);

  /* ----- Aurora background blobs (magenta reduced per palette brief) --- */
  --aurora-1: rgba(57, 23, 147, 0.42);   /* primary purple (dominant) */
  --aurora-2: rgba(152, 18, 85, 0.22);   /* magenta reduced (was 0.35) */
  --aurora-3: rgba(247, 88, 31, 0.15);   /* orange reduced (was 0.22) */
  --aurora-4: rgba(122, 91, 200, 0.28);  /* primary-300 */

  /* ----- Layout -------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-wide: 1320px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --section-pad-y: clamp(4rem, 2rem + 8vw, 8rem);

  /* ----- Motion (spring physics premium per taste-design skill) -------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* spring overshoot */
  --ease-spring-soft: cubic-bezier(0.34, 1.32, 0.64, 1);
  --transition-fast: 180ms var(--ease-out);
  --transition: 240ms var(--ease-out);   /* was 320ms — weightier premium */
  --transition-slow: 600ms var(--ease-out);

  /* ----- Z-index scale ------------------------------------------------- */
  --z-bg: 0;
  --z-base: 1;
  --z-glass: 10;
  --z-sticky: 100;
  --z-nav: 500;
  --z-overlay: 900;
}

/* Respect users who prefer less transparency / motion */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-bg-strong: rgba(255, 255, 255, 0.98);
    --glass-bg-soft: rgba(255, 255, 255, 0.92);
    --glass-dark-bg: rgba(26, 21, 48, 0.95);
  }
}