/* ============================================================
   VENFLY · DESIGN TOKENS (v1)
   Three-tier architecture: Primitive → Semantic → Component
   Color space: OKLCH (perceptually uniform)
   Load BEFORE main.css.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. PRIMITIVE TOKENS — raw values, never used in components
   ──────────────────────────────────────────────────────────── */
:root {
  /* — Brand purple scale (anchor: oklch(66% 0.20 282) ≈ #8475ff, leve ajuste
       perceptual sobre el #7c6fff original para mejor contraste AA en dark) — */
  --p-purple-50:  oklch(96% 0.02 282);
  --p-purple-100: oklch(92% 0.05 282);
  --p-purple-200: oklch(85% 0.10 282);
  --p-purple-300: oklch(78% 0.15 282);
  --p-purple-400: oklch(72% 0.18 282);
  --p-purple-500: oklch(66% 0.20 282);   /* brand */
  --p-purple-600: oklch(58% 0.21 282);
  --p-purple-700: oklch(48% 0.19 282);
  --p-purple-800: oklch(38% 0.15 282);
  --p-purple-900: oklch(28% 0.10 282);

  /* — Channel brand colors (calibrados OKLCH para consistencia perceptual) — */
  --p-whatsapp:  oklch(72% 0.17 146);   /* #25d366 */
  --p-instagram: oklch(60% 0.21 0);     /* #e1306c */
  --p-facebook:  oklch(57% 0.21 254);   /* #1877f2 */

  /* — Neutral scale (dark-mode optimizada) — */
  --p-neutral-0:    oklch(100% 0 0);
  --p-neutral-50:   oklch(97% 0.005 280);
  --p-neutral-100:  oklch(92% 0.01 280);
  --p-neutral-200:  oklch(82% 0.015 280);
  --p-neutral-300:  oklch(68% 0.02 280);
  --p-neutral-400:  oklch(52% 0.025 280);
  --p-neutral-500:  oklch(40% 0.03 280);
  --p-neutral-600:  oklch(30% 0.025 280);
  --p-neutral-700:  oklch(22% 0.02 280);
  --p-neutral-800:  oklch(16% 0.018 280);
  --p-neutral-900:  oklch(11% 0.015 280);
  --p-neutral-950:  oklch(7% 0.012 280);

  /* — Status — */
  --p-success: oklch(72% 0.18 145);
  --p-warning: oklch(80% 0.15 75);
  --p-danger:  oklch(65% 0.22 25);
  --p-info:    oklch(78% 0.12 230);

  /* — Spacing scale (base 4px, geometric-ish) — */
  --p-space-0:  0;
  --p-space-1:  4px;     /* xs */
  --p-space-2:  8px;     /* sm */
  --p-space-3:  12px;
  --p-space-4:  16px;    /* md */
  --p-space-5:  20px;
  --p-space-6:  24px;    /* lg */
  --p-space-8:  32px;    /* xl */
  --p-space-10: 40px;
  --p-space-12: 48px;    /* 2xl */
  --p-space-16: 64px;    /* 3xl */
  --p-space-20: 80px;
  --p-space-24: 96px;    /* 4xl, secciones */
  --p-space-32: 128px;

  /* — Radius scale — */
  --p-radius-xs:   4px;
  --p-radius-sm:   8px;
  --p-radius-md:   12px;
  --p-radius-lg:   16px;
  --p-radius-xl:   24px;
  --p-radius-2xl:  32px;
  --p-radius-full: 9999px;

  /* — Typography scale (modular 1.125 desde 16px) — */
  --p-text-2xs: 0.6875rem;  /* 11px - labels micro */
  --p-text-xs:  0.75rem;    /* 12px */
  --p-text-sm:  0.875rem;   /* 14px */
  --p-text-md:  1rem;       /* 16px - body */
  --p-text-lg:  1.125rem;   /* 18px */
  --p-text-xl:  1.375rem;   /* 22px */
  --p-text-2xl: 1.75rem;    /* 28px */
  --p-text-3xl: 2.25rem;    /* 36px */
  --p-text-4xl: 3rem;       /* 48px */
  --p-text-5xl: clamp(2.25rem, 5vw, 3.75rem);  /* hero */

  /* — Line height — */
  --p-leading-tight:  1.15;
  --p-leading-snug:   1.3;
  --p-leading-normal: 1.5;
  --p-leading-loose:  1.7;

  /* — Letter spacing — */
  --p-tracking-tight:  -0.022em;
  --p-tracking-snug:   -0.012em;
  --p-tracking-normal: 0;
  --p-tracking-wide:   0.04em;

  /* — Font weight — */
  --p-weight-regular:  400;
  --p-weight-medium:   500;
  --p-weight-semibold: 600;
  --p-weight-bold:     700;
  --p-weight-extra:    800;

  /* — Blur scale (limita a 3 strategic uses) — */
  --p-blur-sm: 6px;
  --p-blur-md: 14px;
  --p-blur-lg: 24px;

  /* — Shadow scale — */
  --p-shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
  --p-shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --p-shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
  --p-shadow-xl: 0 24px 64px rgba(0,0,0,0.55);

  /* — Motion — */
  --p-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --p-ease-soft:   cubic-bezier(0.32, 0.72, 0, 1);
  --p-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --p-d-fast:  0.18s;
  --p-d-base:  0.28s;
  --p-d-slow:  0.42s;
}

