/* ============================================================================
   tokens.css — VARIABLES GLOBALES DE LA PLATAFORMA B2B EDO
   ----------------------------------------------------------------------------
   Fuente única de verdad para colores, tipografías, radios, sombras y medidas
   de layout. Se carga ANTES que cualquier otro CSS en TODOS los layouts
   (base, wizard, admin) para que las variables estén disponibles en cascada.

   Para cambiar la identidad visual de toda la plataforma, basta con editar
   este archivo: el resto de hojas de estilo consumen estas variables con
   var(--...). No redefinir :root en otros archivos.
   ============================================================================ */

:root{

  /* ── COLORES PRINCIPALES (marca) ───────────────────────────────────────
     Color de marca usado en botones primarios, enlaces activos, acentos. */
  --brand:    #c94a68;   /* base    — color principal */
  --brand-d:  #b03149;   /* oscuro  — hover / estados activos */
  --brand-l:  #fce8ec;   /* claro   — bordes y fondos suaves */
  --brand-f:  #fdf3f5;   /* fondo   — fondos muy tenues (chips, hovers) */

  /* ── LOGO (imagen de marca) ────────────────────────────────────────────
     Ruta absoluta desde la raíz web (public/) al logo. Se usa como
     background-image, p. ej. en el panel izquierdo del login (.lv-logo). */
  --edo-logo: url('/assets/img/b2bedo_logo.png');

  /* ── COLORES SECUNDARIOS (acento) ──────────────────────────────────────
     Acento complementario (panel admin, etiquetas informativas, etc.). */
  --brand2:   #3b5cc4;   /* base    — color secundario */
  --brand2-d: #2f49a0;   /* oscuro  — hover / estados activos */
  --brand2-l: #c5d5fb;   /* claro   — bordes */
  --brand2-f: #e8f0fe;   /* fondo   — fondos suaves */

  /* Alias retro-compatibles del color secundario (no eliminar: usados por
     admin.css y otras vistas). Apuntan al color secundario de arriba. */
  --blue:     var(--brand2);
  --blue-bg:  var(--brand2-f);

  /* ── NEUTROS / TINTA ───────────────────────────────────────────────────
     Escala de grises para texto, bordes y fondos. */
  --ink-900: #111110;   /* texto principal / fondos oscuros */
  --ink-700: #3a3936;
  --ink-500: #6b6a67;
  --ink-300: #b0afa9;
  --ink-100: #e8e7e2;   /* bordes */
  --ink-050: #f5f4f0;   /* fondo de página */
  --white:   #fff;

  /* ── COLORES SEMÁNTICOS (estado) ───────────────────────────────────────
     Éxito, aviso, error e información, cada uno con su fondo suave. */
  --ok:    #1d7a4e;  --ok-bg:   #eaf5ee;
  --warn:  #9a5a00;  --warn-bg: #fdf3e0;
  --err:   #c0392b;  --err-bg:  #fdecea;
  --info:  #1a6fa0;  --info-bg: #e8f4fc;

  /* ── RADIOS ────────────────────────────────────────────────────────────*/
  --r:  10px;   /* radio estándar */
  --rl: 16px;   /* radio grande (tarjetas, modales) */

  /* ── SOMBRAS ───────────────────────────────────────────────────────────*/
  --sh0: 0 1px 3px  rgba(0,0,0,.07);
  --sh1: 0 2px 8px  rgba(0,0,0,.09);
  --sh2: 0 4px 20px rgba(0,0,0,.12);
  --sh3: 0 16px 48px rgba(0,0,0,.22);

  /* ── TIPOGRAFÍA ────────────────────────────────────────────────────────*/
  --font: 'DM Sans', sans-serif;
  --disp: 'DM Serif Display', serif;

  /* ── TRANSICIÓN ────────────────────────────────────────────────────────*/
  --ease: 180ms cubic-bezier(.4,0,.2,1);

  /* ── MEDIDAS DE LAYOUT ─────────────────────────────────────────────────*/
  --top:  60px;   /* alto de la topbar */
  --wiz:  46px;   /* alto de la barra del wizard */
  --side: 240px;  /* ancho del sidebar */
}

/* ── LOGO COMO IMAGEN ──────────────────────────────────────────────────────
   Cuando B2B_LOGO está configurado en el .env, el partial partials._logo
   imprime <img class="brand-img"> dentro del contenedor del logo. Estas
   reglas dimensionan la imagen según el contexto. Si no hay logo configurado
   se imprime el texto de marca y estas reglas no aplican. */
.logo    .brand-img{height:59px;width:auto;display:block}                 /* topbar (wizard/admin) */
.lv-logo .brand-img{height:46px;width:auto;display:block;margin-bottom:4px} /* auth — panel oscuro */
.lf-logo .brand-img{height:89px;width:auto;display:block}                 /* auth — panel claro  */