/* ═══════════════════════════════════════════════════════════════
   BodyTalks™ — THEME OVERLAY
   Retrofits the Bauhaus poster language onto existing pages by
   overriding their CSS variables. No markup or JS is changed.

   The site grew three different variable dialects. The same name
   means different things in each — in the clinical pages --cream
   is a DARK TEXT colour, in the public pages it is a light
   BACKGROUND. So each dialect gets its own scope, chosen by a
   class on <html>:

     <html class="bt-public">   marketing + patient-facing
     <html class="bt-clinic">   staff tools (--cream = text)
     <html class="bt-app">      newer pages (--bg/--ink/--accent)

   Load AFTER the page's own <style> so these win.
   ═══════════════════════════════════════════════════════════════ */

/* ── TYPOGRAPHY — ONE GEOMETRIC FAMILY ──────────────────────────
   Anton was wrong: it is a modern condensed poster grotesque, not a
   Bauhaus face. Bauhaus type is GEOMETRIC — built from circles and
   straight lines, monoline, single-storey 'a'. That is Futura (Renner
   1927), Universal (Bayer 1925), Kabel (Koch 1927).

   Jost* is the free Futura homage, and it carries 300–900, so one
   family covers display and body. Using a single family differentiated
   only by weight IS the Bauhaus method — systematic, not decorative.

   Two earlier attempts failed and are worth recording:
     · listing heading class names — the site has dozens, any missed
       one silently kept the old serif
     · redefining the old families via @font-face — works for static
       fonts (Anton) but NOT for variable fonts like Jost, where an
       exact-weight face renders only the file's default instance
   So: force the family on everything, and let weight do the work. */
html[class*="bt-"] *:not(code):not(pre):not(kbd):not(samp){
  font-family:'Jost',ui-sans-serif,system-ui,'Segoe UI',sans-serif!important;
}
/* display sizes get weight and tight tracking instead of a second face */
html[class*="bt-"] h1,html[class*="bt-"] h2,html[class*="bt-"] h3,
html[class*="bt-"] .page-title,html[class*="bt-"] .form-title,
html[class*="bt-"] .section-title,html[class*="bt-"] .hero-title,
html[class*="bt-"] .stat-value,html[class*="bt-"] .date-title,
html[class*="bt-"] .admin-logo,html[class*="bt-"] .brand,
html[class*="bt-"] .logo,html[class*="bt-"] .footer-brand,
html[class*="bt-"] .res-title,html[class*="bt-"] .q-title,
html[class*="bt-"] .success-title,html[class*="bt-"] .plan-title,
html[class*="bt-"] .vas-num,html[class*="bt-"] .step-n,
html[class*="bt-"] .section-num,html[class*="bt-"] .empty-title,
html[class*="bt-"] .cc-name,html[class*="bt-"] .path-title,
html[class*="bt-"] .q-text,html[class*="bt-"] .result-headline,
html[class*="bt-"] .maps-title,html[class*="bt-"] .modal-title,
html[class*="bt-"] .playlist-title,html[class*="bt-"] .playlist-cta-title,
html[class*="bt-"] .m-quote,html[class*="bt-"] .cc-price-num{
  font-weight:700!important;
  letter-spacing:-.015em;
  line-height:1.08;
}
/* Bauhaus emphasis is colour and weight, never a slanted serif */
html[class*="bt-"] em{font-style:normal;color:var(--bt-red);font-weight:700}

/* ── SHARED PALETTE ─────────────────────────────────────────── */
:root{
  --bt-paper:#F7F3E8; --bt-paper2:#FFFDF7;
  --bt-ink:#141414;   --bt-ink2:#3D3D3D;  --bt-ink3:#7A7568;
  --bt-red:#E0342A;   --bt-blue:#1B4BA8;  --bt-yellow:#FFC93C;
  --bt-green:#2F9E5E; --bt-hair:#DED7C6;  --bt-hair2:#E9E3D5;
}

/* ── 1. PUBLIC PAGES ────────────────────────────────────────── */
/*  original: --cream #F7F4EF (bg) · --gold #B8975A (accent)      */
html.bt-public{
  --cream:#F7F3E8;  --warm-white:#FFFDF7;
  --charcoal:#141414; --stone:#7A7568;
  --gold:#1B4BA8;   --gold-light:#4A78D8; --gold-bg:rgba(27,75,168,.07);
  --sage:#E0342A;   --sage-bg:rgba(224,52,42,.07);
  --border:rgba(20,20,20,.13); --border-strong:rgba(20,20,20,.30);
  --danger:#E0342A; --red:#E0342A; --green:#2F9E5E; --amber:#FFC93C;
  --warm:#F7F3E8;   --dark:#141414;
}

