/* BEGIN GENERATED TOKENS · fuente shared/design-tokens/tokens/v3.json — NO EDITAR A MANO */
/* ============================================================================
   LAYOSCAMP · DESIGN SYSTEM v3.0.0 — TOKENS
   ----------------------------------------------------------------------------
   GENERADO — NO EDITAR A MANO.
   Fuente:    shared/design-tokens/tokens/v3.json
   Regenerar: cd shared/design-tokens && npm run build
   Verificar: cd shared/design-tokens && npm run check
   Versión:   3.0.0
   Fecha:     2026-06-12
   Aprobado:  Pelayo, vía maqueta aprobada 12-jun-2026
   Spec:      shared/design-system-v2-spec.md
   Mapa:      shared/design-system-v3-migration-map.md
   Maqueta:   projects/web-drupal/docs/design/maqueta-aprobada-2026-06-12/maqueta-aprobada.html
   ----------------------------------------------------------------------------
   LEY DE CONVIVENCIA (fase no-destructiva, vigente hasta ciclo C10):
   · Este archivo SOLO declara tokens. Sin componentes ni utilidades.
   · Los :root del sistema legacy (landing-critical.css, design-system-v2.css,
     design-tokens.css) NO se borran. Conviven con éste.
   · v3 gana por ORDEN DE CARGA (library design-system-v3 se registra DESPUÉS
     de las legacy). NUNCA usar !important para imponer estos tokens.
   · El puente viejo→nuevo vive en design-system-v3-aliases.css (lo escribe otro
     especialista a partir del migration map). Este archivo no contiene aliases.
   · NO incluye @font-face ni @import de fuentes: la localización de Fraunces/Outfit
     es del ciclo C2.
   ============================================================================ */

