@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   BUTTERFLY BABES — BOUDOIR THEME (Geometric)
   File: bb-theme.css (place in public_html/)

   Link this AFTER each page's own <style> block:
     <link rel="stylesheet" href="bb-theme.css">

   It redefines the palette variables the pages already use, swaps the
   typefaces, and softens the shapes. Nothing in the page markup has to
   change, so one line per page converts it.

   Typeface: Jost throughout — one geometric sans, light weights, no serif.
   Emphasis is carried by WEIGHT as well as colour, never colour alone.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:dark;

  /* Existing variable names, Boudoir values — pages keep using var(--black) etc. */
  --black:#171014;
  --dark:#211821;
  --mid:#2a1f29;
  --silver:#bfa8b0;
  --silver-light:#f6eef0;
  --white:#f6eef0;
  --red:#d98e86;
  --line:rgba(246,238,240,0.10);
  --line2:rgba(246,238,240,0.04);

  /* New tokens */
  --rose:#d98e86;
  --rose-deep:#b86b63;
  --rose-wash:rgba(217,142,134,0.12);
  --surface-3:#342532;
  --ink-faint:#8a737d;
  --on-rose:#231419;          /* text that sits on a rose fill */
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --r:18px;
  --pill:999px;
}

/* ── One typeface, everywhere ──────────────────────────────────────── */
body,
h1,h2,h3,h4,p,a,span,div,li,label,input,select,textarea,button{
  font-family:var(--sans);
}
body{font-weight:300;font-size:16px;line-height:1.58;}

/* Headings: light weight, tight tracking, sentence case. Geometric faces
   carry authority through size and space rather than stroke contrast. */
.hero-title,.page-title,.section-title,.roster-title,
h1,h2{
  font-weight:200;
  letter-spacing:-0.02em;
  text-transform:none;
  line-height:1.06;
}
/* Display sizes need less leading than a normal heading, and the pages' own
   tight values were being overridden by the rule above. */
.hero-title{line-height:0.92;}
.hero-title em{line-height:1;}
.svc-title,.day-name,.faq-q,.card-name,.fact-v,.spec-val,
.call-number,.foot-brand,h3{
  font-weight:300;
  letter-spacing:-0.01em;
  text-transform:none;
}

/* Emphasis: Jost's italic is faint, so lean on weight plus colour.
   Weight carries it on its own if colour is hard to read. */
.hero-title em,.page-title em,.section-title em,.roster-title em,
h1 em,h2 em{
  font-style:normal;
  font-weight:500;
  color:var(--rose);
}

/* The old design set long prose in italic serif. In a geometric sans that
   reads cheap, so prose goes upright with colour and size for hierarchy. */
.hero-sub,.page-sub,.roster-hint,.call-hours,.footer-note,.week-note,
.svc-text,.faq-a,.areas-left p,.qc-body,.body-text,.seo-right p,
.footer-brand,.testi-text,.seo-tagline-inline,.pending-box p,
.tagline-main-text,.qc-left{
  font-style:normal;
  font-weight:300;
  letter-spacing:0;
}
.seo-right p:first-child,.body-text:first-of-type{font-weight:300;}

/* Small labels: a little tracking, never the old 0.5em shout */
.hero-kicker,.page-kicker,.section-kicker,.roster-kicker,.call-label,
.svc-num,.spec-key,.hbb-text,.bb-item,.testi-author,.footer-col h3,
.nav-links a,.nav-cta,.status-badge,.updating-badge,.day-tag,
.suburb-link,.chip,.card-more,.card-time,.day-date,.footer-bottom,
.footer-bottom-text,label{
  font-weight:400;
  letter-spacing:0.1em;
}
.hero-kicker,.page-kicker,.section-kicker,.roster-kicker,.call-label{
  font-weight:500;
  letter-spacing:0.16em;
}
.section-kicker::before,.hero-kicker::before,.hero-kicker::after,
.roster-kicker::before,.roster-kicker::after{background:var(--rose);}

