/* ============================================================================
   tokens.css — LA única casa de tokens de la plataforma.
   Fuente normativa: docs/GUIA_ESTILOS.md (léela antes de tocar este archivo).
   Nada de literales (hex, rgba, font-family, font-size en px) fuera de aquí
   y de fonts.css: todo lo demás consume var(--...). Ver scripts/lint_estilos.py.
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------------
     1. TIPOGRAFIA — §1 de la guia
     --------------------------------------------------------------------- */

  /* 1.1 Familias (exactamente 3, con fallback unificado) */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;
  --font-display: "Newsreader", Georgia, serif;

  /* 1.2 Escala tipografica (15 pasos) */
  --fs-display-xl: 48px;
  --fs-display: 40px;
  --fs-title-1: 32px;
  --fs-title-2: 28px;
  --fs-num-lg: 26px;
  --fs-num: 21px;
  --fs-num-sm: 18px;
  --fs-prose: 16px;
  --fs-body: 15px;
  --fs-ui: 13.5px;
  --fs-data: 13px;
  --fs-caption: 12px;
  --fs-label: 11px;
  --fs-micro: 10px;
  --fs-nano: 9px;

  /* 1.3 Tracking (5) */
  --track-num: -0.02em;
  --track-title: -0.01em;
  --track-th: 0.04em;
  --track-kicker: 0.08em;
  --track-wide: 0.12em;

  /* 1.3 Interlineado (5) */
  --lh-num: 1;
  --lh-title: 1.1;
  --lh-ui: 1.4;
  --lh-prose: 1.5;
  --lh-narrative: 1.6;

  /* ---------------------------------------------------------------------
     3. COLOR — §3 de la guia (un tono por rol)
     --------------------------------------------------------------------- */

  /* 3.1 Marca (no semanticos) */
  --brand-red: #D8261A;
  --brand-orange: #E0631F;
  --brand-green: #0E9C4E;
  /* Marca HIT 360 (login). Muestreados del logo: el cian del
     rotulo y los dos desplazamientos que lo acompanan. Se van con HIT el dia que
     tenga su propia app. */
  --hit-cyan: #50C0E0;
  --hit-red: #E00030;
  --hit-lime: #C0D020;
  --hit-deep: #0B2432;
  --hit-deep-2: #061620;
  --navy: #1E2A3A;
  --navy-deep: #14202E;

  /* 3.2 Semanticos de estado */
  --pos: #0E8A45;
  --pos-soft: #E7F2EB;
  --pos-on-dark: #7EE2A8;
  --neg: #C1271C;
  --neg-soft: #FBE9E6;
  --neg-on-dark: #FF9C90;
  --neg-border-soft: #F0D4CE;
  --warn: #9A6B1E;
  --warn-bg: #FBF6EC;
  --warn-bd: #EDE2CC;
  --progress: #D89A2A;
  --progress-soft: #f5e3bd;
  --ref: #B08A3E;
  /* Azul de «en construccion»: el unico color que la paleta no tenia (lienzo v4) */
  --build: #2F5D8C;
  --build-soft: #E9F0F7;

  /* 3.3 Neutrales */
  --text-1: #1B1A17;
  --text-2: #75706A;
  --text-3: #A39C90;
  --text-mono: #8A8475;
  --ink-soft: #3A3630;
  --muted-ref: #C7C0B4;
  --ly-bar: #D6CFC2;
  --line-1: #E8E3DA;
  --line-2: #F1ECE3;
  --line-4: #D8D2C7;
  --track-bg: #F4F1EB;
  --pill-neutral-bg: #EFEAE1;
  --bg-app: #FAF8F4;
  --bg-surface: #fff;
  --bg-hover: #FBF9F5;
  --surface-dark: #1B1A17;
  --surface-dark-2: #23201B;
  --text-on-dark: #E9E4DA;
  --on-navy: #F6F1E8;
  --seq-1: #1E2A3A;
  --seq-2: #46586C;
  --seq-3: #6E7E90;
  --seq-4: #98A5B3;
  --seq-5: #C3CCD6;
  --overlay: rgba(27, 26, 23, 0.46);
  --ring-focus: rgba(30, 42, 58, 0.12);

  /* ---------------------------------------------------------------------
     5. ESPACIADO — §5 de la guia (rejilla 2px hasta 16, luego pasos de 4)
     Obligatorio para código nuevo; el espaciado existente no se migra en
     esta pasada (decision del plan 0.2).
     --------------------------------------------------------------------- */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 14px;
  --sp-8: 16px;
  --sp-9: 20px;
  --sp-10: 24px;
  --sp-11: 28px;
  --sp-12: 32px;

  /* ---------------------------------------------------------------------
     Radios, sombras y layout — no catalogados en la guia como "color" o
     "tipografia", pero viven aqui igual: tokens.css es la unica casa.
     --------------------------------------------------------------------- */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.32);
  /* Elevacion intermedia, para lo que FLOTA sobre el contenido sin llegar a
     tomar la pantalla: paneles de desplegable, tarjetas veladas. La usaba
     hit360.css desde el principio (--shadow-pop) pero nadie la habia definido,
     asi que esos elementos salian planos y sin que nada avisara. El valor es el
     mismo que el reporte ejecutivo ya usa para sus elementos elevados, para que
     las dos pantallas hablen la misma escala de elevacion. */
  --shadow-pop: 0 10px 28px color-mix(in srgb, var(--text-1) 12%, transparent);
  --r-card: 8px;
  --r-modal: 14px;
  --r-pill: 999px;
  --r-seg: 7px;
  --maxw: 1320px;
  /* Barra inferior móvil: su alto, y la franja al pie que lo flotante (la burbuja
     de Mía) deja libre. La franja vale 0; app.css la sube cuando hay barra. */
  --bottomnav-h: 51px;
  --float-inset-bottom: 0px;
}

