/**
 * Aula Verde · sistema responsive (tokens)
 * Breakpoints de referencia (usar literales en @media):
 *   390 · 480 · 768 · 1024 · 1280 · 1440
 */
:root {
  /* Breakpoints (documentación / JS; no válidos dentro de @media) */
  --bp-xs: 390px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;

  /* Safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-page: 16px;
  --space-gap: 12px;

  /* Touch */
  --touch-target: 48px;
  --touch-target-min: 44px;

  /* Radii */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Shell chrome */
  --header-h: 56px;
  --dock-h: 72px;
  --region-side-w: 390px;
  --sheet-max: 760px;
  --sheet-w-desktop: min(var(--sheet-max), 42vw);
  --modal-max: 1180px;
  --map-min-h: 52dvh;

  /* Reserva espacial Cordobéz (mapa/dock) */
  --cordobez-w: 162px;
  --cordobez-face: 124px;
  --cordobez-reserve-x: 172px;
  --cordobez-reserve-y: 12px;

  /* Typography (fluid) */
  --fs-display: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);
  --fs-h1: clamp(1.5rem, 1.15rem + 1.6vw, 2.75rem);
  --fs-h2: clamp(1.25rem, 1.05rem + 1vw, 2rem);
  --fs-h3: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  --fs-body: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  --fs-label: clamp(0.6875rem, 0.65rem + 0.15vw, 0.8125rem);
  --fs-helper: clamp(0.75rem, 0.72rem + 0.1vw, 0.875rem);

  /* Z-index scale */
  --z-base: 0;
  --z-map: 10;
  --z-hotspots: 20;
  --z-hud: 40;
  --z-dock: 50;
  --z-cordobez: 60;
  --z-drawer: 70;
  --z-sheet-backdrop: 80;
  --z-sheet: 90;
  --z-modal-backdrop: 100;
  --z-modal: 110;
  --z-toast: 120;
  --z-critical: 130;

  --av-focus-ring: #9be7c0;
}

@media (max-width: 389.98px) {
  :root {
    --cordobez-w: 144px;
    --cordobez-face: 110px;
    --cordobez-reserve-x: 156px;
    --cordobez-reserve-y: 10px;
  }
}

@media (min-width: 768px) {
  :root {
    --space-page: 20px;
    --space-gap: 16px;
    --header-h: 64px;
    --dock-h: 80px;
    --map-min-h: 60dvh;
    --cordobez-w: 188px;
    --cordobez-face: 148px;
    --cordobez-reserve-x: 200px;
    --cordobez-reserve-y: 8px;
  }
}

@media (min-width: 1024px) {
  :root {
    --region-side-w: 400px;
    --sheet-w-desktop: min(var(--sheet-max), 38vw);
    --cordobez-w: 206px;
    --cordobez-face: 162px;
    --cordobez-reserve-x: 0px;
    --cordobez-reserve-y: 0px;
  }
}

@media (min-width: 1280px) {
  :root {
    --space-page: 24px;
    --region-side-w: 420px;
  }
}

@media (min-width: 1440px) {
  :root {
    --space-page: 28px;
  }
}