/* ==========================================================================
   NOOKINO LEARNING CENTER — Design tokens
   Fuente: Manual de Identidad Nookino, julio 2025 (pág. 23 paleta, pág. 26 tipografía)
   Cualquier color o tipo del sitio sale de aquí. No hardcodear valores en site.css.
   ========================================================================== */

:root {
  /* --- Paleta oficial (hex del manual) ------------------------------------ */
  --squirrel-brown:   #A85F4E;
  --nest-brown:       #C68560;
  --grapefruit:       #FF715B;
  --carrot:           #FF854E;
  --flamingo:         #FF91AB;
  --lavender:         #E1A6E5;
  --sky:              #75D9E0;
  --forest:           #00AC6E;
  --sunrise:          #FCC000;
  --cotton:           #F9F5EA;

  /* --- Constantes: no dependen del tema ----------------------------------- */
  --surface:          #FFFFFF;
  --ink:              #4A2E26;   /* texto principal: squirrel brown oscurecido */
  --ink-soft:         #7A5A4E;
  --wa:               #00875A;   /* verde de WhatsApp oscurecido: blanco encima da 4.6 */
}

/* ==========================================================================
   ROLES DE COLOR — paleta "Nido" (elegida por Gladys, 14 ago 2026)
   --------------------------------------------------------------------------
   Manda la tierra; los seis colores vivos entran en dosis chicas.
   site.css solo usa estos roles, nunca un hex crudo: por eso un cambio aquí
   repinta el sitio entero. Los diez hex de arriba son los únicos que existen.
   ========================================================================== */

:root {
  --bg:               var(--cotton);
  --bg-alt:           #FFFDF7;
  --line:             #E7DFCE;

  --brand:            var(--squirrel-brown);
  --brand-2:          var(--nest-brown);
  --accent:           var(--grapefruit);
  --accent-warm:      var(--carrot);
  --btn-ink:          var(--ink);        /* letra del botón principal */

  --hero-arco:        var(--sky);
  --blob-1:           var(--lavender);
  --blob-2:           var(--sunrise);
  --blob-3:           var(--flamingo);

  --band-bg:          var(--squirrel-brown);
  --band-ink:         #FFFFFF;
  --soft-bg:          var(--cotton);

  --razon-1:          var(--grapefruit);
  --razon-2:          var(--sky);
  --razon-3:          var(--forest);

  --mapa-bg:          var(--nest-brown);
  --cta-bg:           var(--squirrel-brown);
  --cta-on:           #FFFFFF;
  --footer-bg:        var(--ink);

  /* Las cuatro casas. Todas llevan letra café encima; forest quedó fuera
     porque con el café da 4.17 y no pasa AA. */
  --casa-conejo:      var(--sky);        /* 1–17 meses   · café encima 7.46 */
  --casa-oso:         var(--sunrise);    /* 18–35 meses  · café encima 7.41 */
  --casa-elefante:    var(--lavender);   /* 3–4 años     · café encima 6.31 */
  --casa-leon:        var(--flamingo);   /* 5–12 años    · café encima 5.78 */

  --etapa-bebes:      var(--casa-conejo);
  --etapa-toddlers:   var(--casa-oso);
  --etapa-preescolar: var(--casa-elefante);
  --etapa-escolares:  var(--casa-leon);
}

:root {

  /* --- Tipografía ---------------------------------------------------------
     Manual:  Títulos 01 / Textos 01 = Gascogne Serial  (FUENTE COMERCIAL)
              Títulos 02 / Textos 02 = Source Sans 3    (Google, libre)
              Frases cortas          = Dawning of a New Day (Google, libre)

     Gascogne Serial no tiene licencia web contratada. En el sitio se sustituye
     por Fraunces (Google), serif cálida de proporciones parecidas.
     Si algún día se compra la licencia webfont de Gascogne, se cambia
     únicamente --font-display y el sitio entero se actualiza.                */
  --font-display: "Fraunces", "Gascogne Serial", Georgia, serif;
  --font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script:  "Dawning of a New Day", cursive;

  --track-display: 0.06em;   /* manual: tracking 100 en títulos 01 */
  --track-ui:      0.02em;   /* manual: tracking 20 en Source Sans */

  /* --- Escala tipográfica (fluida) ---------------------------------------- */
  --fs-hero:  clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem);
  --fs-h2:    clamp(1.8rem, 1.3rem + 1.9vw, 2.9rem);
  --fs-h3:    clamp(1.15rem, 1.0rem + 0.6vw, 1.45rem);
  --fs-lead:  clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;

  /* --- Espaciado, radios, sombras ----------------------------------------- */
  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2.5rem; --sp-5: 4rem;   --sp-6: 6rem;

  --r-sm:  12px;
  --r-md:  20px;
  --r-lg:  32px;
  --r-arco: 999px 999px 24px 24px;  /* el arco del emblema, como forma de marca */

  --shadow-sm: 0 2px 8px rgba(74,46,38,.06);
  --shadow-md: 0 10px 30px rgba(74,46,38,.09);

  --maxw: 1180px;

  /* --- Logo intercambiable ------------------------------------------------
     TODO el sitio referencia estas dos variables. Cuando llegue el logo
     definitivo de Gladys, se reemplazan los archivos con el mismo nombre
     (o se apunta aquí a los nuevos) y cambia en las 6 páginas de un jalón.   */
  --logo-horizontal: url("../assets/marca/wordmark.svg");
  --logo-icono:      url("../assets/marca/emblema.svg");
}
