/* ==========================================================================
   TOOLBOX · DESIGN TOKENS CANÓNICOS · Fase 8B.1
   --------------------------------------------------------------------------
   Base canónica extraída de la identidad EXISTENTE (fuente: toolbox-config.js
   TOKENS + auditoría de las 9 páginas · ver 23_TOOLBOX_VISUAL_UX_AUDIT.md).
   NO cargar globalmente todavía. Se aplicará por pantallas en 8B.2 / 8B.3.
   Prefijo reservado: --tb-  (sin colisiones: el proyecto no usa variables CSS).
   ========================================================================== */

:root {

  /* ── 1 · COLOR · marca ─────────────────────────────────────────────── */
  --tb-color-primary:        #1E79BB;  /* azul canónico (TOKENS.blue). Absorbe #1F7BBB */
  --tb-color-primary-hover:  #1B5F92;  /* ya usado como hover/deep blue */
  --tb-color-secondary:      #39A4B5;  /* turquesa (TOKENS.teal) */
  --tb-color-accent:         #5FE3AC;  /* verde (TOKENS.green) · solo acento, nunca texto */

  /* ── 1 · COLOR · funcionales ───────────────────────────────────────── */
  --tb-color-success:        #28A66A;  /* superficie/indicador */
  --tb-color-success-text:   #1F7D4E;  /* texto sobre fondo claro (contraste) */
  --tb-color-success-bg:     #E7F6EE;
  --tb-color-warning:        #F0A12A;  /* indicador · NUNCA como texto sobre blanco */
  --tb-color-warning-text:   #B5791F;
  --tb-color-warning-bg:     #FDF1DA;
  --tb-color-danger:         #E5484D;
  --tb-color-danger-text:    #C13A3F;
  --tb-color-danger-bg:      #FCEBEC;
  --tb-color-info:           #1E79BB;
  --tb-color-info-bg:        #EAF4FB;
  --tb-color-blocked:        #7B8794;  /* restringido / no disponible */

  /* ── 1 · COLOR · texto ─────────────────────────────────────────────── */
  --tb-color-text:           #292D32;  /* absorbe #26303A, #1B2733, #1C2430 */
  --tb-color-text-muted:     #5F6B78;  /* secundario · mínimo para texto pequeño */
  --tb-color-text-faint:     #7B8794;  /* terciario · solo ≥12px o no esencial */
  --tb-color-text-inverse:   #FFFFFF;

  /* ── 1 · COLOR · superficies y bordes ──────────────────────────────── */
  --tb-color-bg:             #F4F7FB;
  --tb-color-bg-alt:         #EAF1F6;
  --tb-color-surface:        #FFFFFF;
  --tb-color-surface-tint:   #EAF4FB;  /* absorbe #EAF3FB, #EAF0F5, #E7EEF4, #EEF2F6 */
  --tb-color-border:         #D7E3EA;
  --tb-color-border-strong:  #C3CDD8;
  --tb-color-dark:           #414A59;  /* sidebar HQ / paneles oscuros */

  /* ── 1 · COLOR · foco ──────────────────────────────────────────────── */
  --tb-color-focus:          #1E79BB;
  --tb-focus-ring:           0 0 0 3px rgba(30,121,187,.30);
  /* Regla 8B.2+: nunca outline:none sin box-shadow de foco equivalente. */

  /* ── 1 · GRADIENTES canónicos (únicas 2 variantes permitidas) ──────── */
  --tb-gradient-brand: linear-gradient(90deg,#1F7BBB 0%,#39A4B5 50%,#5FE3AC 100%);
  --tb-gradient-tile:  linear-gradient(135deg,#1E79BB,#39A4B5);
  /* Nota: el arranque #1F7BBB del gradiente se conserva tal cual (identidad
     visual implantada); como color plano el canónico es #1E79BB. */

  /* ── 2 · TIPOGRAFÍA (stack actual · no se importan fuentes nuevas) ─── */
  --tb-font-family:          'Roboto', system-ui, sans-serif;
  --tb-font-family-display:  'Darker Grotesque', sans-serif;

  --tb-font-size-xs:   11px;    /* metadatos, labels uppercase · mínimo absoluto */
  --tb-font-size-sm:   12px;    /* texto auxiliar */
  --tb-font-size-md:   13.5px;  /* texto funcional base */
  --tb-font-size-lg:   16px;    /* énfasis / títulos de card (Roboto) */
  --tb-font-size-xl:   19px;    /* títulos de sección (Darker Grotesque) */
  --tb-font-size-2xl:  24px;    /* títulos de página / cifras KPI (DG) */
  --tb-font-size-3xl:  34px;    /* display / héroe (DG) */

  --tb-font-weight-regular:  400;
  --tb-font-weight-medium:   500;
  --tb-font-weight-semibold: 700;  /* Roboto solo carga 400/500/700: los 600
                                      actuales son peso sintético → migrar */
  --tb-font-weight-display:  800;  /* Darker Grotesque títulos (600/700/800) */

  --tb-line-height-tight:    1.1;   /* títulos DG y cifras */
  --tb-line-height-normal:   1.45;  /* texto funcional */
  --tb-line-height-relaxed:  1.6;   /* párrafos largos */
  --tb-letter-spacing-caps:  .07em; /* labels uppercase */

  /* ── 3 · ESPACIADO (escala canónica) ───────────────────────────────── */
  --tb-space-1:  4px;
  --tb-space-2:  8px;
  --tb-space-3:  12px;
  --tb-space-4:  16px;
  --tb-space-5:  24px;
  --tb-space-6:  32px;
  --tb-space-7:  40px;
  --tb-space-8:  48px;
  /* Valores intermedios actuales (7/9/11/13/14…) se snapean en 8B.2/8B.3
     solo cuando no alteren la composición. */

  /* ── 4 · RADIOS ────────────────────────────────────────────────────── */
  --tb-radius-sm:    8px;    /* chips, inputs compactos */
  --tb-radius-md:    12px;   /* inputs, botones, celdas */
  --tb-radius-card:  16px;   /* cards estándar (absorbe 14/15/16) */
  --tb-radius-lg:    18px;   /* cards destacadas / modales (absorbe 18/20/22) */
  --tb-radius-pill:  999px;
  --tb-radius-full:  50%;

  /* ── 4 · BORDES ────────────────────────────────────────────────────── */
  --tb-border:             1px solid var(--tb-color-border);
  --tb-border-interactive: 1px solid var(--tb-color-border-strong);
  --tb-border-selected:    1.5px solid var(--tb-color-primary);

  /* ── 4 · SOMBRAS (3 niveles + realce de marca) ─────────────────────── */
  --tb-shadow-soft:  0 6px 20px -16px rgba(31,42,58,.40);
  --tb-shadow-raise: 0 20px 48px -18px rgba(41,45,50,.40);
  --tb-shadow-modal: 0 16px 40px -12px rgba(0,0,0,.40);
  --tb-shadow-brand: 0 10px 24px -12px rgba(30,121,187,.55);  /* CTA primario */

  /* ── Z-INDEX (escala coordinada) ───────────────────────────────────── */
  --tb-z-raised:   10;
  --tb-z-sticky:   40;    /* headers pegajosos */
  --tb-z-nav:      60;    /* sidebar / bottom nav */
  --tb-z-drawer:   80;
  --tb-z-modal:    100;
  --tb-z-toast:    120;
  /* toolbox-presenter-badge.js usa 2147483000: excepción documentada (debe
     flotar sobre cualquier shell). No migrar. */

  /* ── MOVIMIENTO ────────────────────────────────────────────────────── */
  --tb-motion-fast: 150ms;   /* hover, toggles */
  --tb-motion-base: 250ms;   /* apertura de cards, fades (absorbe .3s) */
  --tb-motion-slow: 400ms;   /* modales, drawers */
  --tb-ease: cubic-bezier(.25,.6,.3,1);
  /* Uso limitado; todo movimiento respeta prefers-reduced-motion (ya
     presente por página; se centraliza en toolbox-ui-components.css). */
}

/* ── BREAKPOINTS CANÓNICOS (documentación · las media queries no aceptan
      variables; los shells actuales resuelven por estado JS `vw`) ───────
   --tb-bp-mobile:            640px   (existente: 620/640 → 640)
   --tb-bp-tablet-portrait:   720px   (existente: 720)
   --tb-bp-tablet-landscape:  820px   (existente: 820 · HQ colapsa sidebar)
   --tb-bp-desktop:           1000px  (existente: 900/1000 → validar en 8B.2/3)
   --tb-bp-desktop-wide:      1280px  (documental · sin uso actual)
   Regla: ningún breakpoint nuevo sin justificación; 620→640 y 900→1000 se
   consolidan por pantalla en 8B.2/8B.3 con validación visual. */