/* ==========================================================================
   bilzur · variables.css — tokens de marca (fuente de verdad)
   Extraído del sistema de mockups (design-tokens.json + extras documentados
   en DESIGN-BRIEF §6/§24). NINGÚN componente hardcodea color/tipo/medida:
   todo se consume vía var(--bzr-*). No introducir hex sueltos en el CSS.
   ========================================================================== */
:root{
  /* Color — acción y marca (paleta oficial: guía de marca Bilzur) */
  --bzr-color-accent:#3178F6;        /* Azul principal (acción) */
  --bzr-color-accent-dark:#245FD6;   /* hover / kicker */
  --bzr-color-accent-soft:#E6EFFE;
  --bzr-color-ink:#10254D;           /* navy-slate: titulares y texto principal (on-brand) */
  --bzr-color-brand-navy:#0B2D5B;    /* Azul Avanzur: logo, footer, drench, anclajes */
  --bzr-color-bg:#FFFFFF;
  --bzr-color-surface:#FFFFFF;
  --bzr-color-muted:#5E6A82;
  --bzr-color-border:#E3E9F2;
  --bzr-color-ring:#D3E0F6;
  --bzr-color-ice:#E4EBF6;           /* tinte alterno REAL (antes casi-blanco: causaba la planitud) */
  --bzr-color-glow:#DCE8FF;
  --bzr-color-glow-ice:#DBF0FA;

  /* Color — turquesa de marca (#00C2A8), acento SEMÁNTICO a cuentagotas (dinero/en vivo) */
  --bzr-color-teal:#00C2A8;
  --bzr-color-teal-ink:#068C7A;      /* turquesa legible como texto (contraste AA) */
  --bzr-color-teal-soft:#D6F6F0;

  /* Color — estados (uso mínimo, reservado a semántica) */
  --bzr-color-success:#23A15A;
  --bzr-color-success-soft:#EAF8EF;
  --bzr-color-warning:#D88918;
  --bzr-color-warning-soft:#FFF5E5;

  /* Color — sobre superficies oscuras (footer Dark Anchor) */
  --bzr-color-on-dark:#FFFFFF;
  --bzr-color-on-dark-muted:#B8C6E1;
  --bzr-color-drench-mid:#1C4BB0;     /* azul medio del degradado drench/resumen */
  --bzr-color-kicker-on-dark:#BCD0FF;  /* kicker/etiqueta sobre drench/navy */
  --bzr-color-accent-on-dark:#8FE9DC;    /* turquesa: acento SEMÁNTICO sobre navy (dinero/live: cifras €, labels) */
  --bzr-color-emphasis-on-dark:#82ABFF;  /* azul claro: ÉNFASIS de titular sobre navy (serio, legible ~5.8:1, no mint) */

  /* Tipografía */
  --bzr-font-heading:Manrope,Inter,sans-serif;
  --bzr-font-body:Inter,sans-serif;
  --bzr-font-size-base:16px;
  --bzr-line-height:1.6;
  --bzr-type-h1:clamp(3.25rem,6.6vw,5.875rem);
  --bzr-type-h2:clamp(2.25rem,4vw,3.375rem);
  --bzr-type-h3:clamp(1.5rem,2.6vw,2.125rem);

  /* Espacio y ritmo */
  --bzr-space-unit:.25rem;
  --bzr-space-1:.5rem;
  --bzr-space-2:.75rem;
  --bzr-space-3:1rem;
  --bzr-space-4:1.5rem;
  --bzr-space-5:2rem;
  --bzr-space-6:3rem;
  --bzr-space-7:4rem;
  --bzr-section-y:clamp(3.25rem,5.5vw,5rem);
  --bzr-container:76.25rem;          /* 1220px */

  /* Radios */
  --bzr-radius-sm:.625rem;
  --bzr-radius-control:.8125rem;     /* 13px — botones/inputs */
  --bzr-radius-window:1.25rem;       /* 20px — ventana de producto */
  --bzr-radius-image:1.375rem;       /* 22px — imágenes */
  --bzr-radius-card:1.75rem;         /* 28px — card protagonista */
  --bzr-radius-pill:62.4375rem;      /* 999px */

  /* Bordes, sombras, foco */
  --bzr-border:0.0625rem solid var(--bzr-color-border);
  /* Sombras de doble capa (nítida pegada + ambiente amplia) = definición, no "difuso" */
  --bzr-shadow-card:0 .0625rem .125rem rgba(11,45,91,.06),0 .875rem 1.875rem -.75rem rgba(11,45,91,.20);
  --bzr-shadow-window:0 .125rem .5rem rgba(11,45,91,.08),0 2rem 3.75rem -1.25rem rgba(11,45,91,.34);
  --bzr-shadow-float:0 .125rem .5rem rgba(11,45,91,.10),0 1.5rem 3rem -1rem rgba(11,45,91,.30);
  --bzr-shadow-button:0 .5rem 1.125rem rgba(49,120,246,.26);          /* glow azul (nodos de pasos) */
  --bzr-shadow-button-neutral:0 .5rem 1.125rem rgba(11,45,91,.18);    /* sombra neutra de botón (sin glow azul) */
  --bzr-focus-ring:0 0 0 .25rem rgba(49,120,246,.28);   /* foco de teclado (a11y) */

  /* Motion — Controlled Premium (respeta prefers-reduced-motion) */
  --bzr-motion-fast:180ms;
  --bzr-motion-base:220ms;
  --bzr-motion-slow:280ms;
  --bzr-ease:cubic-bezier(.2,.8,.2,1);
}