/* ────────────────────────────────────────────────────────────
   2. SEMANTIC TOKENS — purpose-driven (dark theme default)
   ──────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --color-bg:               #08080e;                       /* preservado del original */
  --color-surface:          var(--p-neutral-800);
  --color-surface-raised:   var(--p-neutral-700);
  --color-surface-overlay:  oklch(16% 0.018 280 / 0.72);

  /* Text */
  --color-text:        oklch(94% 0.01 280);
  --color-text-muted:  oklch(62% 0.02 280);
  --color-text-dim:    oklch(40% 0.025 280);
  --color-text-on-accent: oklch(98% 0.005 280);

  /* Borders / hairlines */
  --color-border:         oklch(100% 0 0 / 0.06);
  --color-border-strong:  oklch(100% 0 0 / 0.12);
  --color-border-accent:  oklch(66% 0.20 282 / 0.35);

  /* Accent (brand) */
  --color-accent:         var(--p-purple-500);
  --color-accent-hover:   var(--p-purple-400);
  --color-accent-soft:    oklch(66% 0.20 282 / 0.12);
  --color-accent-glow:    oklch(66% 0.20 282 / 0.28);

  /* Channel */
  --color-whatsapp:  var(--p-whatsapp);
  --color-instagram: var(--p-instagram);
  --color-facebook:  var(--p-facebook);

  /* Status */
  --color-success: var(--p-success);
  --color-warning: var(--p-warning);
  --color-danger:  var(--p-danger);
  --color-info:    var(--p-info);

  /* Spacing aliases (semánticos) */
  --space-inline-xs: var(--p-space-2);    /* 8 — padding entre icon y texto */
  --space-inline-sm: var(--p-space-3);    /* 12 */
  --space-inline-md: var(--p-space-4);    /* 16 */
  --space-stack-xs:  var(--p-space-2);    /* 8 */
  --space-stack-sm:  var(--p-space-4);    /* 16 */
  --space-stack-md:  var(--p-space-6);    /* 24 */
  --space-stack-lg:  var(--p-space-12);   /* 48 */
  --space-section:   var(--p-space-24);   /* 96 — entre secciones */

  /* Radius semantic */
  --radius-control: var(--p-radius-sm);   /* inputs, mini-buttons */
  --radius-card:    var(--p-radius-lg);   /* 16 cards */
  --radius-panel:   var(--p-radius-xl);   /* 24 paneles grandes */
  --radius-pill:    var(--p-radius-full);

  /* Gradientes maestros (limitados a 3) */
  --gradient-brand: linear-gradient(135deg, oklch(78% 0.15 282) 0%, oklch(66% 0.20 282) 50%, oklch(48% 0.19 282) 100%);
  --gradient-surface: linear-gradient(180deg, oklch(16% 0.018 280) 0%, oklch(11% 0.015 280) 100%);
  --gradient-glow: radial-gradient(ellipse at center, oklch(66% 0.20 282 / 0.18), transparent 70%);
}

