/* ============================================================================
   STC — SISTEMA DE DISEÑO · TOKENS (FASE A → dirección visual v2)
   Soluciones Tecnológicas Corporativas · stc.hn
   v2.0 · Julio 2026 · Dirección: CLARO PREMIUM (base B) + acentos navy (hero C)
   ----------------------------------------------------------------------------
   Cambio v2: el tema por defecto pasa a CLARO premium (aireado, corporativo),
   con el azul de marca #005D92 como protagonista y bloques NAVY selectivos
   (tarjeta del hero, banda CTA) para profundidad. Azul confirmado contra SVG.
   Todos los pares de texto verificados WCAG AA/AAA.
   ========================================================================== */

:root {
  /* ---- AZUL DE MARCA (confirmado contra SVG oficial: #005D92) ---- */
  --stc-primary:        #005D92;  /* azul EXACTO del logo · texto blanco encima 7.05 AAA · sobre blanco 7.05 AAA */
  --stc-primary-dark:   #00476F;  /* hover / activo */
  --stc-primary-light:  #0A73B0;  /* acento vibrante sobre claro (eyebrows, cifras, énfasis) · AA 5.13 */

  /* ---- SUPERFICIES (tema claro premium) ---- */
  --stc-bg:        #FFFFFF;       /* fondo base */
  --stc-bg-2:      #F4F7FA;       /* franjas alternas / secciones suaves */
  --stc-surface:   #FFFFFF;       /* tarjetas */
  --stc-surface-2: #EFF4F9;       /* hover de card / chips */
  --stc-border:    #E2E9EF;       /* hairline */
  --stc-border-strong: #CBD8E2;   /* énfasis / hover */
  --stc-ink:       #0A1622;       /* texto principal · AAA 18.25 */
  --stc-muted:     #4A5A67;       /* texto secundario · AAA 7.12 */
  --stc-faint:     #7A8A96;       /* metadatos */

  /* ---- CTA DOMINANTE (nada compite con él) ---- */
  --stc-cta:       #1E9AE0;       /* azul brillante · resalta como control (3.1:1 vs blanco, UI OK) */
  --stc-cta-hover: #1385CC;       /* oscurece en hover sobre claro */
  --stc-cta-ink:   #06090D;       /* LABEL del CTA en tinta oscura · AA 6.42
                                     (blanco sobre CTA = 3.47 → NO usar en texto normal) */

  /* ---- NAVY (bloques oscuros premium: tarjeta hero, banda CTA) ---- */
  --stc-navy:        #12324A;     /* superficie navy · texto blanco 13.28 AAA */
  --stc-navy-2:      #0B2233;     /* navy profundo (degradados) */
  --stc-on-navy:     #EAF2F8;     /* texto sobre navy */
  --stc-muted-navy:  #AEC3D4;     /* secundario sobre navy · AAA 7.31 */
  --stc-accent-navy: #6FB8E6;     /* acento/íconos sobre navy · AA 6.12 */
  --stc-navy-glow:   rgba(30,154,224,.18);

  /* ---- SEMÁNTICOS ---- */
  --stc-success: #157A4E;
  --stc-warning: #9A6B12;
  --stc-danger:  #B23A32;

  /* ---- TIPOGRAFÍA (base sans geométrica/limpia, como el wordmark) ---- */
  --stc-font-display: "Poppins","Montserrat",system-ui,sans-serif;
  --stc-font-body:    "Inter","Roboto",system-ui,sans-serif;
  --stc-font-mono:    "JetBrains Mono",ui-monospace,monospace;

  /* Escala tipográfica ÚNICA (ratio ~1.25, fluida con clamp) */
  --fs-display: clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem);
  --fs-h1:      clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem);
  --fs-h2:      clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h3:      clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-h4:      1.25rem;
  --fs-lead:    1.1875rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  --lh-tight: 1.1; --lh-snug: 1.28; --lh-body: 1.6;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --tracking-eyebrow: 0.14em;

  /* ---- ESPACIADO ÚNICO (4·8·12·16·24·32·48·64·96·128) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px;
  --section-y: clamp(64px, 5vw + 32px, 128px);

  /* ---- GRID / CONTENEDOR ---- */
  --container-max: 1200px; --container-wide: 1360px;
  --gutter: clamp(16px, 3vw, 32px);
  --grid-cols: 12; --grid-gap: 24px;

  /* ---- RADIOS / SOMBRAS (suaves, tinte marca — tema claro) ---- */
  --stc-radius-sm: 8px; --stc-radius: 12px; --stc-radius-lg: 20px; --stc-radius-pill: 999px;
  --stc-shadow:    0 10px 30px rgba(10,40,70,.10);
  --stc-shadow-lg: 0 24px 60px rgba(0,60,110,.16);
  --stc-ring:      0 0 0 2px var(--stc-bg), 0 0 0 4px var(--stc-cta);

  /* ---- MOTION (un solo lenguaje) ---- */
  --stc-dur: 240ms; --stc-dur-fast: 140ms;
  --stc-ease: cubic-bezier(.2,.7,.2,1);
  --stc-reveal-y: 16px;

  --z-header: 100; --z-mega: 110; --z-modal: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root { --stc-dur: 0ms; --stc-dur-fast: 0ms; --stc-reveal-y: 0px; }
}

:root { color-scheme: light; }
body {
  background: var(--stc-bg);
  color: var(--stc-ink);
  font-family: var(--stc-font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}