/* ============================================================================
   Billie — design token layer
   ----------------------------------------------------------------------------
   EVERY value below is transcribed from RETAINED source evidence, not memory:

   [S] = durable source stylesheet
         .mist-desktop/source-baselines/
         source-mybillie-com-267b4d4a85-1440x900-full-2026-07-31_03-25-09-442
         -eb7e7739-779d-45dc-a637-676afabde3da.css
   [D] = signed desktop 1440x900 home sidecar (landmarks[] resolved styles)
         source-mybillie-com-267b4d4a85-1440x900-full-2026-07-31_03-25-09-442
         -eb7e7739-779d-45dc-a637-676afabde3da.page-evidence.json
   [M] = signed mobile 390x844 home sidecar
         source-mybillie-com-267b4d4a85-390x844-full-2026-07-31_03-26-01-881
         -921030a7-680b-4e68-a900-894563066704.page-evidence.json
   [B] = company brand guide (brand.md) verified palette

   The source sheet declares ZERO :root custom properties, so every token here
   is a NEW Billie-namespaced name derived from applied declarations and
   resolved computed styles. Nothing is invented and attributed to the source.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. PALETTE — verified brand colours
     --------------------------------------------------------------------- */
  --billie-coral:            #FF5232; /* [B] primary coral-red */
  --billie-periwinkle:       #90AAFF; /* [B] secondary periwinkle */
  --billie-pink:             #FFA5FF; /* [B][S] accent pink; rgb(255,165,255) button bg */
  --billie-white:            #FFFFFF; /* [B][S] header bg rgb(255,255,255) */
  --billie-off-white:        #F8F9FA; /* [B] neutral off-white */
  --billie-black:            #000000; /* [B][S] body text + solid button bg rgb(0,0,0) */

  /* Source-observed support colours (applied declarations / computed styles) */
  --billie-surface-tint:     #F4F5FE; /* [S][D] rgb(244,245,254) product + footer band */
  --billie-periwinkle-soft:  #BDC7FF; /* [S] rgb(189,199,255) secondary button bg */
  --billie-coral-bright:     #FF6849; /* [S] rgb(255,104,73) badge bg */
  --billie-focus-ring:       #445EFF; /* [S] rgb(68,94,255) focus box-shadow */
  --billie-editorial-from:   #FBA6FF; /* [M] linear-gradient stop 1 rgb(251,166,255) */
  --billie-editorial-to:     #EAEDFF; /* [M] linear-gradient stop 2 rgb(234,237,255) */

  /* Semantic aliases — sections should consume THESE, not the raw hexes */
  --billie-color-primary:    var(--billie-coral);
  --billie-color-secondary:  var(--billie-periwinkle);
  --billie-color-accent:     var(--billie-pink);
  --billie-color-text:       var(--billie-black);
  --billie-color-bg:         var(--billie-white);
  --billie-color-surface:    var(--billie-surface-tint);
  --billie-color-surface-alt: var(--billie-off-white);
  --billie-color-border:     rgba(0, 0, 0, 0.12);
  --billie-gradient-editorial:
    linear-gradient(var(--billie-editorial-from), var(--billie-editorial-to)); /* [M] */

  /* ---------------------------------------------------------------------
     2. TYPOGRAPHY — licensed substitutes, source metrics
     ---------------------------------------------------------------------
     The source's own faces are proprietary and are NOT extracted, uploaded
     or re-hosted anywhere in this theme:
       nowie-web  (Nowie Vremena, abstrkt, MyFonts)  [S] @font-face
                  /static/font/34045C_1_0 (400), _0_0 (700), _2_0 (300)
       louize-web [S] /static/font/louize-regular, louize-italic
       offbit     [S] /static/font/Offbit-Bold

     Approved substitutes only:
       UI / sans  role (was nowie-web)  -> Inter 400/500/700
       Display    role (was louize-web) -> Spectral 400/500 + italic (OFL)
                  [the source's own applied stack for this role ends in
                   "Times New Roman", Times, serif, so the role IS a serif;
                   Plus Jakarta Sans was the wrong shape and is no longer used
                   for it. It remains loaded for legacy literal fallbacks only.]
       Pixel accent (was offbit)        -> Inter 700, uppercase + tracking
     Source sizes / weights / line-heights / letter-spacing ARE preserved.
     --------------------------------------------------------------------- */
  --billie-ff-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --billie-ff-ui:      "Inter", var(--billie-ff-fallback);
  /* Display / editorial role. The source's resolved computed style for every
     landmark in this role is `louize-web, "Times New Roman", Times, serif`
     (signed home/PDP sidecars), i.e. a SERIF — so the licensed substitute is a
     serif too: Spectral (SIL OFL, Google-hosted), with the source's own fallback
     chain verbatim. louize-web itself is never extracted, uploaded or re-hosted. */
  --billie-ff-display: "Spectral", "Times New Roman", Times, serif;
  --billie-ff-accent:  "Inter", var(--billie-ff-fallback);

  --billie-fw-light:   300; /* [S][D] nav links font-weight 300 */
  --billie-fw-regular: 400; /* [D] display h2 + product titles */
  --billie-fw-medium:  500;
  --billie-fw-bold:    700; /* [D] eyebrows, announcement bar, CTA labels */

  /* Display / hero — [D] 72px/81px/-1.8px  ->  [M] 36px/40.5px/-0.9px
     (identical ratios: line-height 1.125, letter-spacing -0.025em) */
  --billie-fs-display:    36px;
  --billie-lh-display:    40.5px;
  --billie-ls-display:    -0.9px;

  /* Editorial heading — [D] 24px, [M] 24px (does not scale down) */
  --billie-fs-heading:    24px;
  --billie-lh-heading:    28px;
  --billie-ls-heading:    -0.3px;

  /* Sub-heading / large lede — [D] 20px */
  --billie-fs-subheading: 20px;
  --billie-lh-subheading: 24px;

  /* Section eyebrow — [D][M] 13px / 14px / 1px / 700 / uppercase */
  --billie-fs-eyebrow:    13px;
  --billie-lh-eyebrow:    14px;
  --billie-ls-eyebrow:    1px;

  /* Body / product title — [D] 16px / 16px / normal / 400 */
  --billie-fs-body:       16px;
  --billie-lh-body:       16px;

  /* Utility text — [S] 0.875rem, line-height 1.375, weight 300 (footer links) */
  --billie-fs-utility:    14px;
  --billie-lh-utility:    1.375;

  /* Nav / announcement — [D][M] 12px; nav lh 14px ls 0.3px w300,
     announcement lh 20px ls 0.96px w700 uppercase */
  --billie-fs-nav:        12px;
  --billie-lh-nav:        14px;
  --billie-ls-nav:        0.3px;
  --billie-lh-announce:   20px;
  --billie-ls-announce:   0.96px;

  /* Micro — [S] 10px / 20px (icon counters) */
  --billie-fs-micro:      10px;
  --billie-lh-micro:      20px;

  /* ---------------------------------------------------------------------
     3. SPACING — real values read off the source, mobile-first
     --------------------------------------------------------------------- */
  --billie-space-3xs: 4px;  /* [M] padding 4px 20px 0 */
  --billie-space-2xs: 6px;  /* [M] padding 1px 6px */
  --billie-space-xs:  10px; /* [M] padding 10px 0 */
  --billie-space-sm:  11px; /* [M] padding 13px 11px */
  --billie-space-md:  13px; /* [M] padding 13px 11px */
  --billie-space-lg:  16px; /* [M] padding 0 0 16px */
  --billie-space-xl:  20px; /* [M] mobile page gutter */
  --billie-space-2xl: 23px; /* [M] mobile section gutter (40px 23px) */
  --billie-space-3xl: 40px; /* [M] mobile section block padding */
  --billie-space-4xl: 65px; /* [D] desktop section gutter (80px 65px) */
  --billie-space-5xl: 69px; /* [M] editorial band top padding (69px 20px 77px) */
  --billie-space-6xl: 77px; /* [M] editorial band bottom padding */
  --billie-space-7xl: 80px; /* [D] desktop section block padding */

  /* Responsive composites — mobile values; overridden at >=1024px below */
  --billie-gutter:     var(--billie-space-xl);  /* [M] 20px */
  --billie-section-y:  var(--billie-space-3xl); /* [M] 40px */
  --billie-header-h:   65px;                    /* [M] main starts at y=65 */
  --billie-page-max:   1920px;                  /* [S] header + footer max-width */

  /* ---------------------------------------------------------------------
     4. RADIUS — [S] applied values
     --------------------------------------------------------------------- */
  --billie-radius-none: 0px;   /* [D] every section computes border-radius 0px */
  --billie-radius-pill: 999px; /* [S] every button + swatch control */
  --billie-radius-focus-inset: -5px; /* [S] focus ring inset */

  /* ---------------------------------------------------------------------
     5. BREAKPOINTS — the source sheet's REAL media-query widths
     (token values for JS/section use; @media below uses the literals)
     --------------------------------------------------------------------- */
  --billie-bp-xxs: 280px;  /* [S] @media screen and (max-width: 280px) */
  --billie-bp-xs:  320px;  /* [S] @media screen and (max-width: 320px) */
  --billie-bp-sm:  376px;  /* [S] @media screen and (max-width: 376px) */
  --billie-bp-md:  768px;  /* [S] @media screen and (min-width: 768px) / max 767 */
  --billie-bp-lg:  1024px; /* [S] primary desktop switch; mobile side is max 1023 */
  --billie-bp-lg1: 1025px; /* [S] @media screen and (min-width: 1025px) variant */
  --billie-bp-xl:  1280px; /* [D] responsive <source> media (min-width:1280px) */
  --billie-bp-2xl: 1920px; /* [S] @media screen and (min-width: 1920px) */

  /* Motion — [S] transition timing used on interactive chrome */
  --billie-ease: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --billie-dur:  300ms;
}

