/* ==========================================================================
   Baqueanos S.A.S. — Sistema de diseño
   Tokens compartidos por el sitio madre y TODOS los subdominios de marca.
   No definir colores fuera de este archivo.
   ========================================================================== */

:root {
  /* --- Paleta cruda ------------------------------------------------------ */
  --c-naranja-300: #ff9b57;
  --c-naranja-400: #ff8433;
  --c-naranja-500: #ff6b1a;   /* primario: acción */
  --c-naranja-600: #e5551f;

  --c-azul-700:    #122a4d;
  --c-azul-800:    #0a1a33;
  --c-azul-900:    #061024;   /* secundario: base institucional */

  --c-cian-300:    #67e8f9;
  --c-cian-400:    #22d3ee;   /* acento: links, estados, aire técnico */
  --c-cian-500:    #06b6d4;

  --c-negro:       #05080f;
  --c-blanco:      #ffffff;

  --c-plata-200:   #dde3ec;
  --c-plata-400:   #a9b6c7;
  --c-plata-600:   #7a8798;   /* filetes y detalle, usar poco */

  /* --- Roles semánticos -------------------------------------------------- */
  --bg:            var(--c-negro);
  --bg-elev-1:     #0a1424;
  --bg-elev-2:     #0f1d33;
  --bg-inverso:    var(--c-blanco);

  --texto:         #eef2f7;
  --texto-suave:   #a3b3c6;
  --texto-tenue:   #74839a;
  --texto-inverso: var(--c-azul-900);

  --acento:        var(--c-naranja-500);
  --acento-hover:  var(--c-naranja-400);
  --acento-2:      var(--c-cian-400);

  --linea:         color-mix(in srgb, var(--c-plata-400) 16%, transparent);
  --linea-fuerte:  color-mix(in srgb, var(--c-plata-400) 30%, transparent);
  --filete:        linear-gradient(90deg, transparent, var(--c-plata-600), transparent);

  --exito:         #34d399;
  --alerta:        #fbbf24;

  /* --- Tipografía -------------------------------------------------------- */
  --fuente-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --fuente-texto:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-display: clamp(3.25rem, 9.5vw, 7.5rem);
  --t-h1:      clamp(2.5rem, 6vw, 4.5rem);
  --t-h2:      clamp(2rem, 4.4vw, 3.25rem);
  --t-h3:      clamp(1.35rem, 2.2vw, 1.75rem);
  --t-h4:      clamp(1.1rem, 1.6vw, 1.3rem);
  --t-lead:    clamp(1.05rem, 1.6vw, 1.3rem);
  --t-base:    1rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-bold:   700;
  --peso-black:  800;

  --interlinea-apretada: 0.94;
  --interlinea-titulo:   1.08;
  --interlinea-texto:    1.65;

  --tracking-display: -0.02em;
  --tracking-etiqueta: 0.14em;

  /* --- Espaciado --------------------------------------------------------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --e-10: 8rem;

  --seccion-y: clamp(4rem, 9vw, 7.5rem);

  /* --- Layout ------------------------------------------------------------ */
  --ancho-max:   1200px;
  --ancho-texto: 68ch;
  --borde-pagina: clamp(1.25rem, 5vw, 3rem);
  --alto-nav: 68px;

  /* --- Formas ------------------------------------------------------------ */
  --radio-sm: 6px;
  --radio-md: 12px;
  --radio-lg: 18px;
  --radio-pill: 999px;

  --sombra-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --sombra-md: 0 12px 28px -12px rgb(0 0 0 / 0.7);
  --sombra-lg: 0 30px 60px -24px rgb(0 0 0 / 0.85);
  --brillo-acento: 0 0 0 1px color-mix(in srgb, var(--acento) 40%, transparent),
                   0 18px 40px -18px color-mix(in srgb, var(--acento) 55%, transparent);

  /* --- Movimiento -------------------------------------------------------- */
  --ease-salida: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-suave:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-rapida:  140ms;
  --dur-media:   260ms;
  --dur-lenta:   520ms;

  --z-nav: 100;
  --z-menu: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rapida: 0ms;
    --dur-media: 0ms;
    --dur-lenta: 0ms;
  }
}

/* ==========================================================================
   Tema claro — sobreescribe los roles semánticos del tema oscuro
   ========================================================================== */
[data-tema="claro"] {
  --bg:          #f5f7fa;
  --bg-elev-1:   #ffffff;
  --bg-elev-2:   #eef2f7;
  --bg-inverso:  var(--c-azul-900);

  --texto:       #0f172a;
  --texto-suave: #334155;
  --texto-tenue: #64748b;
  --texto-inverso: var(--c-blanco);

  --linea:        rgba(15, 23, 42, 0.10);
  --linea-fuerte: rgba(15, 23, 42, 0.20);

  --sombra-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --sombra-md: 0 12px 28px -12px rgb(0 0 0 / 0.12);
  --sombra-lg: 0 30px 60px -24px rgb(0 0 0 / 0.18);
  --brillo-acento: 0 0 0 1px color-mix(in srgb, var(--acento) 30%, transparent),
                   0 18px 40px -18px color-mix(in srgb, var(--acento) 35%, transparent);
}