/* ── 2. CLINIC PAGES ────────────────────────────────────────── */
/*  CAREFUL: here --cream is the dark TEXT colour, not a surface. */
html.bt-clinic{
  --cream:#141414;            /* text — must stay dark */
  --warm-white:#FFFDF7;
  --charcoal:#141414; --stone:#7A7568;
  --gold:#1B4BA8;   --gold-light:#FFC93C;
  --sage:#2F9E5E;   --danger:#E0342A;
  --border:#DED7C6; --border-strong:#B9B0A0;
  --card-bg:#FFFDF7; --success:#2F9E5E;
  --teal:#1B4BA8;   --text:#141414; --sub:#7A7568; --dark:#141414;
}
/* these pages hard-code a cool background instead of using a var */
html.bt-clinic body{background:var(--bt-paper)!important;color:var(--bt-ink2)}

/* ── 3. APP PAGES ───────────────────────────────────────────── */
html.bt-app{
  --bg:#F7F3E8; --surface:#FFFDF7; --card-bg:#FFFDF7; --card-alt:#F2EDE0;
  --ink:#141414; --ink-muted:#3D3D3D; --stone:#7A7568;
  --border:#DED7C6; --border-soft:#E9E3D5;
  --accent:#1B4BA8; --accent-dark:#123577; --accent-light:rgba(27,75,168,.09);
  --sage:#2F9E5E; --danger:#E0342A; --danger-light:rgba(224,52,42,.09);
  --amber:#FFC93C;
}
html.bt-app body{background:var(--bt-paper)}

/* ── GEOMETRY — square the soft edges ───────────────────────── */
html[class*="bt-"] button,
html[class*="bt-"] .btn,html[class*="bt-"] .cta,
html[class*="bt-"] input:not([type=range]),
html[class*="bt-"] select,html[class*="bt-"] textarea,
html[class*="bt-"] .card,html[class*="bt-"] .stat-card,
html[class*="bt-"] .modal,html[class*="bt-"] .chip{
  border-radius:0!important;
}
/* things that must stay round */
html[class*="bt-"] .user-dot,html[class*="bt-"] .opt-box.round,
html[class*="bt-"] .avatar,html[class*="bt-"] .dot,
html[class*="bt-"] input[type=range]::-webkit-slider-thumb{border-radius:50%!important}

/* ── ACCENTS — a little primary colour, placed deliberately ─── */
html[class*="bt-"] .stat-card{border-top:4px solid var(--bt-ink)}
html[class*="bt-"] .stat-card:nth-child(4n+1){border-top-color:var(--bt-red)}
html[class*="bt-"] .stat-card:nth-child(4n+2){border-top-color:var(--bt-blue)}
html[class*="bt-"] .stat-card:nth-child(4n+3){border-top-color:var(--bt-yellow)}
html[class*="bt-"] .stat-card:nth-child(4n+4){border-top-color:var(--bt-ink)}

html[class*="bt-"] .form-section-bar{background:var(--bt-red)!important}
html[class*="bt-"] .section-num{color:var(--bt-hair)!important}

/* primary buttons read as blocks, not pills */
html[class*="bt-"] .submit-btn,
html[class*="bt-"] .btn-save-assessment,
html[class*="bt-"] .new-patient-btn,
html[class*="bt-"] .cta-start{
  background:var(--bt-yellow)!important;color:var(--bt-ink)!important;
  border:2px solid var(--bt-ink)!important;font-weight:700!important;
  letter-spacing:.1em;text-transform:uppercase;
}
html[class*="bt-"] .submit-btn:hover,
html[class*="bt-"] .btn-save-assessment:hover,
html[class*="bt-"] .new-patient-btn:hover,
html[class*="bt-"] .cta-start:hover{
  background:var(--bt-ink)!important;color:var(--bt-yellow)!important;
}

/* hairlines instead of heavy chrome */
html[class*="bt-"] .admin-header,
html[class*="bt-"] .topbar{
  background:var(--bt-paper)!important;
  border-bottom:1px solid var(--bt-hair)!important;
  backdrop-filter:none!important;
}
html[class*="bt-"] .hn-link.active{color:var(--bt-red)!important;border-bottom-color:var(--bt-red)!important}

/* selected states in the clinic palette */
html[class*="bt-"] .chip.selected,
html[class*="bt-"] .opt.sel,
html[class*="bt-"] .lk-opt.sel{
  background:var(--bt-blue)!important;border-color:var(--bt-blue)!important;color:#fff!important;
}
html[class*="bt-"] .qchip.preset{
  background:rgba(27,75,168,.09)!important;border-color:var(--bt-blue)!important;color:var(--bt-blue)!important;
}

/* progress + focus */
html[class*="bt-"] .progress-fill,
html[class*="bt-"] .prog-fill{background:var(--bt-red)!important}
html[class*="bt-"] input:focus,html[class*="bt-"] select:focus,html[class*="bt-"] textarea:focus{
  border-color:var(--bt-blue)!important;outline:none;
}

@media(prefers-reduced-motion:reduce){
  html[class*="bt-"] *{animation:none!important;transition:none!important}
}