/* ==========================================================================
   BAKON — Design Tokens
   Derivados estrictamente del Manual de Normas Bakon 2025.
   Pantone 2995 C -> #1AA5DB   |   Pantone 662 C -> #002072
   Tipografía corporativa: Gotham (Light / Book / Bold)
   Tipografía secundaria:  Arial (Regular / Italic / Bold)
   ========================================================================== */

:root {
  /* ---- Color de marca (manual, pág. 8) ---------------------------------- */
  --bk-azul:            #002072;  /* Pantone 662 C — predominante */
  --bk-celeste:         #1AA5DB;  /* Pantone 2995 C */

  /* Escala derivada del azul corporativo (solo tintes, nunca color nuevo) */
  --bk-azul-900:        #00azul;  /* placeholder sobrescrito abajo */
  --bk-azul-950:        #001449;
  --bk-azul-800:        #002d9b;
  --bk-azul-700:        #0039c4;
  --bk-azul-100:        #e6e9f1;
  --bk-azul-050:        #f2f4f9;

  /* Escala derivada del celeste */
  --bk-celeste-700:     #0f7ba6;
  --bk-celeste-600:     #1590c1;
  --bk-celeste-200:     #b9e4f4;
  --bk-celeste-100:     #ddf1fa;
  --bk-celeste-050:     #f0f9fd;

  /* ---- Neutros (estética Apple: casi todo es blanco y gris) ------------- */
  --bk-blanco:          #ffffff;
  --bk-gris-050:        #fbfbfd;
  --bk-gris-100:        #f5f5f7;
  --bk-gris-200:        #ededf0;
  --bk-gris-300:        #d9d9de;
  --bk-gris-400:        #b8b8c0;
  --bk-gris-500:        #6e6e73;  /* subido a 5.07:1 sobre blanco (WCAG AA) */
  --bk-gris-600:        #5f5f64;  /* 6.35:1 sobre blanco */
  --bk-gris-700:        #4a4a4f;
  --bk-gris-900:        #1d1d1f;
  --bk-negro:           #000000;

  /* ---- Roles semánticos ------------------------------------------------- */
  --bk-fondo:           var(--bk-blanco);
  --bk-fondo-alt:       var(--bk-gris-100);
  --bk-fondo-oscuro:    var(--bk-azul);
  --bk-superficie:      var(--bk-blanco);
  --bk-borde:           var(--bk-gris-200);
  --bk-borde-fuerte:    var(--bk-gris-300);

  --bk-texto:           var(--bk-gris-900);
  --bk-texto-suave:     var(--bk-gris-600);
  --bk-texto-tenue:     var(--bk-gris-500);
  --bk-texto-inverso:   var(--bk-blanco);

  /* Acento accesible: el celeste no alcanza 4.5:1 sobre blanco (2.6:1),
     por eso se reserva a gráfica, iconos y texto grande. Para texto y
     acciones se usa el azul corporativo, que además es el predominante
     según el manual. */
  --bk-accion:          var(--bk-azul);
  --bk-accion-hover:    #002d9b;
  --bk-accion-activa:   #001449;
  --bk-enlace:          var(--bk-azul);
  --bk-foco:            #1590c1;  /* tinte de 2995 C que alcanza 3:1 en claro y oscuro */

  --bk-exito:           #0f7b4f;
  --bk-alerta:          #9a5b00;
  --bk-error:           #b3261e;
  --bk-oferta:          #b3261e;

  /* ---- Tipografía (manual, págs. 9 y 10) -------------------------------- */
  /* Gotham es licenciada. Si se sube la webfont, se activa sola.
     Fallback geométrico de rasgos equivalentes: Montserrat. */
  --bk-font-display: "Gotham", "Gotham SSm", "Montserrat", "Helvetica Neue",
                     Helvetica, Arial, sans-serif;
  --bk-font-texto:   Arial, "Helvetica Neue", Helvetica, sans-serif;
  --bk-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bk-peso-light:   300;
  --bk-peso-book:    400;
  --bk-peso-medium:  500;
  --bk-peso-bold:    700;

  /* Escala tipográfica fluida (mín. 320px -> máx. 1440px) */
  --bk-txt-xs:   0.75rem;
  --bk-txt-sm:   0.8125rem;
  --bk-txt-base: 0.9375rem;
  --bk-txt-md:   1.0625rem;
  --bk-txt-lg:   clamp(1.125rem, 0.35vw + 1.05rem, 1.3125rem);
  --bk-txt-xl:   clamp(1.375rem, 0.7vw + 1.22rem, 1.75rem);
  --bk-txt-2xl:  clamp(1.75rem, 1.4vw + 1.45rem, 2.5rem);
  --bk-txt-3xl:  clamp(2.125rem, 2.6vw + 1.55rem, 3.5rem);
  --bk-txt-4xl:  clamp(2.5rem, 4.4vw + 1.5rem, 5rem);

  --bk-lh-tight:  1.06;
  --bk-lh-snug:   1.22;
  --bk-lh-normal: 1.5;
  --bk-lh-relax:  1.62;

  /* Gotham/Montserrat son anchas: los titulares piden tracking negativo */
  --bk-track-display: -0.022em;
  --bk-track-title:   -0.015em;
  --bk-track-base:    0em;
  --bk-track-wide:    0.16em;   /* eyebrows y el ritmo del slogan */

  /* ---- Espaciado (base 4px) --------------------------------------------- */
  --bk-e1: 4px;   --bk-e2: 8px;   --bk-e3: 12px;  --bk-e4: 16px;
  --bk-e5: 20px;  --bk-e6: 24px;  --bk-e8: 32px;  --bk-e10: 40px;
  --bk-e12: 48px; --bk-e16: 64px; --bk-e20: 80px; --bk-e24: 96px;
  --bk-e32: 128px;

  --bk-seccion:   clamp(56px, 7vw, 112px);
  --bk-seccion-s: clamp(40px, 4.5vw, 72px);

  /* ---- Contenedores ------------------------------------------------------ */
  --bk-ancho:        1240px;
  --bk-ancho-ancho:  1440px;
  --bk-ancho-texto:  68ch;
  --bk-gutter:       clamp(20px, 4vw, 40px);

  /* ---- Radios ------------------------------------------------------------ */
  --bk-r-sm:   6px;
  --bk-r-md:   10px;
  --bk-r-lg:   16px;
  --bk-r-xl:   22px;
  --bk-r-2xl:  32px;
  --bk-r-full: 999px;

  /* ---- Sombras (suaves, nunca dramáticas) -------------------------------- */
  --bk-sombra-sm: 0 1px 2px rgba(0, 32, 114, .06);
  --bk-sombra-md: 0 2px 8px rgba(0, 32, 114, .07), 0 1px 2px rgba(0, 32, 114, .05);
  --bk-sombra-lg: 0 12px 32px rgba(0, 32, 114, .10), 0 2px 6px rgba(0, 32, 114, .05);
  --bk-sombra-xl: 0 24px 64px rgba(0, 32, 114, .14), 0 4px 12px rgba(0, 32, 114, .06);
  --bk-anillo:    0 0 0 3px rgba(21, 144, 193, .42);

  /* ---- Materiales translúcidos ------------------------------------------- */
  --bk-vidrio:        rgba(255, 255, 255, .72);
  --bk-vidrio-oscuro: rgba(0, 20, 73, .62);
  --bk-blur:          saturate(180%) blur(20px);

  /* ---- Movimiento (springs Apple: damping 1.0 por defecto) --------------- */
  --bk-ease:       cubic-bezier(.32, .72, 0, 1);   /* salida suave, sin rebote */
  --bk-ease-out:   cubic-bezier(.16, 1, .3, 1);
  --bk-ease-in:    cubic-bezier(.4, 0, 1, 1);
  --bk-spring:     linear(0,.0033,.0182,.0446,.0813,.1276,.1827,.2461,.3171,.395,.479,.5682,.6617,.7581,.856,.9536,1.0489,1.1396,1.2233,1.2976,1.3601,1.4089,1.4426,1.4604,1.4623,1.4489,1.4216,1.3822,1.3331,1.277,1.2166,1.1546,1.0937,1.0361,.9838,.9382,.9002,.8703,.8485,.8344,.8272,.8261,.83,.8378,.8484,.8608,.874,.8873,.9,.9117,.9221,.9311,.9386,.9448,.9497,.9536,.9567,.9591,.9612,.9631,.9649,.9668,.9689,.9713,.9739,.9768,.98,.9834,.9868,.9903,.9937,.9969,1);
  --bk-t-rapida:   .16s;
  --bk-t-base:     .28s;
  --bk-t-lenta:    .45s;
  --bk-t-pausada:  .7s;

  /* ---- Capas -------------------------------------------------------------- */
  --bk-z-base: 1;  --bk-z-sticky: 100; --bk-z-header: 200;
  --bk-z-drawer: 300; --bk-z-modal: 400; --bk-z-toast: 500;

  /* ---- Alturas ------------------------------------------------------------ */
  --bk-header-h:     64px;
  --bk-header-h-lg:  72px;
  --bk-barra-h:      36px;
  --bk-touch:        44px;   /* objetivo táctil mínimo */
}

/* El azul corporativo es el color de la marca; se corrige el placeholder */
:root { --bk-azul-900: #001a5e; }

@media (prefers-reduced-motion: reduce) {
  :root { --bk-t-rapida: .01ms; --bk-t-base: .01ms; --bk-t-lenta: .01ms; --bk-t-pausada: .01ms; }
}