/* ============================================================
   LAIALÁ — DESIGN TOKENS GLOBALES
   Escuela Rayuela · claucraftstudio.com
   Importar este archivo en TODOS los juegos:
   <link rel="stylesheet" href="../../laiala-tokens.css">
   (ajustar la ruta relativa según carpeta del juego)
   ============================================================ */

/* ── TIPOGRAFÍAS (Google Fonts) ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&family=Playfair+Display:wght@400;700&family=Playfair+Display+SC:wght@400;700&display=swap');

/* Bobby Jones Soft y Aloja NO están en Google Fonts.
   Archivos en: rayuela/fonts/
   El tokens.css está en: rayuela/
   Por eso la ruta es fonts/ (sin ../) */
@font-face {
  font-family: 'BobbyJonesSoft';
  src: url('fonts/BobbyJonesSoft.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aloja';
  src: url('fonts/Aloja-Light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── VARIABLES GLOBALES ──────────────────────────────────────── */
:root {

  /* — Colores principales (extraídos del logo Laialá) — */
  --laiala-terracota:     #cd7753;   /* naranja ladrillo — color dominante */
  --laiala-teal:          #50979a;   /* teal vibrante — acento fresco      */
  --laiala-amarillo:      #e0a51a;   /* amarillo dorado — acento luminoso  */
  --laiala-celeste:       #bed5d3;   /* celeste claro — fondo suave        */
  --laiala-teal-medio:    #77a5a1;   /* verde azulado medio                */
  --laiala-marron:        #663b2c;   /* marrón oscuro                      */
  --laiala-gris-tostado:  #74635a;   /* gris tostado — textos secundarios  */
  --laiala-crema:         #eaca6e;   /* amarillo crema — fondo cálido      */
  --laiala-negro:         #1f1816;   /* negro cálido — contornos, textos   */

  /* — Colores semánticos (roles de uso) — */
  --color-primario:       var(--laiala-terracota);
  --color-secundario:     var(--laiala-teal);
  --color-acento:         var(--laiala-amarillo);
  --color-fondo-claro:    var(--laiala-celeste);
  --color-fondo-calido:   #fdf6ec;   /* blanco cremoso para fondos de página */
  --color-texto:          var(--laiala-negro);
  --color-texto-suave:    var(--laiala-gris-tostado);
  --color-exito:          #5a9a6f;   /* verde para respuestas correctas    */
  --color-error:          #c0392b;   /* rojo para respuestas incorrectas   */
  --color-advertencia:    var(--laiala-amarillo);

  /* — Ciclos educativos — */
  --color-primer-ciclo:   var(--laiala-terracota);   /* tono más cálido/lúdico */
  --color-segundo-ciclo:  var(--laiala-teal);         /* tono más sobrio/formal */

  /* — Tipografías — */
  --font-display:    'Aloja', 'BobbyJonesSoft', cursive;       /* logo, títulos grandes */
  --font-titulo:     'Playfair Display', Georgia, serif;        /* títulos de sección    */
  --font-titulo-sc:  'Playfair Display SC', Georgia, serif;     /* títulos con versalitas */
  --font-cuerpo:     'Poppins', 'Helvetica Neue', sans-serif;   /* textos corridos       */
  --font-infantil:   'BobbyJonesSoft', 'Poppins', sans-serif;   /* Primer Ciclo          */

  /* — Escala tipográfica — */
  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-md:    1.125rem;   /*  18px */
  --text-lg:    1.25rem;    /*  20px */
  --text-xl:    1.5rem;     /*  24px */
  --text-2xl:   2rem;       /*  32px */
  --text-3xl:   2.5rem;     /*  40px */
  --text-4xl:   3.5rem;     /*  56px */

  /* — Espaciado — */
  --sp-xs:   0.25rem;   /*  4px */
  --sp-sm:   0.5rem;    /*  8px */
  --sp-md:   1rem;      /* 16px */
  --sp-lg:   1.5rem;    /* 24px */
  --sp-xl:   2rem;      /* 32px */
  --sp-2xl:  3rem;      /* 48px */

  /* — Bordes y radios — */
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    32px;
  --radius-pill:  999px;

  /* — Sombras — */
  --sombra-sm:  2px 3px 0px var(--laiala-negro);
  --sombra-md:  4px 5px 0px var(--laiala-negro);
  --sombra-lg:  6px 8px 0px var(--laiala-negro);
  --sombra-suave: 0 4px 16px rgba(31,24,22,0.12);

  /* — Transiciones — */
  --trans-rapida:  0.15s ease;
  --trans-normal:  0.25s ease;
  --trans-lenta:   0.4s ease;

  /* — Z-index — */
  --z-base:    1;
  --z-hud:     10;
  --z-modal:   100;
  --z-tooltip: 200;
}

/* ── CLASES UTILITARIAS ──────────────────────────────────────── */

/* Fondos */
.bg-primario    { background-color: var(--color-primario); }
.bg-secundario  { background-color: var(--color-secundario); }
.bg-acento      { background-color: var(--color-acento); }
.bg-claro       { background-color: var(--color-fondo-claro); }
.bg-calido      { background-color: var(--color-fondo-calido); }

/* Textos */
.text-primario   { color: var(--color-primario); }
.text-secundario { color: var(--color-secundario); }
.text-acento     { color: var(--color-acento); }
.text-suave      { color: var(--color-texto-suave); }

/* Tipografías */
.font-display   { font-family: var(--font-display); }
.font-titulo    { font-family: var(--font-titulo); }
.font-cuerpo    { font-family: var(--font-cuerpo); }
.font-infantil  { font-family: var(--font-infantil); }

/* Botón base Laialá */
.btn-laiala {
  font-family: var(--font-cuerpo);
  font-weight: 700;
  font-size: var(--text-md);
  padding: var(--sp-sm) var(--sp-xl);
  border: 2px solid var(--laiala-negro);
  border-radius: var(--radius-pill);
  box-shadow: var(--sombra-md);
  cursor: pointer;
  transition: transform var(--trans-rapida), box-shadow var(--trans-rapida);
}
.btn-laiala:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-lg);
}
.btn-laiala:active {
  transform: translateY(1px);
  box-shadow: var(--sombra-sm);
}

.btn-primario   { background: var(--color-primario); color: white; }
.btn-secundario { background: var(--color-secundario); color: white; }
.btn-acento     { background: var(--color-acento); color: var(--laiala-negro); }

/* Card base */
.card-laiala {
  background: white;
  border: 2px solid var(--laiala-negro);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-md);
  padding: var(--sp-lg);
}

/* Badge / etiqueta */
.badge-laiala {
  display: inline-block;
  font-family: var(--font-cuerpo);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 2px var(--sp-sm);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--laiala-negro);
}

/* Feedback correcto/incorrecto */
.correcto   { color: var(--color-exito);   font-weight: 700; }
.incorrecto { color: var(--color-error);   font-weight: 700; }

/* ── RESET MÍNIMO CONSISTENTE ────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-cuerpo);
  font-weight: 300;
  color: var(--color-texto);
  background-color: var(--color-fondo-calido);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}