/* ────────────────────────────────────────────────────────────
   3. COMPONENT TOKENS — specific usage
   ──────────────────────────────────────────────────────────── */
:root {
  /* Buttons */
  --button-padding-x:    var(--p-space-6);
  --button-padding-y:    var(--p-space-3);
  --button-radius:       var(--p-radius-full);
  --button-text:         var(--p-text-md);
  --button-weight:       var(--p-weight-semibold);
  --button-bg:           var(--color-accent);
  --button-bg-hover:     var(--color-accent-hover);
  --button-glow:         0 8px 24px var(--color-accent-glow);

  --button-ghost-bg:     transparent;
  --button-ghost-border: var(--color-border-strong);

  /* Cards */
  --card-padding:    var(--p-space-6);
  --card-radius:     var(--radius-card);
  --card-bg:         var(--color-surface);
  --card-border:     1px solid var(--color-border);
  --card-shadow:     var(--p-shadow-md);
  --card-shadow-hover: var(--p-shadow-lg);

  /* Badges */
  --badge-padding-x: var(--p-space-3);
  --badge-padding-y: var(--p-space-1);
  --badge-radius:    var(--p-radius-full);
  --badge-text:      var(--p-text-xs);
  --badge-weight:    var(--p-weight-semibold);

  /* Inputs */
  --input-padding-x: var(--p-space-4);
  --input-padding-y: var(--p-space-3);
  --input-radius:    var(--p-radius-md);
  --input-bg:        var(--color-surface);
  --input-border:    1px solid var(--color-border);
  --input-border-focus: 1px solid var(--color-accent);

  /* Pricing card variants */
  --price-card-padding:    var(--p-space-8);
  --price-card-radius:     var(--radius-panel);
  --price-card-bg:         var(--color-surface);
  --price-card-bg-featured: linear-gradient(180deg, oklch(20% 0.04 282) 0%, oklch(13% 0.02 282) 100%);

  /* Trust bar (hero CTAs) */
  --trustbar-text:       var(--p-text-xs);
  --trustbar-color:      var(--color-text-muted);
  --trustbar-check-bg:   var(--color-accent-soft);
  --trustbar-check-color: var(--color-accent);
}

/* ────────────────────────────────────────────────────────────
   4. RESPONSIVE BREAKPOINTS (utility custom-media-ish)
   Estos no son ejecutables como vars en @media, sirven como
   referencia y para JS. Usa los valores literales en @media.
   ──────────────────────────────────────────────────────────── */
:root {
  --bp-xs:  20rem;    /* 320px — phones small */
  --bp-sm:  30rem;    /* 480px — phones */
  --bp-md:  40rem;    /* 640px — phablets */
  --bp-lg:  48rem;    /* 768px — tablets */
  --bp-xl:  64rem;    /* 1024px — laptops */
  --bp-2xl: 80rem;    /* 1280px — desktop */
}

/* ────────────────────────────────────────────────────────────
   5. BACKWARDS-COMPAT BRIDGE
   El main.css existente usa nombres legacy (--accent, --surface,
   etc.). Los mapeamos a los semánticos para no romper nada.
   ──────────────────────────────────────────────────────────── */
:root {
  --accent:       var(--color-accent);
  --accent-dim:   var(--color-accent-soft);
  --accent-hover: var(--color-accent-hover);
  --accent-glow:  var(--color-accent-glow);
  --bg:           var(--color-bg);
  --surface:      var(--color-surface);
  --surface2:     oklch(20% 0.02 280);
  --surface3:     var(--color-surface-raised);
  --border:       var(--color-border);
  --border-light: var(--color-border-strong);
  --text:         var(--color-text);
  --text-muted:   var(--color-text-muted);
  --text-dim:     var(--color-text-dim);
  --wa:           var(--color-whatsapp);
  --ig:           var(--color-instagram);
  --fb:           var(--color-facebook);
  --success:      var(--color-success);
  --warning:      var(--color-warning);
  --danger:       var(--color-danger);
  --info:         var(--color-info);
}

