/* Tokens de diseño — Recreo Picante */
:root {
  /* Colores de marca */
  --color-navy: #0b2e4f;
  --color-ocean: #1c6fb0;
  --color-sky: #5fb6e0;
  --color-gold: #f5b921;
  --color-chili: #e63329;
  --color-sand: #fbf3e3;
  --color-white: #ffffff;

  /* Profundidad marina: escala de navy, de "superficie" (1) a "fondo del mar" (9) — usada como fondo de cada sección para dar sensación de ir bajando en el mar, imitando el fondo azul oscuro de la carta física */
  --depth-1: #114c7c;
  --depth-2: #0f4370;
  --depth-3: #0d3a63;
  --depth-4: #0b2e4f;
  --depth-5: #0a2946;
  --depth-6: #08233c;
  --depth-7: #071e33;
  --depth-8: #051a2b;
  --depth-9: #041522;

  /* Roles semánticos (tema oscuro marino en toda la landing) */
  --color-bg: var(--depth-1);
  --color-bg-alt: var(--depth-2);
  --color-bg-dark: var(--depth-9);
  --color-text: var(--color-sand);
  --color-text-inverse: var(--color-navy);
  --color-text-muted: rgba(251, 243, 227, 0.68);
  --color-accent: var(--color-gold);
  --color-cta: var(--color-chili);
  --color-cta-hover: #ff4d42;
  --color-link: var(--color-sky);

  /* Superficies "vidrio" para tarjetas flotando sobre el fondo marino */
  --surface-bg: rgba(255, 255, 255, 0.055);
  --surface-bg-strong: rgba(255, 255, 255, 0.09);
  --surface-border: rgba(255, 255, 255, 0.14);

  /* Tipografía */
  --font-heading: "Baloo 2", "Fredoka", "Trebuchet MS", sans-serif;
  --font-body: "Poppins", "Inter", "Segoe UI", sans-serif;
  --font-marker: "Permanent Marker", "Baloo 2", cursive;

  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.75rem;
  --fs-3xl: 3.5rem;

  /* Espaciado */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 6rem;

  /* Layout */
  --container-max: 1200px;
  --container-padding: 1.25rem;
  --header-height: 76px;

  /* Bordes / sombras */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.75rem;
  --radius-full: 999px;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.48);

  /* Glassmorphism (header flotante sobre el fondo marino) */
  --glass-bg: rgba(4, 21, 34, 0.78);
  --glass-bg-dark: rgba(4, 21, 34, 0.55);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-blur: 14px;

  /* Transiciones */
  --transition-fast: 0.2s ease;
  --transition-base: 0.35s ease;
  --transition-slow: 0.6s ease;

  /* Z-index */
  --z-header: 100;
  --z-lightbox: 200;
  --z-whatsapp-float: 150;
}