/*! TLV2 — tokens.css (Phase B 100%) · Consolidado D2
   - Única fuente de tokens (sin selectores)
   - Colores en OKLCH con fallbacks sRGB puntuales (accent/muted)
   - Tipografías fluidas con clamp(), espaciados, radios, sombras, motion, z-index
*/

:root{
  /* ===== Colores base (OKLCH) ============================================ */
  /* Superficies */
  --color-surface-0: oklch(1 0 0);           /* blanco */
  --color-surface-1: oklch(0.98 0 0);        /* muy claro */
  --color-surface-2: oklch(0.94 0 0);        /* claro */
  --color-surface-3: oklch(0.90 0 0);        /* sutil panel */

  /* Texto */
  --color-text-0: oklch(0.20 0 0);           /* principal */
  --color-text-1: oklch(0.40 0 0);           /* secundario */
  --color-text-muted: oklch(0.50 0 0);

  /* Marca / Acento (azul verdoso 210°) — sRGB fallback → OKLCH canónico */
  --color-accent: #2a9bd8;                   /* ≈ oklch(0.70 0.10 210) */
  --color-accent: oklch(0.70 0.10 210);

  --color-accent-strong: #1f7bb0;            /* ≈ oklch(0.62 0.13 210) */
  --color-accent-strong: oklch(0.62 0.13 210);

  --color-accent-contrast: oklch(0.18 0.02 210);

  /* Texto sobre acento (blanco) — sRGB fallback → OKLCH */
  --color-on-accent: #ffffff;
  --color-on-accent: oklch(0.99 0 0);

  /* Primary canónico (independiente del accent) */
  --color-primary: #5b43d6;                  /* ≈ oklch(0.58 0.20 285) */
  --color-primary: oklch(0.58 0.20 285);

  --color-primary-strong: #4932bd;           /* ≈ oklch(0.50 0.20 285) */
  --color-primary-strong: oklch(0.50 0.20 285);

  --color-primary-contrast: oklch(0.18 0.03 285);

  /* Aliases semánticos de consumo contextual (slice P5 runtime) */
  --color-on-primary: #ffffff;
  --color-on-primary: oklch(0.99 0 0);
  --color-on-surface: var(--color-text-0);
  --color-on-surface-muted: var(--color-text-muted);
  --color-on-elevated: var(--color-text-0);
  --color-on-media: var(--color-on-accent);

  /* Estados */
  --color-success: oklch(0.78 0.13 145);
  --color-warning: oklch(0.85 0.12 90);
  --color-danger:  oklch(0.66 0.20 30);

  /* Muted de UI para subtítulos — sRGB fallback → OKLCH */
  --tlv2-muted: #6b7280;                     /* ≈ oklch(0.65 0.02 250) */
  --tlv2-muted: oklch(0.65 0.02 250);

  /* ===== Tipografía base ================================================== */
  --font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  /* Escala con clamp() — ajusta los valores si lo necesitas */
  --font-size-xs: clamp(0.78rem, 0.72rem + 0.2vw, 0.85rem);
  --font-size-sm: clamp(0.88rem, 0.80rem + 0.25vw, 0.95rem);
  --font-size-md: clamp(1.00rem, 0.95rem + 0.3vw, 1.05rem);
  --font-size-lg: clamp(1.13rem, 1.00rem + 0.5vw, 1.25rem);
  --font-size-xl: clamp(1.35rem, 1.10rem + 1.0vw, 1.70rem);
  --font-size-2xl: clamp(1.65rem, 1.25rem + 1.6vw, 2.20rem);
  --font-size-3xl: clamp(2.00rem, 1.45rem + 2.5vw, 3.00rem);

  --line-tight: 1.15;
  --line-normal: 1.45;
  --line-loose: 1.7;

  /* ===== TY1 · Shared Type Scale Core ==================================== */
  --fs-section-title: clamp(1.56rem, 1.04rem + 1.9vw, 2.38rem);
  --lh-section-title: 1.10;

  --fs-section-body: clamp(1rem, 0.98rem + 0.16vw, 1.06rem);
  --lh-section-body: 1.58;
  --fs-section-subtitle: clamp(1.02rem, 0.98rem + 0.22vw, 1.14rem);
  --lh-section-subtitle: 1.52;

  --fs-card-title: clamp(1rem, 0.56vw + 0.9rem, 1.16rem);
  --lh-card-title: 1.2;
  --fs-card-body: var(--font-size-md);
  --lh-card-body: 1.55;
  --fs-card-microcopy: clamp(0.82rem, 0.78rem + 0.12vw, 0.9rem);
  --lh-card-microcopy: 1.42;

  --fs-pack-price: clamp(1.35rem, 1.15rem + .7vw, 1.9rem);
  --lh-pack-price: 1;
  --fs-pack-price-compare: 0.9rem;
  --lh-pack-price-compare: 1.1;
  --fs-pack-microcopy: 0.82rem;
  --lh-pack-microcopy: 1.35;

  /* ===== TY2 · Measure Harmonization ===================================== */
  --measure-title-compact: min(23ch, 100%);
  --measure-title-relaxed: min(25ch, 100%);
  --measure-section-subtitle: min(58ch, 100%);
  --measure-section-subtitle-compact: min(54ch, 100%);
  --measure-section-body: min(62ch, 100%);
  --measure-section-body-wide: min(66ch, 100%);
  --measure-hero-title: min(23ch, 100%);
  --measure-hero-subtitle: min(56ch, 100%);
  --measure-hero-body: min(54ch, 100%);
  --measure-closure-title: min(24ch, 100%);
  --measure-closure-subtitle: min(54ch, 100%);
  --measure-closure-body: min(58ch, 100%);
  --measure-card-body-standard: min(54ch, 100%);
  --measure-card-body-relaxed: min(62ch, 100%);

  --measure-section-title: var(--measure-title-compact);

  /* ===== F7 · Heading Posture Families =================================== */
  --heading-posture-commerce-align: center;
  --heading-posture-editorial-align: left;
  --heading-posture-split-align: left;
  --heading-posture-closure-align: center;
  --measure-heading-commerce-title: min(26ch, 100%);
  --measure-heading-commerce-subtitle: min(60ch, 100%);
  --measure-heading-editorial-title: min(23ch, 100%);
  --measure-heading-editorial-subtitle: min(58ch, 100%);
  --measure-heading-split-title: min(22ch, 100%);
  --measure-heading-split-subtitle: min(54ch, 100%);
  --measure-heading-closure-title: min(26ch, 100%);
  --measure-heading-closure-subtitle: min(56ch, 100%);
  --measure-heading-closure-body: min(58ch, 100%);

  /* ===== Espaciado / Radios ============================================== */
  --space-1: 0.25rem; /*4*/
  --space-2: 0.5rem;  /*8*/
  --space-3: 0.75rem; /*12*/
  --space-4: 1rem;    /*16*/
  --space-5: 1.5rem;  /*24*/
  --space-6: 2rem;    /*32*/
  --space-7: 3rem;    /*48*/
  --space-8: 4rem;    /*64*/

  --radius-0: 0;
  --radius-1: 6px;
  --radius-2: 12px;
  --radius-3: 16px;

  /* ===== Sombras / Elevación ============================================= */
  --shadow-color: 0deg 0% 0%;
  --shadow-0: 0 0 0 0 hsl(var(--shadow-color) / 0);
  --shadow-1: 0 1px 2px hsl(var(--shadow-color) / 0.06);
  --shadow-2: 0 2px 6px hsl(var(--shadow-color) / 0.08);
  --shadow-3: 0 6px 12px hsl(var(--shadow-color) / 0.10);
  --shadow-4: 0 10px 18px hsl(var(--shadow-color) / 0.12);
  --shadow-5: 0 18px 28px hsl(var(--shadow-color) / 0.14);
  
  /* Sombras modal (tokens derivados; usados por roles/bridge) */
  --shadow-modal-soft: 0 10px 30px rgba(0,0,0,.18);
  --shadow-modal-medium: 0 20px 50px rgba(0,0,0,.28);
  --shadow-modal-strong: 0 30px 80px rgba(0,0,0,.35);

  /* ===== Z-index slots (contrato) ======================================== */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-overlay: 1200;
  --z-modal: 1300;
  --z-toast: 1400;

  /* ===== Motion =========================================================== */
  --motion-none: 0ms;
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 260ms;
  --easing-standard: cubic-bezier(.2,.8,.2,1);

  /* ===== Diales cromáticos canónicos ======================================
     `primary` y `accent` viven separados por defecto.
     El runtime por landing puede sobreescribir ambos desde `state.page_vars`. */

  /* ===== Accesibilidad & campos (rings/bordes/superficies) =============== */
  --tlv2-ring:       var(--color-primary-strong, var(--color-primary, oklch(0.79 0.07 210)));
  --tlv2-ring-outer: color-mix(in oklch, var(--tlv2-ring) 40%, transparent);

  --tlv2-field-border:        oklch(0 0 0 / 0.12);
  --tlv2-field-surface:       var(--color-surface-0, #fff);
  --tlv2-field-surface-hover: var(--color-surface-2, oklch(0.94 0 0));

  /* ===== Ritmo vertical de secciones (contrato) ========================== */
  --space-section-y-min: 56px;
  --space-section-y-max: 120px;
  --space-section-y-fluid: clamp(var(--space-section-y-min), 7vw, var(--space-section-y-max));

  /* ===== SPA1-A · Shared Vertical Rhythm Core (contract only) =========== */
  --rhythm-section-shell-y: var(--space-section-y-fluid);
  --rhythm-section-shell-y-compact: clamp(var(--space-6), 5vw, var(--space-7));
  --rhythm-intro-eyebrow-gap: clamp(.72rem, .28vw + .62rem, .9rem);
  --rhythm-intro-title-gap: clamp(.78rem, .56vw + .5rem, 1.08rem);
  --rhythm-intro-body-gap: clamp(1.02rem, .86vw + .72rem, 1.46rem);
  --rhythm-body-content-gap: clamp(.88rem, .72vw + .62rem, 1.2rem);
  --rhythm-card-gap: clamp(.72rem, .48vw + .56rem, 1rem);
  --rhythm-card-copy-gap: clamp(.38rem, .26vw + .24rem, .58rem);
  --rhythm-card-meta-gap: .24rem;
  --rhythm-paragraph-gap: .72rem;

  /* ===== SPA2-A · Layout & Composition Core (contract + audit only) ===== */
  --layout-shell-standard-max: 1120px;
  --layout-shell-trust-compact-max: 54rem;
  --layout-shell-trust-wide-max: 62rem;
  --layout-shell-trust-closure-max: 58rem;
  --layout-shell-trust-closure-compact-max: 52rem;
  --layout-region-editorial-max: min(74ch, 100%);
  --layout-region-list-max: min(76ch, 100%);
  --layout-grid-gap-standard: clamp(.95rem, 1vw + .35rem, 1.2rem);
  --layout-grid-gap-compact: var(--space-3);
  --layout-grid-cols-editorial-desktop: 2;
  --layout-grid-cols-testimonials-desktop: 3;
  --layout-grid-cols-tablet: 2;
  --layout-grid-cols-mobile: 1;
  --layout-split-gap: clamp(1rem, 1.6vw, 1.7rem);
  --layout-split-shell-standard-max: min(1040px, 100%);
  --layout-split-shell-compact-max: min(980px, 100%);
  --layout-split-copy-shell-max: min(36rem, 100%);

  /* ===== D2 · HÉROE (tipografía/espaciado/CTA) =========================== */
  --fs-hero-title: clamp(1.95rem, 1.16rem + 3.35vw, 3.35rem);  /* ~31→54px */
  --lh-hero-title: 1.11;

  --fs-hero-subtitle: clamp(1.02rem, 0.91rem + 0.62vw, 1.42rem); /* ~16→23px */
  --lh-hero-subtitle: 1.5;

  --space-hero-y: clamp(3rem, 6vw, 6rem);                      /* ~48→96px */

  --cta-min-height: 44px;
  --cta-pad-inline: 18px;
}

/* Ajuste de ritmo en desktop (mantén tokens, no estilos) */
@media (min-width: 1024px){
  :root{
    --space-section-y-min: 72px;
    --space-section-y-max: 120px;
  }
}

/* === D3 · CTA TOKENS (pegar al FINAL de assets/css/tokens.css) ===========
   - Tamaños S/M/L, padding horizontal, radio, sombra e icon gap
   - Mantiene compatibilidad con D2 (min-height/pad-inline)
============================================================================= */
:root{
  /* Tamaños */
  --cta-h-s: 40px;
  --cta-h-m: 44px;  /* D2 default */
  --cta-h-l: 48px;

  /* Padding lateral */
  --cta-pad-x-s: 14px;
  --cta-pad-x-m: 18px; /* D2 default */
  --cta-pad-x-l: 22px;

  /* Radio y sombra */
  --radius-cta: var(--radius-2, 12px);
  --shadow-cta: var(--shadow-2, 0 2px 6px hsl(0 0% 0% / 0.08));

  /* Espacio entre icono y texto */
  --gap-cta-icon: 0.5rem;

  /* Compatibilidad D2 (no romper landings previas) */
  --cta-min-height: var(--cta-h-m);
  --cta-pad-inline: var(--cta-pad-x-m);
}

/* ========================================================================== */
/* TL-V2 — Tokens de overlay para CTAs                                        */
/* ========================================================================== */

/* Nota:
   - Estos tokens NO se aplican solos.
   - Los activan las clases de <body> mapeadas en presets.css:
     tl-cta-overlay-desktop--gradient / tl-cta-overlay-mobile--gradient, etc. */

:root {
  /* Overlay suave basado en la superficie de CTA */
  --overlay-gradient-desktop: linear-gradient(
    135deg,
    color-mix(in oklch, var(--role-cta-surface, oklch(0.70 0.10 210)) 85%, white 15%),
    color-mix(in oklch, var(--role-cta-surface, oklch(0.70 0.10 210)) 70%, black 30%)
  );

  --overlay-gradient-mobile: linear-gradient(
    135deg,
    color-mix(in oklch, var(--role-cta-surface, oklch(0.70 0.10 210)) 80%, white 20%),
    color-mix(in oklch, var(--role-cta-surface, oklch(0.70 0.10 210)) 65%, black 35%)
  );
}

/* ========================================================================== */
/* TL-V2 — D1 emitter canónico (source tokens / bridges explícitos)            */
/* ========================================================================== */
/*
  Fuente emitida por `inc/v2/css.php` (por landing / inline vars):
  - --color-primary
  - --color-accent
  - --color-surface-elevated
  - --color-surface-elevated-2
  - --radius
  - --role-modal-elevation / --role-card-elevation / --role-pack-card-elevation

  Compat bridges aún activos:
  - --tl-radius        (retiro en FDN-S16 / D4)
  - --tl-elevation     (compat; retiro en FDN-S16 / Etapa 6 cleanup)
  - --tl-card-elevation(compat; retiro en FDN-S16 / Etapa 6 cleanup)
*/

/* ========================================================================== */
/* TL-V2 — Alias de tokens (API legacy / page_vars)                            */
/* ========================================================================== */
:root{
  /* Colores base esperados por landings/contratos antiguos */
  --c-primary: var(--color-primary);
  --c-accent:  var(--color-accent);

  /*
    NO declarar alias globales como --elevation aquí.

    Motivo:
    - Si --elevation existe en :root, entonces cualquier var(--elevation, <fallback>)
      jamás cae al fallback, aunque el dial pageVars.elevation esté vacío.
    - Eso aplana las elevaciones: card/pack/modal terminan con la misma sombra.

    El contrato DS v0.1 usa elevaciones por rol:
    - --role-card-elevation
    - --role-pack-card-elevation
    - --role-modal-elevation
  */
}