/* ============================================================
   COLEGIO MARCELINA — VARIABLES GLOBALES
   Sistema de diseño centralizado v1.0
   Basado en diseño aprobado por cliente
   ============================================================ */

:root {

  /* ──────────────────────────────────────────
     TIPOGRAFÍA — Fuentes globales
  ────────────────────────────────────────── */

  /* Sans — Manrope: cuerpo, UI, navegación, formularios */
  --sans:   "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Serif — Newsreader: títulos editoriales, énfasis italic */
  --serif:  "Newsreader", "Source Serif Pro", Georgia, "Times New Roman", serif;

  /* Alias rápido para easing principal — equivalente a --ease-smooth */
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);


  /* ──────────────────────────────────────────
     COLORES PRINCIPALES
  ────────────────────────────────────────── */

  /* Índigo — color institucional primario */
  --color-indigo:          #4C48C8;
  --color-indigo-vivid:    #3D38E8;
  --color-indigo-dark:     #1A55E0;
  --color-indigo-deeper:   #1E1B4B;

  /* Navy — navbar, footer, fondos oscuros */
  --color-navy:            #162F6E;

  /* Azul eléctrico — acentos y gradientes */
  --color-blue-electric:   #1A72FF;

  /* Cyan — acentos secundarios y hover states */
  --color-cyan:            #00C2F0;

  /* Lima — CTA principal, acentos positivos */
  --color-lima:            #84CC16;
  --color-lima-dark:       #65A30D;

  /* Rojo — exclusivo para botón admisiones y CTA urgente */
  --color-red:             #CC2936;
  --color-red-dark:        #B31C27;

  /* WhatsApp */
  --color-whatsapp:        #22C55E;
  --color-whatsapp-dark:   #16A34A;


  /* ──────────────────────────────────────────
     COLORES POR NIVEL EDUCATIVO
  ────────────────────────────────────────── */

  --color-nivel-preescolar:   #E8850A;
  --color-nivel-primaria:     #65A30D;
  --color-nivel-secundaria:   #4C48C8;
  --color-nivel-preparatoria: #CC2936;


  /* ──────────────────────────────────────────
     COLORES DE TEXTO
  ────────────────────────────────────────── */

  --color-text-primary:    #0F0E24;
  --color-text-muted:      #5B5B80;
  --color-text-subtle:     #9090B8;
  --color-text-light:      rgba(255, 255, 255, 0.92);
  --color-text-light-mid:  rgba(255, 255, 255, 0.55);
  --color-text-light-low:  rgba(255, 255, 255, 0.38);


  /* ──────────────────────────────────────────
     BACKGROUNDS
  ────────────────────────────────────────── */

  /* Superficies claras */
  --bg-surface:            #FAFBFF;
  --bg-off:                #F4F6FF;
  --bg-white:              #FFFFFF;

  /* Pale tints — fondos de sección alternada */
  --bg-indigo-pale:        #EEF2FF;
  --bg-lima-pale:          #F7FEE7;
  --bg-cyan-pale:          #E6F6FF;

  /* Fondos oscuros */
  --bg-dark:               #1E1B4B;
  --bg-navy:               #162F6E;
  --bg-indigo:             #4C48C8;

  /* Overlay oscuro para imágenes */
  --bg-overlay-dark:       rgba(13, 11, 43, 0.65);
  --bg-overlay-mid:        rgba(13, 11, 43, 0.45);


  /* ──────────────────────────────────────────
     SOMBRAS
  ────────────────────────────────────────── */

  --shadow-sm:   0 1px 4px rgba(15, 14, 36, 0.07);
  --shadow-md:   0 4px 18px rgba(15, 14, 36, 0.09);
  --shadow-lg:   0 16px 48px rgba(15, 14, 36, 0.13);
  --shadow-xl:   0 32px 80px rgba(15, 14, 36, 0.18);

  /* Sombras de color para botones */
  --shadow-lima: 0 2px 10px rgba(132, 204, 22, 0.30);
  --shadow-lima-hover: 0 7px 24px rgba(132, 204, 22, 0.45);
  --shadow-red:  0 2px 8px rgba(204, 41, 54, 0.30);
  --shadow-red-hover: 0 5px 18px rgba(204, 41, 54, 0.45);

  /* Sombra focus ring en inputs */
  --shadow-focus: 0 0 0 3px rgba(76, 72, 200, 0.08);


  /* ──────────────────────────────────────────
     BORDER RADIUS
  ────────────────────────────────────────── */

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;


  /* ──────────────────────────────────────────
     SPACING — Escala de 4px base
  ────────────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* Spacing fluido para secciones — clamp responsive */
  --section-padding-y:   clamp(56px, 7vw, 96px);
  --section-padding-x:   clamp(20px, 5vw, 72px);
  --section-gap:         clamp(32px, 5vw, 72px);


  /* ──────────────────────────────────────────
     TRANSITIONS
  ────────────────────────────────────────── */

  --ease-smooth:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: ease;

  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:   all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-reveal: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                       transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);


  /* ──────────────────────────────────────────
     TAMAÑOS MÁXIMOS DE CONTENEDOR
  ────────────────────────────────────────── */

  --container-xs:    480px;
  --container-sm:    640px;
  --container-md:    768px;
  --container-lg:    1024px;
  --container-xl:    1280px;
  --container-full:  1440px;

  /* Ancho máximo de texto legible */
  --container-prose: 680px;

  /* Navbar height — referencia para sticky offsets */
  --navbar-height:   66px;


  /* ──────────────────────────────────────────
     BORDES
  ────────────────────────────────────────── */

  --border-default:  1px solid rgba(76, 72, 200, 0.08);
  --border-medium:   1px solid rgba(76, 72, 200, 0.16);
  --border-strong:   1px solid rgba(76, 72, 200, 0.30);
  --border-light:    1px solid rgba(255, 255, 255, 0.09);

}