/* ============================================================
   tokens.css — REAL VALUES, extracted from the live Wix site.

   Sources:
     - Type scale measured at 1440px and 390px viewports, then
       interpolated with clamp() between those two endpoints.
     - Colours read from the live DOM and confirmed against
       extracted/screens/*.png by sampling pixels.

   This is the only file that carries colour, font and spacing
   values. Do not hardcode them anywhere else.
   ============================================================ */

/* --- Fonts -------------------------------------------------
   Self-hosted from Google Fonts (both OFL).
     Barlow Condensed 700  -> all headings, nav, cards, buttons
     Krub 500 / 700        -> body copy, form labels, footer nav
     Yellowtail 400        -> wordmark + script eyebrows

   The script face is LTC Swing Bold, licensed from The Type
   Founders and self-hosted. Yellowtail remains next in the
   stack as a fallback if the file ever fails to load.
   ----------------------------------------------------------- */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Krub";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/krub-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Krub";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/krub-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Krub";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/krub-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Krub";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/krub-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* LTC Swing Bold — the real wordmark face, licensed from The Type Founders
   (Lanston Type Co.) for web use at 10,000 page views/month. Shipped exactly
   as delivered: the EULA forbids modifying the software, so no subsetting or
   re-encoding. The licence is per-domain and non-sublicensable, so the deploy
   repo must stay private. Renewal is yearly — see assets/fonts/WEB_EULA_LTC.html.

   Declared across 400-700 so it matches whether or not a rule asks for bold;
   the face has a single weight and synthetic bolding would distort it. */
@font-face {
  font-family: "Swing";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/Swing-Bold.woff2") format("woff2"),
       url("/assets/fonts/Swing-Bold.woff") format("woff");
}