/* ── Rose needs dark text, not white ──────────────────────────────── */
.top-bar{
  background:var(--rose);
  color:var(--on-rose);
  font-weight:500;
  letter-spacing:0.14em;
}
.btn-red,.btn-red-solid,.btn-book,.talent-card-sms,.mqn-link.mqn-accent,
button[type="submit"]{
  background:var(--rose);
  color:var(--on-rose);
  font-weight:600;
  letter-spacing:0.1em;
  border-radius:var(--pill);
}
.btn-red:hover,.btn-red-solid:hover,.btn-book:hover,.talent-card-sms:hover{
  background:#e49f98;color:var(--on-rose);
}
.nav-cta:hover{background:var(--rose);border-color:var(--rose);color:var(--on-rose);}
.tag-red{background:var(--rose);color:var(--on-rose);}
.tag-silver{background:var(--surface-3);color:var(--silver-light);}
.card-name{background:var(--rose);color:var(--on-rose);font-weight:400;}
.day-tag.tonight{background:var(--rose);border-color:var(--rose);color:var(--on-rose);font-weight:600;}
.dot.on{background:var(--rose);}
.btn-silver{background:var(--silver-light);color:var(--on-rose);}

.status-badge,.status-badge.live-variant{
  background:var(--rose-wash);
  border:1px solid var(--rose-deep);
  color:var(--silver-light);
  border-radius:var(--pill);
}
.status-dot{background:var(--rose);}
.updating-badge{border-radius:var(--pill);}

/* ── Softer shapes ────────────────────────────────────────────────── */
.btn-silver,.btn-ghost,.btn-ghost-s,.nav-cta,.suburb-link,.chip,
.preview-link,.call{border-radius:var(--pill);}
.svc-card,.testi-card,.fact,.call-card,.talent-card,.exp-item,
.note-box,.pending-box{border-radius:var(--r);}
input[type=text],input[type=tel],input[type=email],select,textarea{
  border-radius:12px;font-weight:300;
}

/* ── Page furniture ───────────────────────────────────────────────── */
nav,.tabs{background:rgba(23,16,20,0.96);}
.mobile-quick-nav{background:rgba(23,16,20,0.98);}
footer{background:var(--dark);}
body::before{background-image:none;}  /* grid overlay reads techy on a warm ground */

.footer-note a,.week-note a,.faq-a a{color:var(--rose);}

/* The Q marker on FAQ items was a serif flourish; keep it plain */
.faq-q::before{font-family:var(--sans);font-weight:500;}

/* ═══════════════════════════════════════════════════════════════════
   SPECIFICITY OVERRIDE
   The pages set their fonts on classes, which outrank the element-level
   rules above no matter the load order. These are every class selector
   across the site that declares a legacy font; they have to be named
   explicitly or EB Garamond and Barlow keep winning.
   ═══════════════════════════════════════════════════════════════════ */
.areas-left h2,.areas-left p,.article-body h2,.article-body h3,.article-body p,
.article-cta h3,.article-cta p,.article-title,.call-hours,.call-number,.card-name,
.card-title,.countdown,.cta h2,.cta p,.day-name,.faq-a,.faq-q,.faq-q::before,
.footer-brand,.footer-col h3,.footer-note,.hero-sub,.hero-sub-small,.hero-title,
.hero-title em,.hero-title-small,.key-points li,.logo-ring,.page-sub,.page-title,
.pending-box p,.pull-quote p,.qc-body,.qc-left,.related-card-title,.related-title,
.roster-hint,.roster-title,.section-title,.seo-left h2,.seo-right p,
.seo-tagline-inline,.spec-val,.status-badge,.svc-text,.svc-title,.tagline-main-text,
.testi-text,.viewer-name,.week-note,p.body-text{
  font-family:var(--sans);
}

/* Italic serif prose reads cheap in a geometric sans — set it upright. */
.hero-sub,.hero-sub-small,.page-sub,.roster-hint,.call-hours,.footer-note,
.week-note,.svc-text,.faq-a,.areas-left p,.qc-body,.qc-left,.body-text,
.seo-right p,.footer-brand,.testi-text,.seo-tagline-inline,.pending-box p,
.tagline-main-text,.article-body p,.article-cta p,.cta p,.key-points li,
.pull-quote p,.article-body h3{
  font-style:normal;
}

/* Headline emphasis: weight carries it, not colour alone. */
.hero-title em,.page-title em,.section-title em,.roster-title em,
.article-title em,.cta h2 em,.article-cta h3 em,.related-title em,
.day-name em{
  font-style:normal;
  font-weight:500;
  color:var(--rose);
}