/* =============================================================================
   ESD LAB - tokens: paleta de colores, espaciado, tipografía fluida y
   breakpoints canónicos. Movido tal cual desde static/styles.css (A7.1),
   sin cambiar ningún valor ni selector.
   ============================================================================= */

/* =============================================================================
   VARIABLES CSS - Paleta de colores del laboratorio (LIGHT MODE)
   ============================================================================= */
:root {
  /* Brand */
  --esd-orange: #d97c2c;
  --esd-orange-light: #E17A47;
  --esd-orange-dark: #AD552B;

  /* Beiges */
  --esd-beige: #F5E6D3;
  --esd-beige-light: #FAF3E8;

  /* Dark foundations (re-mapeadas para light) */
  --esd-bg-dark: #FAF3E8;         /* fondo */
  --esd-bg-dark-2: #F5E6D3;       /* 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(205, 104, 57, 0.18);

  /* Text (light mode) */
  --esd-text-dark: #231B16;       /* texto principal */
  --esd-text-medium: rgba(35, 27, 22, 0.78);
  --esd-text-light: rgba(35, 27, 22, 0.62);

  /* States */
  --esd-success: #16a34a;
  --esd-warning: #d97706;
  --esd-danger: #dc2626;
  --esd-info: #2563eb;

  /* Shadows (suaves para light) */
  --shadow-sm: 0 2px 10px rgba(35, 27, 22, 0.10);
  --shadow-md: 0 10px 22px rgba(35, 27, 22, 0.12);
  --shadow-lg: 0 18px 38px rgba(35, 27, 22, 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;
}