/* ============================================================================
   Clases de rol .t-* — §2 de la guia (taxonomia de elementos).
   Leen SOLO tokens. Definidas aqui como catalogo completo; su aplicacion
   masiva en HTML/JS llega con la componentizacion (Ola 3) — la unica
   aplicada ya es .t-title-2 en el h2 "Por tienda" de Hoy (app.js).
   ============================================================================ */

/* T1 — Titulo de area/pagina: siempre <h1>, uno por pantalla. Movil: --fs-num-lg */
.t-title-1 {
  font-family: var(--font-display);
  font-size: var(--fs-title-1);
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: var(--track-title);
  line-height: var(--lh-title);
}
.app-root.is-mobile .t-title-1 { font-size: var(--fs-num-lg); }

/* T2 — Titulo de modal */
.t-title-2 {
  font-family: var(--font-display);
  font-size: var(--fs-title-2);
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: var(--track-title);
  line-height: var(--lh-title);
}

/* T3 — Titulo de seccion de modal */
.t-title-3 {
  font-family: var(--font-display);
  font-size: var(--fs-num-sm);
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: var(--track-title);
}

/* K1 — Kicker/eyebrow estandar */
.t-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--text-3);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
}

/* K2 — Kicker denso (modulos internos) */
.t-kicker-sm {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  color: var(--text-3);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
}

/* K3 — Kicker ceremonial */
.t-kicker-wide {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  color: var(--text-3);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* TH — Encabezado de tabla (todas las generaciones se unifican aqui) */
.t-th {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--text-mono);
  letter-spacing: var(--track-th);
  text-transform: uppercase;
}

/* N1a — Numero hero de pagina (secundarios: --fs-display) */
.t-num-hero {
  font-family: var(--font-sans);
  font-size: var(--fs-display-xl);
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: var(--track-num);
  line-height: var(--lh-num);
}

/* N1b — Numero hero editorial (modal): Newsreader, no Sans — decision codificada */
.t-num-hero-ed {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: var(--track-num);
  line-height: var(--lh-num);
}

/* N2 — Valor KPI */
.t-num-kpi {
  font-family: var(--font-sans);
  font-size: var(--fs-num);
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: var(--track-num);
}

/* N3 — Cifra grande secundaria */
.t-num-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-num-lg);
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: var(--track-num);
}

/* D1 — Delta/variacion: color semantico via cv() (JS), no fijo aqui.
   Variante pildora: --fs-data. */
.t-delta {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
}

/* TD — Celda de dato de tabla: canon Sans+tabular (mono en mini-tablas queda
   deprecado hasta que cada modulo se componentice, Ola 3) */
.t-cell {
  font-family: var(--font-sans);
  font-size: var(--fs-data);
  font-weight: 400;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

/* C1 — Cifra tecnica mono: timestamps, ejes, metadatos, rank #, SQL */
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-mono);
}

/* B1 — Cuerpo/copy */
.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-data);
  font-weight: 400;
  color: var(--text-2);
  line-height: var(--lh-prose);
}

/* B2 — Narrativa editorial */
.t-narrative {
  font-family: var(--font-display);
  font-size: var(--fs-prose);
  font-weight: 400;
  color: var(--ink-soft);
  line-height: var(--lh-narrative);
}

/* F1 — Nota al pie/hint */
.t-hint {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--text-3);
}

/* CH — Chip/pildora: color segun variante */
.t-chip {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
}

/* CH2 — Badge minimo (EST): color segun variante */
.t-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  font-weight: 600;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
}

/* BT — Boton/tab: tamaño segun variante (tab --fs-ui · boton --fs-caption ·
   denso --fs-label · CTA --fs-body); peso 600 (tab inactivo 500); color
   segun variante. Cada componente sigue fijando su propio tamaño hasta la
   componentizacion. */
.t-btn {
  font-family: var(--font-sans);
  font-weight: 600;
}

/* TO — Toast */
.t-toast {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: var(--track-th);
}

/* Base: sin rebote de scroll en la raíz. En iOS el rebote levantaba la barra inferior fija dejando un hueco. */
html { overscroll-behavior-y: none; }