/* ────────────────────────────────────────────────────────────
   6. REDUCED MOTION
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --p-d-fast: 0s;
    --p-d-base: 0s;
    --p-d-slow: 0s;
  }
}

/* ============================================================
   iOS Foundation Tokens (Fase A — 2026-05-26)
   Estética estructural iOS. NO cambia colores de marca Venfly.
   Burbujas, accent y read-receipts siguen usando var(--accent)
   del tema activo (negro/blanco/rojo/azul).
   ============================================================ */
:root {
  /* — Tipografía iOS: scale + line-height + tracking — */
  --ios-text-large-title: 34px;  --ios-lh-large-title: 41px;  --ios-tk-large-title: -0.031em;
  --ios-text-title-1:     28px;  --ios-lh-title-1:     34px;  --ios-tk-title-1:     -0.028em;
  --ios-text-title-2:     22px;  --ios-lh-title-2:     28px;  --ios-tk-title-2:     -0.026em;
  --ios-text-title-3:     20px;  --ios-lh-title-3:     25px;  --ios-tk-title-3:     -0.030em;
  --ios-text-headline:    17px;  --ios-lh-headline:    22px;  --ios-tk-headline:    -0.022em;
  --ios-text-body:        17px;  --ios-lh-body:        22px;  --ios-tk-body:        -0.022em;
  --ios-text-callout:     16px;  --ios-lh-callout:     20px;  --ios-tk-callout:     -0.020em;
  --ios-text-subhead:     15px;  --ios-lh-subhead:     20px;  --ios-tk-subhead:     -0.016em;
  --ios-text-footnote:    13px;  --ios-lh-footnote:    18px;  --ios-tk-footnote:    -0.005em;
  --ios-text-caption-1:   12px;  --ios-lh-caption-1:   16px;  --ios-tk-caption-1:    0.001em;
  --ios-text-caption-2:   11px;  --ios-lh-caption-2:   13px;  --ios-tk-caption-2:    0.005em;

  /* — Font weights iOS — */
  --ios-fw-regular: 400;
  --ios-fw-medium: 500;
  --ios-fw-semibold: 600;
  --ios-fw-bold: 700;

  /* — Motion iOS (curva spring oficial) — */
  --ios-ease: cubic-bezier(.32, .72, 0, 1);
  --ios-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ios-ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ios-duration-fast: 150ms;
  --ios-duration-normal: 250ms;
  --ios-duration-slow: 350ms;

  /* — Backdrop blur layers (iOS frosted glass) — */
  --ios-blur-nav: blur(20px) saturate(180%);
  --ios-blur-composer: blur(20px) saturate(180%);
  --ios-blur-tabbar: blur(20px) saturate(180%);

  /* — Radius iOS (forma) — */
  --ios-r-bubble: 18px;
  --ios-r-bubble-tail: 6px;
  --ios-r-pill: 18px;
  --ios-r-card: 12px;
  --ios-r-button: 10px;

  /* — Touch target iOS — */
  --ios-touch-target: 44px;

  /* — Sombras iOS-light (max 12% opacity) — */
  --ios-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ios-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --ios-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --ios-shadow-bubble: 0 1px 0.5px rgba(0, 0, 0, 0.06);

  /* — Surfaces translúcidas iOS (mezclan con tema activo via color-mix) — */
  --ios-nav-bg: color-mix(in srgb, var(--bg) 88%, transparent);
  --ios-composer-bg: color-mix(in srgb, var(--bg) 94%, transparent);
  --ios-tabbar-bg: color-mix(in srgb, var(--bg) 88%, transparent);

  /* — Hairline separator iOS (sutil, no 1px solid duro) — */
  --ios-hairline: 0.5px solid var(--border);
}