@font-face {
  font-family: "Yellowtail";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/yellowtail-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Yellowtail";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/yellowtail-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Colour: base ----------------------------------------
     The canvas is white. Black is a section treatment (hero,
     footer, the home page's mid sections), not the page ground.
     Album card titles sampled from discografia-desktop.png:
     #000000 text on #FFFFFF, #929191 for the year above it.
     --------------------------------------------------------- */
  --color-bg:          #ffffff;
  --color-bg-alt:      #f3f3f0;
  --color-surface:     #f3f3f0;
  --color-text:        #000000;
  --color-text-muted:  #929191;
  --color-heading:     #000000;
  --color-border:      rgba(0, 0, 0, 0.14);

  /* Dark treatment: hero, footer, dark sections */
  --color-dark:        #000000;
  --color-on-dark:     #ffffff;
  --color-border-dark: rgba(255, 255, 255, 0.16);

  --color-footer-bg:   #000000;

  /* Nav: white, yellow for the current page */
  --color-nav:         #ffffff;
  --color-nav-active:  #fae017;

  /* Focus / form states */
  --color-focus:       #0ca382;
  --color-error:       #ff8a7a;

  /* --- Colour: the three band pairs ------------------------
     Every coloured section on the site is one of these three.
     The band's own title sits in a tinted variant of the band
     colour — lighter on teal and red, darker on yellow.
     Applied with the .band--* classes below.
     --------------------------------------------------------- */
  --band-teal-bg:      #0ca382;
  --band-teal-title:   #41d1b2;

  --band-red-bg:       #bb2d28;
  --band-red-title:    #ec7d79;

  --band-yellow-bg:    #fae017;
  --band-yellow-title: #9f8206;

  /* Fallbacks so var(--band-*) always resolves outside a band.

     TRAP: a custom property whose value is another var() is substituted
     where it is DECLARED, not where it is used. --band-title resolves to
     #000000 here at :root and then inherits that literal black. A
     descendant that redefines --color-heading (e.g. .section--dark) does
     NOT change --band-title, so band text silently goes black-on-black.
     Any rule that flips the foreground must override --band-title too —
     see .section--dark in site.css. */
  --band-bg:    transparent;
  --band-title: var(--color-heading);

  /* --- Type: families -------------------------------------- */
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Krub", "Helvetica Neue", Arial, sans-serif;
  --font-script:  "Swing", "Yellowtail", "Brush Script MT", cursive;

  /* --- Type: scale -----------------------------------------
     clamp(<value at 390px>, <interpolant>, <value at 1440px>).
     Both endpoints are measured off the live site; Wix scales
     these fluidly, so fixed px would only ever be right at one
     width.
     --------------------------------------------------------- */
  /* Fitted linearly between 390 and 1440, this ramp is nearly flat at the
     low end, so below 390 it left the title far larger than live's — which
     keeps scaling with the viewport — and pushed its button off a 320
     screen. min() hands over to a proportional term below 390; the two are
     equal at 390 by construction, so nothing moves at either measured
     width. */
  --fs-band-title:   clamp(20px, min(9.744vw, 29.132px + 2.274vw), 61.875px);
  --fs-page-title:   clamp(25px, 13.393px + 2.976vw, 56.25px);
  --fs-wordmark:     clamp(28px, 22.521px + 1.405vw, 42.75px);
  /* Measured 38px at 390, 48.87px at 834, 73.125px at 1440. Wix is not
     linear across that range, so a single two-point clamp overshoots the
     middle by ~4px. Split at 834 and interpolate each leg separately. */
  /* Two ramps that meet exactly at 834 — a knee in one continuous curve,
     not a breakpoint. max() picks whichever leads, so no media query. */
  --fs-wordmark-lg:  clamp(38px, max(28.452px + 2.448vw, 15.489px + 4.002vw), 73.125px);
  --fs-script:       clamp(22px, 15.964px + 1.548vw, 38.25px);
  --fs-accordion:    clamp(25px, 22.4px + 0.667vw, 32px);
  --fs-card:         clamp(16px, 12.75px + 0.833vw, 24.75px);
  --fs-nav:          clamp(16px, 13.771px + 0.571vw, 22px);
  --fs-footer-title: clamp(18px, 16.329px + 0.429vw, 22.5px);
  /* Live buttons: 22.5px label at 1440, 11.68px at 390. The discography
     button runs a smaller 18px at 1440 (same 11.68px at 390), so it has
     its own ramp. Box is a flat 9px pad / 1px border / 11.25px radius at
     1440, halving to 4.06 / 1 / 5.08 at 390. */
  --fs-button:       clamp(11.68px, 7.661px + 1.0305vw, 22.5px);
  --fs-button-sm:    clamp(11.68px, 9.333px + 0.6019vw, 18px);
  --btn-pad:         clamp(4.06px, 0.625vw, 9px);
  --btn-radius:      clamp(5.08px, 0.78125vw, 11.25px);
  --btn-min-height:  clamp(33.4px, 3.264vw, 47px);
  --fs-email:        clamp(20px, 19.257px + 0.19vw, 22px);
  --fs-quote:        clamp(25px, 19.661px + 1.369vw, 39.375px);
  /* The /acerca pull-quote is set larger than the home one: 45px against
     39.375px at 1440. Mobile end is proportional, not measured. */
  --fs-quote-lg:     clamp(25px, 17.571px + 1.9048vw, 45px);
  /* Quote strips are a fixed 160px with the text centred, and the text
     column is 1262px — wider than the 1200px container. */
  --band-quote-h:    clamp(96px, 72.229px + 6.095vw, 160px);
  --quote-w:         1262px;
  --fs-legal:        clamp(12px, 10.514px + 0.381vw, 16px);

  /* Body copy DOES scale: 16px at 390 and 18px at 1440, with the line box
     at 25.2px (1.4) on desktop. The earlier "16px, does not scale" note came
     from tokens.json, which extract-design.mjs captured at 390 because its
     viewport loop ends on mobile — the measurement was right for phones and
     wrong everywhere else. */
  --fs-body:  clamp(16px, 15.257px + 0.19vw, 18px);
  --fs-small: 14px;

  /* Aliases kept so existing site.css selectors keep resolving */
  --fs-display: var(--fs-band-title);
  --fs-h1:      var(--fs-page-title);
  --fs-h2:      var(--fs-band-title);
  --fs-h3:      var(--fs-card);
  --fs-eyebrow: var(--fs-script);

  /* --- Type: line height -----------------------------------
     Ratios are exact where Wix used the same one at both ends.
     The DISPLAY is the exception: measured against live it runs
     0.9 at 390px and 1.3 at 1440px, so it interpolates like the
     size does. The band title is a flat 1.3 at both ends — this
     curve was previously wired to the band title by mistake,
     which left the two swapped below 768px.
     --------------------------------------------------------- */
  --lh-display:    clamp(34.2px, 17.026px + 4.404vw, 80.4375px);
  --lh-band-title: 1.3;
  --lh-body:       1.4;
  --lh-card:       1.4;
  /* Home cards only: live runs the year and title on the same 1.4 line box
     (24.75/34.65 at 1440, 16/22.4 at 390) and pulls the title up into the
     year's box with a negative margin rather than spacing them apart.
     /discografia measures differently and is tuned separately. */
  --album-year-gap: clamp(-6px, -7.393px + 0.357vw, -2.25px);
  --lh-script:     1.3;
  --lh-accordion:  1.4;
  --lh-footer:     1.5;
  --lh-wordmark-lg: 0.7;
  --lh-quote:      1;
  --lh-heading:    1.1;

  /* --- Type: tracking --------------------------------------
     Every text element on the live site computes to
     letter-spacing: normal. Kept as tokens so the intent is
     explicit rather than accidental.
     --------------------------------------------------------- */
  --tracking-display: normal;
  --tracking-eyebrow: normal;
  --tracking-label:   normal;

  /* --- Layout ---------------------------------------------- */
  /* The live layout column is 1262px at 1440, not 1200 — confirmed four
     independent ways: the quote text block, both wide photos, the colour
     bands, and the album grid (4-up cards measure 297px, which is exactly
     (1262 - 3x24) / 4). */
  --container:      calc(1262px + 2 * var(--gutter));
  --container-text: 760px;
  --gutter:         clamp(1.25rem, 4vw, 3rem);

  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.75rem;
  --space-lg:  3rem;
  --space-xl:  5rem;
  --space-2xl: 7.5rem;

  --section-padding: clamp(2rem, 4.3vw, 3.875rem);
  --band-padding:    clamp(12px, 1.389vw, 20px);

  --radius:      0px;
  --radius-card: 0px;

  --header-height:  clamp(96px, 78.914px + 4.381vw, 142px);
  --wordmark-top:   clamp(12px, 8.286px + 0.952vw, 22px);
  --nav-offset:     clamp(12px, 10.514px + 0.381vw, 16px);
  --nav-gap:        clamp(9px, 2.686px + 1.619vw, 26px);

  /* Instagram strip. Measured off the live carousel: 12px gutter, square
     tiles, and a tile width that changes mode rather than scaling — 386px
     with ~3.6 visible at 1440, but one tile at a time below 1200. Edge
     inset is 0 at 1440, 26px at 834, 12px at 390. */
  --ig-gap:  12px;
  --ig-tile: calc(100vw - 25px);
  --ig-edge: 12px;

  /* Album grid: 24px gutter at every width. Column count steps 2/3 at
     390/834; at 1440 the live site is 4-up for Fruko and 5-up for the
     other two sections, so the count is set per section. */
  --grid-gap: 24px;

  /* Hero social rail: vertical, left edge, anchored to the hero bottom.
     Measured at 390 -> 1440: left 28->102, size 22->25, gap 10 both,
     bottom offset 69->74. */
  --rail-left:   clamp(28px, 0.514px + 7.048vw, 102px);
  --rail-bottom: clamp(69px, 67.143px + 0.476vw, 74px);
  --rail-size:   clamp(22px, 20.886px + 0.286vw, 25px);
  --rail-gap:    10px;

  /* Accordion rows: 14px apart at both endpoints, row height 35 -> 45 */
  /* Live accordion: 6px/40px padding, a 1px white rule on both the item
     and its trigger, and a 12px solid plus with 3.33px arms. */
  /* /acerca bio intro: title and copy are scaled independently of the
     global type ramp, matching live's own per-breakpoint coefficients. */
  --fs-award: 3.333vw;
  --fs-bio-title: 6.41vw;
  --fs-bio-body: 16px;
  --lh-bio-body: 1.3;

  --accordion-pad-y: 6px;
  --accordion-pad-x: 40px;
  --accordion-rule: 1px solid #ffffff;
  --accordion-icon: 12px;
  --accordion-icon-stroke: 3.33px;

  /* Contacto info panel: asymmetric padding, measured 59/59 at 390 and
     142/75 at 1440 */
  --info-pad-l: clamp(59px, 28.171px + 7.905vw, 142px);
  --info-pad-r: clamp(59px, 53.057px + 1.524vw, 75px);

  /* YouTube embeds. Box ratio measured per page at 390 and 1440 — the
     two differ at mobile (Wix letterboxes them differently) and the
     acerca one is not monotonic across widths (1.845 at 834). */
  --video-home-sm:   1.537;
  --video-home-lg:   1.763;
  --video-acerca-sm: 1.5;
  --video-acerca-lg: 1.763;
  --video-max: 1009px;

  /* Hero aspect ratios, measured per page at 390 and 1440 */
  --hero-home-sm:        0.769;
  --hero-home-lg:        1.959;
  --hero-acerca-sm:      1.406;
  --hero-acerca-lg:      2.04;
  --hero-discografia-sm: 1.12;
  --hero-discografia-lg: 2.54;
  --hero-contacto-sm:    1.36;
  --hero-contacto-lg:    2.796;

  /* --- Motion ---------------------------------------------- */
  --ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration:      420ms;
  --duration-fast: 180ms;
}

/* --- Band pairs ---------------------------------------------
   Each class sets the two locals every band component reads:
   --band-bg for the strip itself, --band-title for the heading
   sitting on it. Nesting works, so a card inside a band can
   opt back out by setting them again.
   ------------------------------------------------------------ */

.band--teal {
  --band-bg:    var(--band-teal-bg);
  --band-title: var(--band-teal-title);
}

.band--red {
  --band-bg:    var(--band-red-bg);
  --band-title: var(--band-red-title);
}

.band--yellow {
  --band-bg:    var(--band-yellow-bg);
  --band-title: var(--band-yellow-title);
}

@media (min-width: 751px) {
  :root { --ig-tile: calc(100vw - 52px); --ig-edge: 26px; }
}

@media (min-width: 1001px) {
  :root { --ig-tile: 386px; --ig-edge: 0px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 1ms;
    --duration-fast: 1ms;
  }
}

/* Live steps the bio intro's title at 750 and 1000 rather than
   interpolating, and opens the copy's leading up at the desktop step. */
@media (min-width: 751px) {
  :root { --fs-bio-title: 5.859vw; --fs-award: 2.083vw; }
}
@media (min-width: 1001px) {
  :root {
    --fs-bio-title: 3.906vw;
    --lh-bio-body: 1.6;
    /* font_6 is 22px at live's 1280 reference, capped by --section-max-width. */
    --fs-award: min(1.71875vw, 27.5px);
  }
}