/* ============================================================
   Colegio Le Petit Prince — tokens de diseño
   Paleta medida del escudo: azul real, rojo script, laurel, corona
   ============================================================ */
:root {
  /* Color — roles del escudo */
  --azul-real: oklch(0.32 0.13 268);
  --azul-800: oklch(0.28 0.115 268);
  --azul-noche: oklch(0.22 0.09 268);
  --azul-600: oklch(0.42 0.14 268);
  --azul-100: oklch(0.93 0.03 262);

  --rojo: oklch(0.55 0.2 25);
  --rojo-700: oklch(0.47 0.18 25);

  --laurel: oklch(0.8 0.19 125);
  --laurel-700: oklch(0.55 0.14 130);   /* texto verde accesible */
  --laurel-100: oklch(0.95 0.06 125);

  --corona: oklch(0.87 0.155 90);
  --corona-600: oklch(0.78 0.15 85);
  --corona-100: oklch(0.96 0.055 95);

  --cielo: oklch(0.945 0.025 250);      /* fondo alterno frío */
  --blanco: oklch(0.99 0.004 260);
  --tinta: oklch(0.25 0.045 268);
  --tinta-suave: oklch(0.38 0.045 268);
  --linea: oklch(0.88 0.02 262);

  --wa: #25d366;

  /* Sobre azul (hero/footer) */
  --sobre-azul: oklch(0.97 0.01 262);
  --sobre-azul-suave: oklch(0.84 0.035 262);

  /* Tipografía */
  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;
  --font-script: "Pacifico", cursive;

  --fs-hero: clamp(2.3rem, 1.2rem + 4.8vw, 4.3rem);
  --fs-h2: clamp(1.7rem, 1.1rem + 2.4vw, 2.7rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.65rem);
  --fs-lead: clamp(1.06rem, 1rem + 0.35vw, 1.25rem);

  /* Espaciado fluido */
  --sp-section: clamp(3.2rem, 2rem + 5vw, 6.5rem);
  --sp-block: clamp(1.6rem, 1.2rem + 1.6vw, 2.8rem);

  --container: 1140px;
  --radius: 18px;
  --radius-lg: 26px;

  --shadow-soft: 0 6px 24px oklch(0.32 0.13 268 / 0.1);
  --shadow-pop: 0 3px 0 oklch(0.28 0.115 268 / 0.85);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* z-scale semántica */
  --z-sticky: 40;
  --z-backdrop: 50;
  --z-drawer: 60;
  --z-modal: 70;
  --z-fab: 45;
}