/* [S] tablet-and-up: @media screen and (min-width: 768px) */
@media (min-width: 768px) {
  :root {
    --billie-gutter: 40px;
  }
}

/* [S] desktop switch: @media screen and (min-width: 1024px)
   Desktop metrics from [D]: section padding 80px 65px, header height 69px,
   hero display 72px/81px/-1.8px. */
@media (min-width: 1024px) {
  :root {
    --billie-fs-display:   72px;
    --billie-lh-display:   81px;
    --billie-ls-display:   -1.8px;
    --billie-gutter:       var(--billie-space-4xl); /* 65px */
    --billie-section-y:    var(--billie-space-7xl); /* 80px */
    --billie-header-h:     69px;
  }
}

/* ============================================================================
   Primitive classes built on the tokens — the skeleton every Billie section
   composes from. Deliberately small; no section-specific styling here.
   ========================================================================== */

.billie-page {
  max-width: var(--billie-page-max);
  margin-inline: auto;
  background: var(--billie-color-bg);
  color: var(--billie-color-text);
  font-family: var(--billie-ff-ui);
  font-size: var(--billie-fs-body);
}

.billie-section {
  padding: var(--billie-section-y) var(--billie-gutter);
  border-radius: var(--billie-radius-none);
}

.billie-section--tint { background: var(--billie-color-surface); }
.billie-section--editorial { background: var(--billie-gradient-editorial); }

