/* ===================================================
   LAGUA — variables.css
   Design tokens: colores, tipografía, espaciado, radios, sombras
   =================================================== */

:root {
  /* — Colores principales — */
  --azul-marino:    #0b3954;
  --azul:           #00a2ff;
  --azul-marino-2:  #0e4a6e;
  --azul-prof:      #06223a;
  --naranja:        #e08a3e;
  --naranja-hover:  #c97832;
  --verde:          #1f7a4d;
  --verde-claro:    #eafbe9;
  --blanco:         #ffffff;
  --gris-texto:     #333333;
  --gris-medio:     #6a6a6a;
  --gris-claro:     #f5f6f8;
  --crema:          #f7f4ee;
  --crema-fuerte:   #FEFFB9;
  --amarillo:       #ffe434;
  --borde:          #d9dde2;

  /* — Tipografía — */
  --ff-heading: 'Poppins', sans-serif;
  --ff-body:    'Inter', sans-serif;

  /* — Espaciado base — */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  40px;
  --sp-2xl: 64px;
  --sp-3xl: 100px;

  /* — Radios — */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-pill: 30px;
  --r-full: 50%;

  /* — Sombras — */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 6px 20px rgba(0,0,0,0.12);
  --shadow-lg:  0 12px 36px rgba(0,0,0,0.16);
  --shadow-cta: 0 6px 20px rgba(224,138,62,0.4);

  /* — Transiciones — */
  --ease-out: cubic-bezier(.25,.46,.45,.94);
  --ease-spring: cubic-bezier(.7,0,.2,1);

  /* — Layout — */
  --sidebar-w:     96px;
  --sidebar-w-mob: 56px;
  --max-w:         1200px;
}