/* Identidad de Stella TV Argentina — distinta a propósito de Perú
   (violeta) y Ecuador (charcoal+dorado), pero ahora unificada con ambas
   en un mismo principio: paleta oscura uniforme en toda la landing, no
   solo en el Hero. Este archivo reemplaza el enfoque anterior ("base
   clara, oscuro solo en Hero/CTA final") por instrucción explícita del
   cliente — ver "AJUSTE ESPECÍFICO — HERO, DARK MODE E INSTALACIÓN".
   Azul eléctrico/cyan sigue siendo el acento, usado con moderación (CTA,
   estados activos, highlights), nunca como color de fondo masivo.

   Se carga después de shared/styles/global.css con el mismo mecanismo que
   ya usan Perú y Ecuador (BaseLayout → themeStylesheet): la especificidad
   extra de ":root, html:root" gana sobre el ":root" simple de global.css.

   Tipografía: pila de fuentes del sistema (sin fuente propia
   autohospedada ni externa) — decisión deliberada, no un atajo: encaja
   con el brief "rápida, limpia, tecnológica" y no agrega ni un byte de
   red extra (rendimiento). Perú usa Google Fonts externo, Ecuador una
   serif autohospedada; Argentina usa la fuente nativa del sistema
   operativo del usuario, la opción más rápida posible. */

:root,
html:root {
  /* Frecuencia de fondos oscuros — los dos tonos que se alternan entre
     secciones (mismo criterio que Perú/Ecuador: --bg / --bg2). --bg3 es
     una tercera superficie, un poco más clara, reservada para elementos
     "elevados" sobre esas secciones (tarjetas, chips de código) para que
     no se aplanen visualmente contra un fondo casi idéntico. */
  --bg:          #07111F;
  --bg2:         #0B0B0E;
  --bg3:         #0D1B2E;
  --border:      rgba(247, 250, 252, 0.14);
  --glass-bg:     rgba(7, 17, 31, 0.86);
  --glass-border: rgba(247, 250, 252, 0.12);

  /* #F5F7FA / #B8C2CC — valores exactos pedidos en el ajuste de identidad
     Argentina (antes #F7FAFC/#9AA6BB, ya pasaban WCAG AA pero éstos son
     los tokens formales pedidos; --text-muted queda incluso más claro,
     así que el contraste solo mejora). */
  --text:       #F5F7FA;
  --text-muted: #B8C2CC;
  --text-dim:   #7C8BA6;

  /* Alias retrocompatibles: el Hero y el CTA final ya usaban estos
     nombres para su franja oscura antes de que el resto del sitio se
     unificara — hoy valen lo mismo que --bg/--text, así que no hace
     falta tocar esos dos componentes para que seguir funcionando. */
  --bg-dark:            #07111F;
  --bg-dark-2:          #0D1B2E;
  --text-on-dark:       #F5F7FA;
  --text-muted-on-dark: #B8C2CC;
  --border-on-dark:     rgba(247, 250, 252, 0.14);

  /* Azul eléctrico — el acento, no el color de fondo. CTA, estados
     activos, highlights, indicadores, glow puntual. */
  --accent-rgb:  0, 174, 239;
  --primary:       #00AEEF;
  --primary-dark:  #0089BD;
  --primary-deep:  #006C93;
  --primary-soft:  rgba(0, 174, 239, 0.12);
  --primary-border: rgba(0, 174, 239, 0.35);
  --cyan:          #00E5FF;
  --cyan-glow:     rgba(0, 229, 255, 0.45);

  /* Alias para la regla genérica de foco por teclado de global.css
     (a:focus-visible, button:focus-visible { outline: 2px solid
     var(--orange) }) — mismo patrón que ya usa apps/st/public/tokens.css
     para remapear --orange a su acento real en vez de dorado literal. */
  --orange:        var(--primary);
  --orange-dark:   var(--primary-dark);
  --orange-deep:   var(--primary-deep);
  --orange-glow:   var(--cyan-glow);
  --orange-soft:   var(--primary-soft);
  --orange-border: var(--primary-border);

  /* --green queda intencionalmente SIN redefinir, igual que Ecuador: el
     botón flotante de WhatsApp debe seguir leyéndose como el verde real
     de WhatsApp (definido en el :root base de global.css), no como el
     azul de marca — es una señal de confianza reconocible. */

  --success: #12B76A;
  --warning: #F79009;

  /* Sombras pensadas para superficies oscuras: en vez del "gris pesado
     sobre blanco" que usaba la versión clara, acá la separación viene de
     un highlight superior muy sutil (borde de luz, como si la tarjeta
     recibiera un rayo de luz cenital) más una sombra negra profunda por
     debajo, que sí se nota contra un fondo casi negro. */
  --shadow-card:    inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 28px rgba(0,0,0,0.5);
  --shadow-card-lg: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 50px rgba(0,0,0,0.6);

  --h2-size:  clamp(1.6rem, 4vw, 2.75rem);
  --sub-size: 1rem;

  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@media (min-width: 1024px) {
  :root,
  html:root {
    --h2-size:  3.1rem;
    --sub-size: 1.1rem;
  }
}

/* global.css define `body { background: var(--bg) }` (#07111F, el mismo
   tono que usan las secciones principales) — este ajuste pide un tono de
   body distinto (#0B0B0E) para que el "lienzo" de fondo del documento no
   sea idéntico al de sus secciones. Cada sección ya cubre el ancho
   completo, así que esto no se nota en uso normal; existe para el rebote
   elástico de iOS/overscroll y como token explícito, no decorativo. */
html:root body { background: #0B0B0E; }