/* ==========================================================================
   TOKENS — Bar Restaurante Industrial · "Brasa en el polígono"
   Fuente de verdad: hoja-ruta-1, sección 2 (identidad VALIDADA, no reabrir).
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     COLOR · Paleta exacta (sección 2)
     -------------------------------------------------------------------- */
  --carbon:    #1C1C1C;  /* Fondos, headers, barra CTA */
  --brasa:     #E8551A;  /* Acento principal, CTAs, precios */
  --crema:     #F5EFE4;  /* Texto sobre oscuro, fondos claros */
  --hormigon:  #8A8A85;  /* Secundario, metadatos */

  /* Derivados funcionales (mezclas de la propia paleta, sin colores nuevos) */
  --carbon-90:   color-mix(in srgb, var(--carbon) 92%, black);
  --carbon-humo: color-mix(in srgb, var(--carbon) 88%, var(--crema));
  --brasa-viva:  color-mix(in srgb, var(--brasa) 82%, var(--crema));
  --brasa-ceniza:color-mix(in srgb, var(--brasa) 30%, var(--carbon));
  --crema-60:    color-mix(in srgb, var(--crema) 60%, transparent);
  --hormigon-40: color-mix(in srgb, var(--hormigon) 40%, transparent);

  /* Pizarra (elemento firma, hex del documento) */
  --pizarra:  #20241F;
  --madera:   #6B4A2E;
  --tiza:     var(--crema);

  /* Roles semánticos */
  --bg:            var(--carbon);
  --bg-claro:      var(--crema);
  --texto:         var(--crema);
  --texto-invert:  var(--carbon);
  --texto-meta:    var(--hormigon);
  --acento:        var(--brasa);

  /* --------------------------------------------------------------------
     TIPOGRAFÍA · Archivo Black / Archivo / Caveat (Google Fonts, latin, swap)
     -------------------------------------------------------------------- */
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-tiza:    "Caveat", "Segoe Script", cursive;

  /* Escala fluida (clamp: 360px → 1280px de viewport) */
  --text-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.84rem);
  --text-sm:   clamp(0.875rem, 0.84rem + 0.17vw, 0.975rem);
  --text-base: clamp(1rem,     0.95rem + 0.22vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.325rem);
  --text-xl:   clamp(1.35rem,  1.2rem  + 0.65vw, 1.72rem);
  --text-2xl:  clamp(1.7rem,   1.45rem + 1.1vw,  2.35rem);
  --text-3xl:  clamp(2.15rem,  1.7rem  + 2vw,    3.3rem);
  --text-4xl:  clamp(2.7rem,   2rem    + 3.2vw,  4.5rem);
  --text-hero: clamp(3.2rem,   2.2rem  + 4.8vw,  6rem);

  --leading-tight: 1.04;
  --leading-title: 1.15;
  --leading-body:  1.6;
  --tracking-display: -0.015em;
  --tracking-caps:     0.14em;

  /* --------------------------------------------------------------------
     ESPACIADO · base 4px
     -------------------------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-seccion: clamp(4rem, 3rem + 6vw, 8rem); /* ritmo vertical entre secciones */
  --gutter: clamp(1.25rem, 4vw, 3rem);            /* margen lateral fluido */

  /* --------------------------------------------------------------------
     RADIOS Y SOMBRAS
     -------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   18px;
  --radius-full: 999px;

  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md:      0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-lg:      0 18px 50px -12px rgba(0, 0, 0, 0.55);
  --shadow-pizarra: 0 24px 60px -18px rgba(0, 0, 0, 0.65),
                    0 4px 12px rgba(0, 0, 0, 0.4);
  --glow-brasa:      0 0 22px rgba(232, 85, 26, 0.45);
  --glow-brasa-hover:0 0 34px rgba(232, 85, 26, 0.7),
                     0 0 90px rgba(232, 85, 26, 0.28);

  /* --------------------------------------------------------------------
     MOVIMIENTO · con carácter, nada de `ease` por defecto
     -------------------------------------------------------------------- */
  --dur-chispa: 160ms;  /* micro-feedback (taps, hovers) */
  --dur-rapida: 320ms;  /* transiciones de UI */
  --dur-media:  650ms;  /* reveals de entrada */
  --dur-lenta:  1100ms; /* piezas protagonistas (pizarra, hero) */
  --dur-tiza:   1800ms; /* escritura de tiza, línea a línea */

  --ease-brasa:   cubic-bezier(0.22, 1, 0.36, 1);      /* arranque vivo, frenada suave (out-quint) */
  --ease-hierro:  cubic-bezier(0.7, 0, 0.2, 1);        /* pesado, industrial, decidido */
  --ease-rebote:  cubic-bezier(0.34, 1.56, 0.64, 1);   /* pegatina del precio: cae y asienta */
  --ease-humo:    cubic-bezier(0.4, 0.1, 0.1, 1);      /* deriva lenta, atmósfera */

  --stagger: 90ms; /* paso entre elementos escalonados */
}

/* --------------------------------------------------------------------------
   TERRAZA · acento EXCLUSIVO de la sección familia/eventos.
   El token solo existe dentro del scope [data-seccion="celebraciones"]:
   fuera de él, usar --terraza no resuelve. Restricción por diseño.
   -------------------------------------------------------------------------- */
[data-seccion="celebraciones"] {
  --terraza:        #3E6B4F;
  --terraza-claro:  color-mix(in srgb, #3E6B4F 55%, var(--crema));
  --terraza-oscuro: color-mix(in srgb, #3E6B4F 60%, var(--carbon));
  --acento: var(--terraza); /* dentro de la sección, el acento deja de ser Brasa */
}

/* --------------------------------------------------------------------------
   ACCESIBILIDAD DE MOVIMIENTO
   Solo se frena lo intrusivo (animaciones largas, partículas, parallax).
   Las micro-interacciones se conservan: Windows activa reduced-motion por
   defecto en muchos equipos y la web no debe verse muerta.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-media: 240ms;
    --dur-lenta: 240ms;
    --dur-tiza:  1ms;   /* la pizarra aparece escrita, sin esperar */
    --stagger:   20ms;
  }
}