:root {
  /* ==========================================================================
     PALETA · 16 colores — copiados TAL CUAL de la maqueta (líneas 41–55)
     ========================================================================== */
  --canvas:      #FFFFFF;               /* FONDO DE PÁGINA de todo el sitio (decisión del operador, 24-ago-2026: el blanco se lee más limpio que la crema). Con fondo y tarjeta en blanco, la jerarquía la lleva el hairline, NO una sombra grande: los dos blancos con sombra difusa se aplanan. */
  --hundido:     #F4F7F3;               /* Única superficie HUNDIDA sobre el canvas blanco: cajas de texto legal, hover de fila, pista del interruptor apagado. Blanco con un punto de verde para que se distinga de plano sin ensuciar. */
  --crema:       #FDF8EE;               /* L41 · superficie de sección CÁLIDA. ⚠️ YA NO es el fondo de página: eso es `canvas`. Se usa a propósito donde la calidez aporta (banda de testimonios, cita, bloque editorial con foto), nunca como lienzo por defecto. */
  --crema-2:     #F8EFDC;               /* L42 · superficie crema alterna */
  --arena:       #F0E0C3;               /* L43 · lavados/banners suaves */
  --arena-2:     #E6D2AC;               /* L44 · arena saturada */
  --terracota:   #D2603A;               /* L45 · eyebrows, acento itálica */
  --terracota-2: #E8835C;               /* L46 · hover terracota */
  --agua:        #2A9D8F;               /* L47 · acento secundario, leads */
  --agua-2:      #7FD1C8;               /* L48 · agua clara, blobs */
  --bosque:      #31562D;               /* L49 · titulares, botón sólido */
  --bosque-2:    #026936;               /* L50 · hover de botones bosque */
  --bosque-deep: #22401F;               /* L51 · noche verde, texto/fondos */
  --sol:         #FBBB0E;               /* L52 · dorado del logo · ACENTO — nunca texto sobre claro (1.49:1, spec §10) */
  --sol-glow:    rgba(251,187,14,.35);  /* L53 · TODOS los glows salen aquí */
  --ink:         #272725;               /* L54 · texto cuerpo (near-black) */
  --blanco:      #FFFFFF;               /* L55 */

  /* ==========================================================================
     TIPOGRAFÍA · familias (maqueta L61–L62)
     Fraunces = display serif editorial (itálicas expresivas)
     Outfit   = cuerpo / UI
     ========================================================================== */
  --font-display: "Fraunces", Georgia, serif;                     /* L61 */
  --font-body:    "Outfit", "Helvetica Neue", Arial, sans-serif;  /* L62 */

  /* ==========================================================================
     ESCALA TIPOGRÁFICA · clamp() extraídos de la maqueta
     Criterio DURO del operador: hero máx 4rem; título de página > sección.
     ========================================================================== */
  --fs-hero:    clamp(2.95rem, 4.5vw, 4rem);     /* L285 .hero-mega — máx 4rem literal; min 2.95 garantiza hero ≥ .mega */
  --fs-h1:      clamp(2.1rem, 4.6vw, 2.9rem);    /* L139 .mega — título de sección (NOTICIAS/CAMPAMENTOS) */
  --fs-h2:      clamp(1.45rem, 2.5vw, 2.05rem);  /* L467 .inscripciones h3 — sub-cabecera editorial */
  --fs-h3:      clamp(1.45rem, 2.4vw, 1.95rem);  /* L589 .carta-head h4 — encabezado de bloque */
  --fs-h4:      1.04rem;                         /* L700 .news-body h5 — título de tarjeta */
  --fs-body:    clamp(.98rem, 1.35vw, 1.1rem);   /* L597 .carta-body p — cuerpo largo */
  --fs-small:   .92rem;                          /* L215 .drop a / L744 .fcol a — UI secundaria */
  --fs-eyebrow: clamp(.72rem, 1vw, .82rem);      /* L109 .eyebrow — kicker uppercase */

  /* ==========================================================================
     line-heights y tracking de referencia (maqueta)
     ========================================================================== */
  --lh-hero:    .98;     /* L287 */
  --lh-tight:   .96;     /* L140 .mega */
  --lh-body:    1.6;     /* L72  body */
  --ls-display: -.02em;  /* L287 hero */
  --ls-eyebrow: .22em;   /* L109 */

  /* ==========================================================================
     ESPACIADO · grid base 4/8px, 8 niveles
     Coherente con Bootstrap 5 (spacers $spacer=1rem; .25/.5/1/1.5/3rem).
     xxs..md mapean 1:1 al spacer system de BS5; lg..xxxl extienden el ritmo
     editorial de secciones de la maqueta (.hero/.carta usan 4–7.5rem).
     ========================================================================== */
  --space-xxs:  4px;    /* BS5 spacer-1 · micro-gaps */
  --space-xs:   8px;    /* BS5 spacer-2 · gaps internos */
  --space-sm:   16px;   /* BS5 spacer-3 · padding de tarjeta */
  --space-md:   24px;   /* BS5 spacer-4 (1.5rem) · gutter */
  --space-lg:   48px;   /* BS5 spacer-5 (3rem) · ritmo bloque */
  --space-xl:   72px;   /* sección media (maqueta .campamentos 4.5rem) */
  --space-xxl:  96px;   /* sección grande */
  --space-xxxl: 120px;  /* .carta padding 7.5rem ≈ 120px */

  /* ==========================================================================
     RADIOS
     ========================================================================== */
  --radius-xs:   8px;
  --radius-sm:   14px;                               /* L215 .drop a */
  --radius-md:   22px;                               /* L209 .drop */
  --radius-lg:   30px;                               /* L783 .lightbox-frame */
  --radius-xl:   44px;                               /* L565 .carta-card */
  --radius-full: 999px;                              /* pills, controles circulares */
  --r-organico:  42% 58% 55% 45% / 48% 42% 58% 52%;  /* L58 · blob hero/footer */

  /* ==========================================================================
     SOMBRAS · profundidad real con tinte verde bosque (maqueta L56–L57)
     ========================================================================== */
  --sombra-suave: 0 22px 54px -18px rgba(49,86,45,.26), 0 8px 20px -8px rgba(39,39,37,.14);   /* L56 */
  --sombra-pop:   0 38px 84px -26px rgba(49,86,45,.42), 0 14px 32px -12px rgba(39,39,37,.2);  /* L57 */

  /* ==========================================================================
     MOTION · easings spring (maqueta L59–L60) + duraciones reduced-motion
     ========================================================================== */
  --spring:                  cubic-bezier(.34,1.56,.64,1);  /* L59 */
  --spring-big:              cubic-bezier(.34,1.8,.4,1);    /* L60 */
  --ease-zoom:               cubic-bezier(.22,1,.36,1);     /* L673 zoom hover de imágenes */
  --motion-duration-ok:      600ms;                         /* duración nominal de transiciones de bloque */
  --motion-duration-reduced: 0.01ms;                        /* reasignada bajo prefers-reduced-motion */

  /* ==========================================================================
     LAYOUT
     ========================================================================== */
  --nav-h:          84px;               /* L63 · alto del header (66px scrolled, 72px <640) */
  --container:      min(1240px, 92vw);  /* L106 .wrap */
  --container-wide: min(1360px, 94vw);  /* L178 .header-inner */

  /* ==========================================================================
     Z-INDEX nombrados (verificados contra la maqueta)
     ========================================================================== */
  --z-nav:         1000;  /* L168 .site-header */
  --z-cursor-glow: 1200;  /* L98  .cursor-glow */
  --z-progress:    1300;  /* L90  .scroll-progress */
  --z-grain:       9000;  /* L84  body::after (grano de papel) */
  --z-lightbox:    9500;  /* L777 .lightbox (por encima del grano) */

  /* ==========================================================================
     BREAKPOINTS (informativos)
     La maqueta usa 1120/980/640 orientativos. El theme es Bootstrap 5: se
     MAPEAN a la grid BS5 (1200/992/768/576) — un solo sistema, no dos.
       maqueta 1120 (compactar nav)     → BS5 1200 (xl)
       maqueta  980 (apilar/burger)     → BS5  992 (lg) / 768 (md)
       maqueta  640 (móvil compacto)    → BS5  576 (sm)
     ========================================================================== */
  --bp-sm:  576px;
  --bp-md:  768px;
  --bp-lg:  992px;
  --bp-xl:  1200px;
  --bp-xxl: 1400px;
}

/* ==========================================================================
   ACCESIBILIDAD · prefers-reduced-motion (maqueta L886–L889)
   Reasigna la duración nominal a ~0; los componentes que lean
   var(--motion-duration-ok) caen a estática sin tocar su CSS.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-ok: var(--motion-duration-reduced);
  }
}
/* END GENERATED TOKENS */