/* =============================================================================
   BabelOS Lab — tokens: paleta de colores, espaciado, tipografía fluida y
   breakpoints canónicos. Basado en la estructura de tokens del proyecto de
   referencia, pero con una paleta propia (azul/pizarra, fría) en vez del
   naranja/beige cálido original — para que esta demo se sienta parte de
   BabelOS (que usa azules, verde-azulado y grises Win95) y no una copia
   literal del branding del proyecto real.
   ============================================================================= */

:root {
  /* Brand — azul pizarra, en la misma familia que los íconos de BabelOS
     (CV #3860a0, User #6080b0, News #4060a0) */
  --esd-orange: #3D6B96;
  --esd-orange-light: #5C89B3;
  --esd-orange-dark: #2A4D6E;

  /* Neutros fríos (antes "beiges" cálidos) */
  --esd-beige: #E4E9EF;
  --esd-beige-light: #F1F4F8;

  /* Dark foundations (re-mapeadas para light) */
  --esd-bg-dark: #F1F4F8;         /* fondo */
  --esd-bg-dark-2: #E4E9EF;       /* fondo profundo */
  --esd-surface-dark: rgba(255, 255, 255, 0.86);    /* superficies */
  --esd-surface-dark-2: rgba(255, 255, 255, 0.92);  /* superficies elevadas */
  --esd-border-dark: rgba(61, 107, 150, 0.18);

  /* Text (light mode) — gris pizarra frío, no marrón cálido */
  --esd-text-dark: #1E2A38;       /* texto principal */
  --esd-text-medium: rgba(30, 42, 56, 0.78);
  --esd-text-light: rgba(30, 42, 56, 0.62);

  /* States (semánticos, universales — se mantienen reconocibles) */
  --esd-success: #16a34a;
  --esd-warning: #d97706;
  --esd-danger: #dc2626;
  --esd-info: #2563eb;

  /* Identidad de "tipo de reserva" del calendario (equipo/sala/toma de
     datos) — colores propios, no atados al azul de marca, para que las 3
     categorías se distingan claramente entre sí y contra el texto oscuro
     que llevan encima (fondos de tinte medio, no pastel). */
  --kind-equipo: #2F6690;
  --kind-equipo-tint: #BCD4EF;
  --kind-sala: #21795A;
  --kind-sala-tint: #B9E2CD;
  --kind-toma: #6B4FA0;
  --kind-toma-tint: #D7C6F0;

  /* Shadows (suaves para light) */
  --shadow-sm: 0 2px 10px rgba(30, 42, 56, 0.10);
  --shadow-md: 0 10px 22px rgba(30, 42, 56, 0.12);
  --shadow-lg: 0 18px 38px rgba(30, 42, 56, 0.16);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
}

/* =============================================================================
   MOBILE-FIRST TOKENS
   Breakpoints canónicos (alineados con Bootstrap):
     sm 576px · md 768px · lg 992px · xxl 1400px
   Regla: el CSS nuevo se escribe mobile-first (base = teléfono) y se mejora
   con media queries min-width. No agregar nuevos breakpoints max-width
   de 400/600/1024px.
   ============================================================================= */
:root {
  /* Escala de espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Tamaño mínimo de objetivo táctil */
  --tap-min: 44px;

  /* Alto aproximado del navbar (para offset de toasts/skip-link en móvil) */
  --esd-nav-h: 64px;
  /* Alto de la barra de navegación inferior en móvil */
  --esd-tabbar-h: 60px;

  /* Tipografía fluida (360px → 1440px) */
  --fs-h1: clamp(1.5rem, 4vw + 0.5rem, 2rem);
  --fs-h2: clamp(1.25rem, 2.5vw + 0.5rem, 1.5rem);
  --fs-h3: clamp(1.1rem, 1.5vw + 0.6rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
}