/* ============================================================================
   LAB42 ACADEMY — DESIGN TOKENS v2
   Dirección: "Sala 42" — espacio de juego y aprendizaje para niños de 6-13.
   Estilo: claymorphism suave (volumen tipo plastilina: bordes gruesos, sombra
   doble, radio amplio). Sin modo oscuro: la luz es el territorio del niño.

   Referencia de método: ui-ux-pro-max (claymorphism + kids learning) y
   frontend-design (evitar losia's genéricas de UI generada).
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------- MARCA */
  --brand-grape: #7c5cd6; /* violeta de la marca (el "42") */
  --brand-grape-deep: #6144b8;
  --brand-grape-soft: #efe9ff;

  /* --------------------------------------------- ACENTOS INFANTILES ---- */
  --sky: #5b8def; /* Ciencias */
  --sky-deep: #3f6bd4;
  --sky-soft: #e6edff;

  --grape: #7c5cd6; /* Ajedrez */
  --grape-deep: #6144b8;
  --grape-soft: #efe9ff;

  --bubble: #f4709c; /* Música */
  --bubble-deep: #d94b7c;
  --bubble-soft: #ffe7ef;

  --mint: #35c08a; /* Finanzas */
  --mint-deep: #1d9b6b;
  --mint-soft: #dff7ec;

  --melon: #ff8a5b; /* acento cálido, CTA */
  --melon-deep: #e5693a;
  --melon-soft: #ffede4;

  --sun: #ffc845; /* energía, XP, estrellas */
  --sun-deep: #d9a017;
  --sun-soft: #fff3d2;

  /* ------------------------------------------------------- BASE / TEXTO - */
  --paper: #edf1fe; /* fondo de la app */
  --paper-warm: #fff6ef; /* fondo cálido alterno */
  --card: #ffffff;
  --card-soft: #f7f8ff;

  --ink: #2e2a47; /* texto principal (ciruela profunda, no negro) */
  --ink-2: #5b5478; /* texto secundario */
  --ink-3: #8a83a8; /* texto terciario */
  --ink-on-color: #ffffff;

  --line: #e2e6f8;
  --line-2: #cdd4f0;
  --edge: #c2c9ec; /* "borde de arcilla" para la sombra dura */

  /* ------------------------------------------------------------- ESTADO - */
  --success: var(--mint-deep);
  --warning: var(--sun-deep);
  --danger: #e4573d;
  --danger-soft: #ffe9e3;
  --info: var(--sky-deep);

  /* ------------------------------------------------------- POR PILAR ---- */
  --pilar-ciencias: var(--sky);
  --pilar-ajedrez: var(--grape);
  --pilar-musica: var(--bubble);
  --pilar-finanzas: var(--mint);

  /* ---------------------------------------------------------- TIPOGRAFÍA - */
  --font-display: "Fredoka", "Nunito", ui-rounded, "Trebuchet MS", system-ui,
    sans-serif;
  --font-sans: "Nunito", ui-rounded, "Segoe UI", system-ui, -apple-system,
    "Trebuchet MS", sans-serif;

  --fs-display: clamp(2.15rem, 1.25rem + 3.6vw, 3.65rem);
  --fs-h1: clamp(1.7rem, 1.2rem + 2.1vw, 2.7rem);
  --fs-h2: clamp(1.35rem, 1.08rem + 1.2vw, 1.95rem);
  --fs-h3: clamp(1.08rem, 0.98rem + 0.42vw, 1.32rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.34vw, 1.16rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;
  --fs-2xs: 0.72rem;

  --lh-tight: 1.04;
  --lh-snug: 1.22;
  --lh-body: 1.62;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.06em;

  /* ------------------------------------------------------------ ESPACIO - */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.8rem;
  --sp-4: 1.1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3.5rem;
  --sp-9: 5rem;

  --gutter: clamp(1rem, 0.5rem + 2.4vw, 2.5rem);
  --maxw: 1180px;
  --maxw-narrow: 760px;

  /* -------------------------------------------------------------- RADIOS - */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 30px;
  --r-2xl: 38px;
  --r-pill: 999px;

  /* ------------------------------------------------------------ SOMBRAS -- */
  /* Arcilla: sombra dura inferior + difusa suave. Da volumen sin peso. */
  --clay-1: 0 3px 0 var(--edge), 0 8px 16px -10px rgba(46, 42, 71, 0.3);
  --clay-2: 0 5px 0 var(--edge), 0 16px 30px -14px rgba(46, 42, 71, 0.32);
  --clay-3: 0 8px 0 var(--edge), 0 26px 46px -18px rgba(46, 42, 71, 0.34);
  --shadow-soft: 0 12px 28px -16px rgba(46, 42, 71, 0.3);
  --shadow-lift: 0 22px 44px -20px rgba(46, 42, 71, 0.38);

  /* ---------------------------------------------------------- MOVIMIENTO - */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.46, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-micro: 160ms;
  --t-base: 280ms;
  --t-enter: 420ms;
  --t-celebrate: 760ms;

  /* -------------------------------------------------------------- LAYOUT - */
  --bar-h: 66px;
  --nav-h: 70px;
  --content-max: 1160px;
  --z-bar: 60;
  --z-nav: 70;
  --z-modal: 90;
  --z-toast: 100;
}

/* Modo de bajo estímulo (perfil TEA o "modo suave" del niño). */
[data-stimulus="low"] {
  --t-micro: 0ms;
  --t-base: 0ms;
  --t-enter: 0ms;
  --t-celebrate: 0ms;
}

[data-stimulus="low"] *,
[data-stimulus="low"] *::before,
[data-stimulus="low"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}