/* ===========================================================
   CECH — Variables globales (design tokens)
   Fuente: dirección estética aprobada — paleta del logo oficial,
   Alata (titulares/encabezados) + Public Sans (cuerpo/UI).
   Cargar antes que base.css y antes que cualquier CSS de página.
   =========================================================== */

:root {
  /* ---- Paleta cruda (logo oficial CECH) ---- */
  --cech-navy: #183660;
  --cech-navy-ink: #12294a; /* navy oscurecido — franjas institucionales */
  --cech-olive: #98ba51;
  --cech-magenta: #a41f73;
  --cech-magenta-hover: #8d1a63;
  --cech-teal: #59999b;
  --cech-bone: #fafaf8;
  --cech-charcoal: #2a2a2a;

  /* Neutros derivados (hueso + teal) para bordes/divisores — nunca gris puro */
  --cech-border: #e8efee;
  --cech-border-strong: #dae7e5;
  --cech-panel-tint: #e2ebea; /* hueso + teal diluido — panel del hero, nunca azul pastel genérico */

  /* ---- Tokens semánticos — usar estos en componentes, no la paleta cruda ---- */
  --color-bg: var(--cech-bone);
  --color-panel: var(--cech-panel-tint);
  --color-bg-inverted: var(--cech-navy);
  --color-bg-inverted-ink: var(--cech-navy-ink);
  --color-surface: #ffffff;

  --color-text: var(--cech-charcoal);
  --color-text-inverted: var(--cech-bone);
  --color-text-muted: var(--cech-teal);
  --color-heading: var(--cech-navy);
  --color-heading-inverted: var(--cech-bone);

  /* El magenta es el elemento firma: solo CTA primario y el trazo de firma */
  --color-accent: var(--cech-magenta);
  --color-accent-hover: var(--cech-magenta-hover);
  --color-growth: var(--cech-olive); /* cifras, etiquetas de estado positivo */

  --color-border: var(--cech-border);
  --color-border-strong: var(--cech-border-strong);
  --color-focus: var(--cech-navy);

  /* ---- Tipografía ---- */
  --font-display: 'Alata', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  /* Escala tipográfica */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem; /* tamaño de lectura del cuerpo */
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); /* h1 de página */
  --text-4xl: clamp(2.5rem, 1.3rem + 4vw, 4.5rem); /* hero — uso puntual */

  /* ---- Espaciado (escala base 4px) ---- */
  --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;
  --space-9: 6rem;

  /* ---- Layout ---- */
  --content-max-width: 1280px;
  --content-padding: clamp(1.25rem, 5vw, 2.5rem);
  --header-height: 104px;

  /* Superficie translúcida del header fijo (glassmorphism) */
  --color-surface-glass: rgba(255, 255, 255, 0.78);

  /* ---- Bordes y sombra ---- */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-3xl: 40px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(24, 54, 96, 0.06);
  --shadow-md: 0 8px 24px -12px rgba(24, 54, 96, 0.18);
  --shadow-lg: 0 24px 60px -14px rgba(24, 54, 96, 0.22);

  /* ---- Movimiento ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}