.billie-display {
  font-family: var(--billie-ff-display);
  font-weight: var(--billie-fw-regular);
  font-size: var(--billie-fs-display);
  line-height: var(--billie-lh-display);
  letter-spacing: var(--billie-ls-display);
}

.billie-heading {
  font-family: var(--billie-ff-display);
  font-weight: var(--billie-fw-regular);
  font-size: var(--billie-fs-heading);
  line-height: var(--billie-lh-heading);
  letter-spacing: var(--billie-ls-heading);
}

.billie-eyebrow {
  font-family: var(--billie-ff-ui);
  font-weight: var(--billie-fw-bold);
  font-size: var(--billie-fs-eyebrow);
  line-height: var(--billie-lh-eyebrow);
  letter-spacing: var(--billie-ls-eyebrow);
  text-transform: uppercase;
}

.billie-body {
  font-family: var(--billie-ff-ui);
  font-weight: var(--billie-fw-regular);
  font-size: var(--billie-fs-body);
  line-height: var(--billie-lh-body);
}

.billie-utility {
  font-family: var(--billie-ff-ui);
  font-weight: var(--billie-fw-light);
  font-size: var(--billie-fs-utility);
  line-height: var(--billie-lh-utility);
}

.billie-nav-link {
  font-family: var(--billie-ff-ui);
  font-weight: var(--billie-fw-light);
  font-size: var(--billie-fs-nav);
  line-height: var(--billie-lh-nav);
  letter-spacing: var(--billie-ls-nav);
}

.billie-announce {
  font-family: var(--billie-ff-ui);
  font-weight: var(--billie-fw-bold);
  font-size: var(--billie-fs-nav);
  line-height: var(--billie-lh-announce);
  letter-spacing: var(--billie-ls-announce);
  text-transform: uppercase;
}

/* [S] pill buttons: radius 999px, uppercase label, min-width 100% on mobile
   and 300px from the desktop breakpoint. */
.billie-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: var(--billie-radius-pill);
  font-family: var(--billie-ff-ui);
  font-weight: var(--billie-fw-bold);
  font-size: var(--billie-fs-nav);
  letter-spacing: var(--billie-ls-announce);
  text-transform: uppercase;
  min-height: 44px;
  min-width: 100%;
  padding: var(--billie-space-md) var(--billie-space-2xl);
  background: var(--billie-black);
  color: var(--billie-white);
  transition: opacity var(--billie-dur) var(--billie-ease);
}

.billie-btn:hover { opacity: 0.85; }

.billie-btn--accent    { background: var(--billie-color-accent);    color: var(--billie-black); }
.billie-btn--periwinkle{ background: var(--billie-periwinkle-soft); color: var(--billie-black); }
.billie-btn--coral     { background: var(--billie-color-primary);   color: var(--billie-black); }

.billie-btn:focus-visible::after {
  content: "";
  display: block;
  position: absolute;
  inset: var(--billie-radius-focus-inset);
  border-radius: var(--billie-radius-pill);
  box-shadow: 0 0 3px 3px var(--billie-focus-ring);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .billie-btn { min-width: 300px; }
}

/* Colourway swatch control — [S] round, pill radius, focus ring inset -3px */
.billie-swatch {
  border-radius: var(--billie-radius-pill);
  width: 30px;  /* [D] rendered swatch rect 30x30 */
  height: 30px;
  display: block;
  overflow: hidden;
}

/* Accessible-but-invisible text (skip links, icon-only control labels, the
   footer's structural heading). The base theme ships no sr-only utility. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .billie-btn { transition: none; }
}