/* ==========================================================================
   Qué Pasa Asturias — Design tokens
   Values taken from QUE-PASA-ASTURIAS-briefing.md sections 4 and 5.
   Do not change these casually — they were agreed during the design process.
   ========================================================================== */

:root {
  /* ---- Site palette (briefing §4) --------------------------------------- */
  --navy:        #0b2a63;   /* headings, footer slab, Culture pill */
  --pink:        #e8175d;   /* the brand pink — large text and decorative fills only */
  --pink-press:  #c50f4c;   /* hover / pressed */
  --yellow:      #ffc93c;   /* primary buttons, Markets pill, tile kickers */
  --yellow-press:#f0b81f;
  --teal:        #0e9b8a;   /* Concerts pill fill */
  --teal-press:  #0b7c6e;
  --sky:         #5cc0e8;   /* Outdoors pill */
  --violet:      #7c5cd6;   /* Workshops pill */
  --fuchsia:     #ff4d8d;   /* Fiestas pill */

  /* ---- Readable variants -------------------------------------------------
     The brand pink and teal are beautiful and too light to carry small text.
     Measured on the cream background: #e8175d gives 4.29:1 and #0e9b8a gives
     3.32:1 — both below the 4.5:1 needed for body text.

     Rather than change the brand colours, these are deeper shades of the same
     hues, used only where small text sits on or in them. This is exactly the
     approach already agreed for the category header bands (briefing §4).

       --pink-text  #d3104f  →  5.10:1 on cream, 5.31:1 as a fill under white
       --teal-text  #0b7c6e  →  4.90:1 on cream, 4.63:1 on the mint card fill
     -------------------------------------------------------------------------- */
  --pink-text:   #d3104f;   /* links, buttons, the newsletter band */
  --flag-blue:   #0066ff;   /* the blue of the Asturian flag — 4.83:1 under white */
  --flag-blue-press: #0052cc;
  --flag-yellow: #f7d417;   /* the yellow of the cruz de la Victoria */
  --teal-text:   #0b7c6e;   /* kickers, section links */
  --pink-pill:   #e01259;   /* Food & drink pill — 4.77:1 under white */

  --mint:        #d8f0e6;   /* featured card border */
  --mint-light:  #eaf7f1;   /* featured card fill */
  --cream:       #fffaf1;   /* page background — NOT white */
  --ink:         #0e1524;   /* body text */
  --muted:       #5d6a80;   /* secondary text */
  --hairline:    #eeeae2;   /* borders */
  --white:       #ffffff;

  /* ---- Category pill colours -------------------------------------------- */
  --cat-mercados:   var(--yellow);
  --cat-conciertos: var(--teal);
  --cat-comer:      var(--pink);
  --cat-naturaleza: var(--sky);
  --cat-cultura:    var(--navy);
  --cat-talleres:   var(--violet);
  --cat-fiestas:    var(--fuchsia);

  /* ---- Category header bands (briefing §4, all pass WCAG AA) ------------- */
  /* Deeper shades of the same hue: white text failed on the bright pills. */
  --hdr-mercados:   #ffc93c;  --hdr-mercados-fg:   #20180a;  /* 11.4:1 */
  --hdr-conciertos: #0b7c6e;  --hdr-conciertos-fg: #ffffff;  /*  5.1:1 */
  --hdr-comer:      #c50f4c;  --hdr-comer-fg:      #ffffff;  /*  5.9:1 */
  --hdr-naturaleza: #5cc0e8;  --hdr-naturaleza-fg: #20180a;  /*  8.5:1 */
  --hdr-cultura:    #0b2a63;  --hdr-cultura-fg:    #ffffff;  /* 13.8:1 */
  --hdr-talleres:   #6b48c9;  --hdr-talleres-fg:   #ffffff;  /*  6.2:1 */
  --hdr-fiestas:    #b3187a;  --hdr-fiestas-fg:    #ffffff;  /*  6.3:1 */

  /* ---- Typography (briefing §5) — Inter throughout ----------------------- */
  /* No webfont.
     Inter used to be pulled from fonts.googleapis.com, which sends the
     visitor's IP address to Google before they have agreed to anything. A
     Munich court (LG München I, 3 O 17493/20, 20 January 2022) awarded
     damages against a site owner for exactly that, and the reasoning applies
     to any third-party resource loaded without consent.

     The system stack loads nothing, sends nothing, and renders instantly:
     San Francisco on Apple, Segoe on Windows, Roboto on Android. If you want
     Inter back, self-host the .woff2 files from assets/fonts/ — that is
     compliant. Linking to Google is not. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
          "Helvetica Neue", "Noto Sans", Arial, sans-serif;

  /* Fixed sizes from the spec, made fluid so they hold up on a phone.
     The upper bound of each clamp is the agreed desktop value. */
  --fs-hero:     clamp(2rem, 1.35rem + 3.2vw, 3.25rem);    /* 52px, was 70 */
  --fs-cat-hero: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);  /* 60px */
  --fs-hero-sub: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 17px */
  --fs-section:  1.1875rem;                                /* 19px, uppercase */
  --fs-card-title: 1.1875rem;                              /* 19px */
  --fs-card-body:  0.84375rem;                             /* 13.5px */
  --fs-kicker:     0.59375rem;                             /* 9.5px */
  --fs-pill:       0.84375rem;                             /* 13.5px */
  --fs-body:       0.9375rem;                              /* 15px */

  --lh-hero: 0.97;
  --ls-hero: -0.035em;
  --ls-cat-hero: -0.038em;

  /* ---- Layout (briefing §5) --------------------------------------------- */
  --wrap: 1160px;
  --pad-x: clamp(1.25rem, 4vw, 2.75rem);   /* 44px at desktop */
  --section-y: clamp(2.25rem, 5vw, 3.875rem); /* 62px at desktop */
  /* The hero was 610px, set when the nav sat on top of it and needed room to
     breathe. The nav has since moved into its own white banner above, so the
     photograph no longer has to carry the bar as well — 440px is enough for
     the picture to read and puts the first row of plans nearer the fold. */
  --hero-min-h: 440px;
  --grid-row-h: 176px;
  --grid-gap: 12px;

  /* ---- Radii ------------------------------------------------------------ */
  --r-card: 18px;   /* cards and photo tiles */
  --r-pill: 999px;  /* search bar, pills, buttons */
  --r-sm: 8px;

  /* ---- Shadows ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(14, 21, 36, 0.05);
  --shadow-md: 0 8px 24px rgba(14, 21, 36, 0.08);
  --shadow-lg: 0 20px 52px rgba(14, 21, 36, 0.16);
  /* Hero is not darkened (briefing §3) — legibility comes from text shadow */
  --hero-text-shadow: 0 2px 14px rgba(6, 14, 30, 0.55),
                      0 1px 3px rgba(6, 14, 30, 0.45);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 140ms;
  --t-mid: 260ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}