/* ==========================================================================
   Boombangh — design tokens
   Black and brand gold, taken from the bottle. Everything reads from here.
   ========================================================================== */

/* --- Typefaces ------------------------------------------------------------
   Fraunces  : high-contrast display serif, for the big statements. opsz is
               driven per-size so large headlines get the thin display cut.
   Archivo   : grotesque with a width axis, for everything else. The label is
               set in a heavy condensed grotesque, so pushing weight and
               narrowing the width gets the brand's voice into the small type
               without touching the headlines.
   Both variable, latin subset, self-hosted. No external requests.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-roman-var.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-italic-var.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Colour -------------------------------------------------------------
     The brand's own palette, sampled from the product: a near-black label
     ground and a saturated gold-yellow. The photography is dark tropical
     foliage lit warm, so it sits on this ground with no correction at all.
     ---------------------------------------------------------------------- */
  --ink:        #050706;   /* page ground — the label's black               */
  --ink-2:      #0B100E;   /* raised surface                                */
  --ink-3:      #151B18;   /* hairlines, inputs, card ground                */
  --ink-void:   #020403;   /* the darkest section, behind full-bleed art    */

  /* Sampled off the bottle label, not guessed: the ink is near-pure black
     and the yellow is a saturated brand gold, brighter and louder than an
     antique gold. */
  --gold:       #E6AE37;   /* primary accent — the label yellow             */
  --gold-lt:    #FACD5B;   /* highlight, the brightest metal                */
  --gold-dk:    #A9741C;   /* deep accent, gradient anchors                 */
  --gold-sh:    #C08F26;   /* shadowed metal                                */
  --rum:        #964417;   /* the liquid — warm amber, for rare emphasis    */

  --bone:       #EDE8DC;   /* primary text on dark — warm paper             */
  --ash:        #8A8377;   /* muted text, eyebrows                          */
  --ash-dim:    #4B4740;   /* dividers, disabled                            */

  /* The signature metal. Used on the hero frame, rules, and the wordmark
     fill. The -67deg makes the highlight rake across a wide element rather
     than sitting flat. */
  --metal: linear-gradient(-67deg,
    var(--gold-dk) 0%,
    var(--gold-lt) 28%,
    var(--gold-sh) 52%,
    var(--gold)    82%,
    var(--gold-dk) 100%);

  /* Softer metal for large fills where the full gradient reads as stripes. */
  --metal-soft: linear-gradient(-67deg, #7A5210 0%, #C08F26 45%, #FACD5B 70%, #A9741C 100%);

  /* Scrims laid over photography so type stays legible on any crop. Tinted
     to --ink-void so they darken the image without greying it. */
  --scrim-b: linear-gradient(to top,   rgba(2,4,3,.92) 0%, rgba(2,4,3,.45) 45%, rgba(2,4,3,0) 100%);
  --scrim-r: linear-gradient(to left,  rgba(2,4,3,.90) 0%, rgba(2,4,3,.35) 55%, rgba(2,4,3,0) 100%);
  --scrim-l: linear-gradient(to right, rgba(2,4,3,.90) 0%, rgba(2,4,3,.35) 55%, rgba(2,4,3,0) 100%);

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-sans:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* The small-type register: wide, light and generously tracked — the
     engineered look a wide geometric sans gives, reached here through
     Archivo's width axis rather than by licensing another typeface. Used for
     eyebrows, buttons, nav and anything set in caps. */
  --ui-weight: 500;
  --ui-width:  125%;

  /* Fluid scale, 360px → 1600px viewport. Display sizes carry their own
     optical-size setting; see the .d-* classes in main.css. */
  --t-hero:  clamp(3.25rem, 1.2rem + 9.1vw,  9.5rem);
  --t-d1:    clamp(2.75rem, 1.3rem + 6.4vw,  6.75rem);
  --t-d2:    clamp(2.1rem,  1.2rem + 4.0vw,  4.5rem);
  --t-d3:    clamp(1.6rem,  1.1rem + 2.2vw,  2.75rem);
  --t-lead:  clamp(1.05rem, .95rem + .55vw,  1.375rem);
  --t-body:  clamp(.95rem,  .9rem  + .25vw,  1.0625rem);
  --t-eyebrow: clamp(.6875rem, .65rem + .12vw, .8125rem);
  --t-micro: .75rem;

  --track-eyebrow: .26em;   /* the wide-tracked uppercase labels */
  --track-ui:      .12em;
  --leading-display: .96;
  --leading-body:  1.7;

  /* --- Space ------------------------------------------------------------ */
  --gutter:    clamp(1.25rem, .6rem + 2.6vw, 3.5rem);
  --section-y: clamp(5rem, 2rem + 9vw, 11.5rem);
  --stack:     clamp(1.5rem, 1rem + 1.6vw, 2.5rem);

  --w-xs:  46rem;
  --w-sm:  62rem;
  --w-md:  76rem;
  --w-lg:  88rem;
  --w-xl:  104rem;

  /* --- Motion ------------------------------------------------------------
     --ease-cine is lifted from the reference's hero fade; it starts fast and
     settles slowly, which is what makes the imagery feel like it is being
     revealed rather than switched on. */
  --ease-cine: cubic-bezier(.34, .55, .25, .83);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-io:   cubic-bezier(.65, 0, .35, 1);

  --dur-hero:   2s;      /* first paint of hero imagery */
  --dur-reveal: .9s;     /* scroll-triggered fades      */
  --dur-ui:     .4s;     /* buttons, nav, header        */
  --stagger:    .15s;    /* per-item delay in a group   */
  --stagger-nav: .08s;   /* per-item delay in the overlay */
  --delay-cue:  .65s;    /* hold before the scroll cue arrives */

  --z-content: 1;
  --z-header:  60;
  --z-nav:     70;
  --z-gate:    90;
}

/* Anyone who has asked for less motion gets the finished state instantly.
   Enforced here at the token level so no component can opt back in — which
   means components must never hardcode a duration or delay, always a token.
   Delays matter as much as durations: a hardcoded delay leaves the element
   invisible for its full length even when the fade itself is instant. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hero: .01ms;
    --dur-reveal: .01ms;
    --dur-ui: .01ms;
    --stagger: 0s;
    --stagger-nav: 0s;
    --delay-cue: 0s;
  }
}