/*! 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);

  /* 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;

  /* ===== 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);

  /* ===== Aliasing semántico (MVP): primary = accent ====================== */
  --color-primary:          var(--color-accent);
  --color-primary-strong:   var(--color-accent-strong);
  --color-primary-contrast: var(--color-accent-contrast);

  /* ===== 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));

  /* ===== D2 · HÉROE (tipografía/espaciado/CTA) =========================== */
  --fs-hero-title: clamp(1.875rem, 1.15rem + 3.2vw, 3.25rem);  /* ~30→52px */
  --lh-hero-title: 1.15;

  --fs-hero-subtitle: clamp(1rem, 0.90rem + 0.6vw, 1.375rem); /* ~16→22px */
  --lh-hero-subtitle: 1.45;

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

  /* ===== D2.1 · HÉROE (layout / badge / media) ========================= */
  --hero-grid-gap: var(--space-7);
  --hero-content-max: 62ch;

  /* Contenedor del HERO */
  --hero-container-max: 1120px;

  /* CTAs */
  --hero-cta-min-w: 220px;

  /* Badge: “Nuevo · …” (todo tokenizable) */
  --hero-badge-font-size: var(--font-size-sm);
  --hero-badge-pad-y: var(--space-2);
  --hero-badge-pad-x: var(--space-3);
  --hero-badge-radius: var(--radius-2);
  --hero-badge-shadow: var(--shadow-1);
  --hero-badge-dot: 8px;
  --hero-badge-dot-opacity: 0.55;

  /* Bullets (íconos + puntos) */
  --hero-bullet-col: 1.125rem;      /* ~18px */
  --hero-bullet-dot: 0.625rem;      /* ~10px */
  --hero-bullet-dot-top: 0.375rem;  /* ~6px */
  --hero-bullet-dot-opacity: 0.85;

  /* Media (imagen) */
  /* Hero media sizing (LAB tuned)
     - Mobile: menos alto para que no domine el primer pantallazo.
     - Desktop: reduce el peso visual para balancear texto/imagen.
  */
  --hero-media-aspect-mobile: 9 / 10;
  --hero-media-aspect-desktop: 4 / 5;
  --hero-media-max-w: 450px;
  --hero-media-max-w-mobile: 420px; /* LAB token; en canónico se mapeará a rol/token */
  --hero-media-max-h-mobile: 44vh;
  --hero-media-max-h-desktop: clamp(360px, 52vh, 520px);
  --hero-media-radius: 22px;

  --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 — 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
  */
}