/*! TLV2 — roles.css (Gate C2 listo / Phase B 100%)
    - Solo variables de ROL (neutrales) leyendo tokens.
    - Estados expuestos como variables (hover/focus/active/disabled).
    - Sin selectores de componentes (solo :root).
    - Precedencia del sistema:
      _tl_page_vars (persistido) > presets (constructor) > defaults (este archivo)
*/

/* =========================================================
   Roles de texto, superficies, CTA, Focus, Hero, Modal
   ========================================================= */
:root{
/* -------- Aliases canónicos (roles base) --------
   Nota: estos roles son "view" sobre tokens (color/radius) para que QA y componentes
   consulten siempre --role-* aunque el dial escriba --color-* / --radius.
*/
/*
  DS v0.3 — normalización canónica
  - Lee diales por landing (inline vars): --surface, --elevation, --radius
  - Mantiene compat: --color-surface / --color-primary / --color-accent
  - Evita que --role-* quede “unset” si el dial no está definido (fallbacks)
*/
--role-primary: var(--color-primary, var(--role-primary-base));
--role-surface: var(--surface, var(--color-surface, var(--role-surface-base)));
--role-radius: var(--radius, var(--role-radius-base));
/* --role-accent se define más abajo con un fallback estable (oklch) */
--role-fg: var(--color-fg, var(--color-text-0));

/* -------- Gradientes canónicos para overlays CTA (usados por presets) -------- */
--overlay-gradient-desktop: linear-gradient(135deg,
  oklch(0.70 0.10 210 / 0.18) 0%,
  oklch(0.70 0.10 210 / 0.00) 70%
);
--overlay-gradient-mobile: linear-gradient(180deg,
  oklch(0.70 0.10 210 / 0.22) 0%,
  oklch(0.70 0.10 210 / 0.00) 100%
);

  /* -------- Overlays CTA (desktop/móvil) — defaults --------
     Desktop: sólido (none)
     Mobile : gradiente por defecto
  */
  --role-cta-overlay-desktop: none;
  --role-cta-overlay-mobile: linear-gradient(180deg,
    oklch(0.70 0.10 210 / 0.22) 0%,
    oklch(0.70 0.10 210 / 0.00) 100%
  );

  /* -------- Texto -------- */
  --role-heading-color: var(--color-text-0);
  --role-body-color:    var(--color-text-0);
  --role-muted-color:   var(--color-text-muted);

  /* Alias útil para FG genérico (p.ej. modal) */
  --role-fg: var(--role-body-color);

  /* -------- Superficies base -------- */
  --role-surface-base:      var(--color-surface-0, #ffffff);
  --role-surface-section:   var(--color-surface-1, #f7f7f9);
  --role-surface-alt:       var(--color-surface-2, #f0f1f5);

  /* Superficie elevada para cards (fuente única para packs/testimonios/faq/etc.) */
  --role-surface-elevated:  var(--role-surface-base);

  /* Bordes suaves y fuertes */
  --role-border-color:      var(--color-border, oklch(0.82 0.02 200));
  --role-border-strong:     color-mix(in oklch, var(--role-border-color) 70%, black);

  /* -------- CTA (superficie, texto y borde base) -------- */
  --role-cta-surface: var(--color-accent);
  /* Texto sobre CTA: usa el color "on accent" global (blanco por defecto) */
  --role-cta-foreground: var(--color-on-accent, #ffffff);
  /* Alias transitorio (deprecado): mantener mientras migramos usos */
  --role-cta-fg: var(--role-cta-foreground);
  --role-cta-border:  color-mix(in oklch, var(--color-accent) 85%, black);

  /* Alias de compatibilidad: fondo CTA = superficie CTA */
  --role-cta-bg: var(--role-cta-surface);

  /* -------- CTA (estados — superficie/fg/borde) -------- */
  /* Hover: superficie ligeramente más clara, borde estable */
  --role-cta-surface-hover:   color-mix(
    in oklch,
    var(--role-cta-surface) 90%,
    white
  );
  --role-cta-foreground-hover:        var(--role-cta-fg);
  --role-cta-border-hover:            var(--role-cta-border);

  /* Focus: alias del estado hover (visual coherente) */
  --role-cta-surface-focus:           var(--role-cta-surface-hover);
  --role-cta-foreground-focus:        var(--role-cta-fg);
  --role-cta-border-focus:            var(--role-cta-border);

  /* Active: un poco más oscuro que el base */
  --role-cta-surface-active:  color-mix(
    in oklch,
    var(--role-cta-surface) 88%,
    black
  );
  --role-cta-foreground-active:       var(--role-cta-fg);
  --role-cta-border-active:   color-mix(
    in oklch,
    var(--role-cta-border) 88%,
    black
  );

  /* Disabled */
  --role-cta-surface-disabled:        oklch(0.90 0 0);
  --role-cta-foreground-disabled:     oklch(0.70 0 0);
  --role-cta-border-disabled:         oklch(0.88 0 0);

  /* -------- CTA (sombras: base + alias por estado) --------
     Nota: por defecto neutro; presets pueden elevar (shadow-2/3).
  */
  --role-cta-shadow:           none;
  --role-cta-shadow-hover:     none;
  --role-cta-shadow-active:    none;
  --role-cta-shadow-focus:     none;

  /* -------- Focus ring global -------- */
  --role-focus-ring-color: var(--tlv2-ring, var(--color-primary-strong, oklch(0.62 0.13 210)));
  --role-focus-ring-width: 2px;
  --role-focus-ring-offset: 2px;

  /* -------- Hero -------- */
  --role-surface-hero: var(--role-surface-section);
  --role-hero-fg:      var(--role-heading-color);

  /* -------- Modal -------- */
  --role-modal-surface: #ffffff;
  --role-modal-surface-image: none;
  --role-modal-fg: var(--role-fg, #111);
  --role-modal-radius: 16px;
  --role-modal-radius-mobile: 14px;
  /*
    Elevaciones por rol (defaults).

    Regla de contrato:
    - NO dependemos de un alias global tipo --elevation (porque rompe los fallbacks).
    - Si pageVars.elevation se usa, el runtime lo traduce a overrides directos de:
      --role-modal-elevation / --role-pack-card-elevation / --role-card-elevation.
  */
  --role-modal-elevation: var(--shadow-modal-soft, var(--shadow-modal-medium, 0 10px 30px rgba(0,0,0,.18)));
  /* Packs cards (elevación base) */
  --role-pack-card-elevation: var(--shadow-5, var(--shadow-3, 0 8px 24px rgba(0,0,0,.06)));
  /* Packs cards — estados (sombras base por token; no dependen del dial por ahora) */
  --role-pack-card-elevation-featured: var(--shadow-4, 0 10px 30px rgba(0,0,0,.09));
  --role-pack-card-elevation-hover: var(--shadow-5, 0 14px 40px rgba(0,0,0,.12));
  /* Cards genéricas (Garantía/Testimonios/FAQ/CTA Final) */
  --role-card-elevation: var(--shadow-3, 0 10px 30px rgba(0,0,0,.06));
  --role-modal-padding: 2rem;
  --role-modal-padding-mobile: 1rem;
  --role-modal-card-padding: 1.25rem;
  --role-modal-card-padding-mobile: 1rem;

  /* Close button */
  --role-modal-close-size: 40px;
  --role-modal-close-radius: 999px;
  --role-modal-close-surface: rgba(0,0,0,.06);
  --role-modal-close-surface-hover: rgba(0,0,0,.08);
  --role-modal-close-icon: rgba(0,0,0,.60);

  /* Acento (bullets/bordes de énfasis) */
  --role-accent: var(--color-accent, oklch(0.62 0.18 320));
}

/* ========================================================================== */
/* D1 — Defaults seguros de roles (CTAs)                                      */
/* No pintan directamente: los mapea components-map a .cta/.cta-group, etc.   */
/* ========================================================================== */

.tlv2-page {
  /* Superficie del CTA y overlays por defecto (desktop/mobile) */
  --role-cta-surface: var(--color-primary, #0a84ff);
  /* Texto y borde del CTA si tu mapa los usa (opcionales) */
  --role-cta-foreground: var(--color-on-accent, #fff);
  /* Borde ahora derivado de la propia superficie del CTA para que
     siempre exista contorno visible sobre fondos claros. */
  --role-cta-border: color-mix(
    in oklch,
    var(--role-cta-surface) 85%,
    black
  );
}