/**
 * Colegio Latino — Variables de diseño
 * Paleta institucional obligatoria (Sprint CL-WEB 0.1, anexo de dirección visual):
 *   --color-blue:  #023c90
 *   --color-green: #bcf568
 *   --color-white: #ffffff
 * Complementada únicamente con grises claros y neutros.
 *
 * Breakpoints documentados (mobile-first):
 *   --bp-xs:  360px  (móviles pequeños)
 *   --bp-sm:  600px  (móviles grandes / phablets)
 *   --bp-md:  768px  (tablet)
 *   --bp-lg:  1024px (tablet horizontal / laptop pequeño)
 *   --bp-xl:  1200px (escritorio)
 *   --bp-2xl: 1440px (escritorio grande)
 * Los media queries usan estos valores como literales (CSS no permite
 * var() dentro de @media), documentados aquí como referencia única.
 */

:root {
  /* ---- Paleta institucional ---- */
  --color-blue: #023c90;
  --color-green: #bcf568;
  --color-white: #ffffff;

  --color-primary: #023c90;
  --color-primary-dark: #012b68;
  --color-primary-deep: #011f4d;
  --color-primary-soft: #e8f0fb;

  --color-accent: #bcf568;
  --color-accent-soft: #e8ffc7;
  --color-accent-dark: #74a82e;

  --color-background: #f7f9fc;
  --color-background-alt: #eef2f6;
  --color-surface: #ffffff;

  --color-text: #10213a;
  --color-text-soft: #4d5d72;
  --color-text-muted: #6f7d90;

  --color-border: #dfe5ec;
  --color-border-soft: #edf1f5;

  --color-on-primary: #ffffff;
  --color-on-accent: #012b68;

  --color-success: #1f7a4d;
  --color-warning: #a8660c;
  --color-error: #b3261e;

  /* ---- Tipografía ---- */
  --font-family-base:
    "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-family-display: var(--font-family-base);

  --font-size-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --font-size-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --font-size-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --font-size-md: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --font-size-lg: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --font-size-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --font-size-2xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  --font-size-hero: clamp(2.8rem, 2rem + 4.2vw, 6.5rem);

  --line-height-tight: 1.02;
  --line-height-snug: 1.25;
  --line-height-normal: 1.55;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  /* ---- Espaciado ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;

  /* ---- Radios ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --radius-blob: 42% 58% 65% 35% / 45% 40% 60% 55%;

  /* ---- Contenedores ----
     Sistema de tres anchos (auditado y corregido en CL-WEB 0.1.2: antes
     todas las secciones usaban un único --container-max de 1280px sin
     variante amplia, lo que dejaba márgenes laterales excesivos en
     pantallas de 1600-1920px sin que ninguna sección aprovechara ese
     espacio adicional).
       --container-default: secciones generales (hero, footer, header).
       --container-wide: secciones visuales que deben respirar más en
         escritorio grande (niveles, bento, trayectoria).
       --container-reading: texto largo (legal, editorial, FAQ). */
  --container-default: 1280px;
  --container-wide: 1520px;
  --container-reading: 760px;
  --gutter-desktop: 48px;
  --gutter-tablet: 32px;
  --gutter-mobile: 20px;
  --container-padding: clamp(1.25rem, 5vw, 3rem);

  /* Anchos de medida tipográfica (evitan que todo el sitio use el mismo
     ancho reducido de texto — ver README > "Ancho de textos"). */
  --measure-hero: 56ch;
  --measure-editorial: 62ch;
  --measure-reading: 42ch;
  --measure-legal: 48ch;

  /* ---- Sombra ---- */
  --shadow-sm: 0 2px 8px rgba(2, 25, 64, 0.08);
  --shadow-md: 0 10px 28px rgba(2, 25, 64, 0.12);
  --shadow-lg: 0 24px 56px rgba(2, 25, 64, 0.16);
  --shadow-glow: 0 0 0 1px rgba(188, 245, 104, 0.4), 0 12px 32px rgba(2, 60, 144, 0.18);

  /* ---- Transiciones ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 160ms var(--ease-out);
  --transition-base: 260ms var(--ease-out);
  --transition-slow: 480ms var(--ease-out);

  /* ---- Cabecera ---- */
  --header-height: 84px;
  --header-height-scrolled: 66px;

  /* ---- Z-index ---- */
  --z-base: 1;
  --z-decor: 0;
  --z-header: 100;
  --z-mobile-menu: 200;
  --z-skip-link: 999;

  color-scheme: light;
}

/* ---- Personalidad visual por nivel educativo ----
   Cada tema ajusta el acento decorativo y la intensidad del verde,
   sin romper la identidad institucional común (azul + verde + blanco). */

body.theme-preschool {
  --level-color: #023c90;
  --level-accent: #bcf568;
  --level-shape-radius: var(--radius-blob);
  --level-rhythm: var(--space-lg);
}

body.theme-primary {
  --level-color: #023c90;
  --level-accent: #bcf568;
  --level-shape-radius: var(--radius-xl);
  --level-rhythm: var(--space-xl);
}

body.theme-secondary {
  --level-color: #012b68;
  --level-accent: #bcf568;
  --level-shape-radius: var(--radius-md);
  --level-rhythm: var(--space-xl);
}

body.theme-highschool {
  --level-color: #011f4d;
  --level-accent: #bcf568;
  --level-shape-radius: var(--radius-sm);
  --level-rhythm: var(--space-2xl);
}