/* Sand Fun Kids — Design System Tokens + Base Styles */

/* ==========================================================================
   0. Custom Fonts
   ========================================================================== */
@font-face {
  font-family: 'Cheese Matcha';
  src: url('../fonts/Cheese-Matcha.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. CSS Tokens (Custom Properties)
   ========================================================================== */
:root {
  /* Paleta Oficial de la Marca Sand Fun Kids */
  /* 1. Naranja Acción / Conversión (Primario para CTAs y Focos de Atención) */
  --color-secondary:       hsl(18, 90%, 57%);    /* #f46c30 - Botones CTA, Foco Principal */
  --color-secondary-dark:  hsl(18, 92%, 46%);    /* #e25417 - Hover CTA */
  --color-secondary-light: hsl(18, 95%, 94%);    /* #feeee6 - Fondos de alerta y destacados */

  /* 2. Turquesa / Aqua Caribeño (Estructura, Títulos y Confianza) */
  --color-primary:         hsl(182, 69%, 42%);   /* #21b1b6 - Identidad, Enlaces, Iconografía */
  --color-primary-dark:    hsl(182, 75%, 26%);   /* #105558 - Títulos con alto contraste accesible (8.6:1) */
  --color-primary-light:   hsl(182, 60%, 93%);   /* #e4f7f8 - Fondos frescos de cabecera y hero */

  /* 3. Amarillo Sol / Construcción (Atención Secundaria y Alegría) */
  --color-yellow:          hsl(45, 97%, 54%);    /* #fcc117 - Estrellas, Zona Construcción, Badges */
  --color-yellow-dark:     hsl(40, 95%, 40%);    /* #c68502 */
  --color-yellow-light:    hsl(45, 95%, 93%);    /* #fef8e4 */

  /* 4. Verde Sensorial / Lima (Validación, Beneficios y Seguridad) */
  --color-accent:          hsl(83, 47%, 57%);    /* #9ec55d - Zona Sensorial, Acento Natural */
  --color-accent-dark:     hsl(83, 55%, 34%);    /* #4c6819 - Textos y checkmarks con alto contraste */
  --color-accent-light:    hsl(83, 50%, 93%);    /* #f1f8e8 */
  --color-success:         hsl(83, 55%, 38%);    /* Checks '✓' y confirmaciones */

  /* 5. Arena Cálida / Duna de Playa (Textura, Confort y Superficies) */
  --color-sand:            hsl(39, 75%, 75%);    /* #efcd8d - Tono arena playa */
  --color-sand-light:      hsl(39, 50%, 96%);    /* #faf5ec - Fondo de sección cálido */
  --color-sand-border:     hsl(39, 40%, 86%);    /* #e8dcbf - Bordes sutiles orgánicos */

  /* Superficies y Neutros */
  --color-bg:              hsl(39, 40%, 98%);    /* #fdfbf7 - Fondo general con calidez de arena */
  --color-surface:         hsl(0, 0%, 100%);     /* Blanco puro para tarjetas */
  --color-border:          hsl(39, 25%, 88%);    /* Borde suave en armonía */
  
  --color-text:            hsl(198, 55%, 15%);   /* #112a36 - Azul marino profundo legible */
  --color-text-muted:      hsl(198, 20%, 45%);   /* #5c7582 - Texto secundario */
  
  --color-error:           hsl(4, 85%, 52%);

  /* Tipografía */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Cheese Matcha', 'Nunito', sans-serif;
  
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */

  /* Espaciado */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* Bordes más redondeados (Juguetón) */
  --radius-sm:  0.5rem;    /* 8px */
  --radius-md:  1rem;      /* 16px */
  --radius-lg:  1.5rem;    /* 24px */
  --radius-xl:  2rem;      /* 32px */
  --radius-blob: 40px 30px 50px 30px; /* Forma orgánica (nube/arena) */
  --radius-full: 9999px;   /* Pills */

  /* Sombras */
  --shadow-sm:  0 1px 3px hsl(220 25% 15% / 0.06), 0 1px 2px hsl(220 25% 15% / 0.04);
  --shadow-md:  0 4px 12px hsl(220 25% 15% / 0.10), 0 2px 4px hsl(220 25% 15% / 0.06);
  --shadow-lg:  0 10px 30px hsl(220 25% 15% / 0.12), 0 4px 8px hsl(220 25% 15% / 0.08);
  --shadow-xl:  0 20px 60px hsl(220 25% 15% / 0.15);

  /* Transiciones */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Z-index */
  --z-base:    0;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}

/* ==========================================================================
   2. Reset y Base
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.fun-title,
.hero__title,
.card__title,
.section-title {
  font-family: var(--font-heading);
  line-height: 1.2;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

h1 { font-size: var(--text-4xl); font-weight: 800; }
h2 { font-size: var(--text-3xl); font-weight: 700; }
h3 { font-size: var(--text-2xl); font-weight: 600; }
h4 { font-size: var(--text-xl);  font-weight: 600; }

@media (min-width: 768px) {
  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }
  h3 { font-size: var(--text-3xl); }
}

p {
  margin-bottom: var(--space-4);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}



/* ==========================================================================
   3. Utilidades Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* Grid Utilities */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }
.align-start { align-items: start; }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:gap-8 { gap: var(--space-8); }
  .md\:gap-12 { gap: var(--space-12); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:gap-12 { gap: var(--space-12); }
  .lg\:gap-16 { gap: var(--space-16); }
}

.section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
}

.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* Bug #2 fix: Color utilities */
.text-primary-dark  { color: var(--color-primary-dark); }
.text-yellow        { color: var(--color-yellow-dark); }
.text-success       { color: var(--color-success); }

/* Bug #3 fix: Typography & tone utilities */
.text-lg    { font-size: var(--text-lg); }
.text-sm    { font-size: var(--text-sm); }
.text-muted { color: var(--color-text-muted); }

/* Textura y Fondos Cálidos de la Marca */
.bg-sand {
  position: relative;
  background-color: var(--color-sand-light);
  overflow: hidden;
}
.bg-primary-light { background-color: var(--color-primary-light); }
.bg-accent-light  { background-color: var(--color-accent-light); }
.bg-yellow-light  { background-color: var(--color-yellow-light); }
.bg-sand::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0.15;
  pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}

/* Tipografía para títulos principales */
.fun-title {
  display: inline-block;
  letter-spacing: -0.01em;
}