/* =====================================================================
   PB TYPOGRAPHY & COLOUR SYSTEM — the single source of truth.
   Loaded by every layout (public site, booking, blog, podcast, cohorts,
   client portal, admin) right after Bootstrap and before page styles.
   New modules MUST use these variables and utility classes — never set
   font families or ad-hoc font sizes in page CSS. See docs/DESIGN_SYSTEM.md
   ===================================================================== */

:root{
  /* ---- Families ---- */
  --font-heading:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; /* overridden by the selected preset */
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  /* ---- Colour ---- */
  --c-navy:#0B1830; --c-navy-2:#12264A; --c-charcoal:#14171E;
  --c-warm-white:#F6F1E7;          /* headline/body text on dark */
  --c-ink:#18202E;                 /* text on light */
  --c-gold:#C9A04E;                /* muted gold: buttons, rules, icons */
  --c-gold-light:#DDBA6E;          /* gold text / emphasis on dark */
  --c-gold-ink:#8F6A1F;            /* gold text on light (AA contrast) */
  --c-grey-dark:#5C6473;           /* supporting text on light */
  --c-grey-light:#AEB5C2;          /* supporting text on dark */
  --c-paper:#F7F4EE; --c-line:#E7E1D4;

  /* ---- Type scale (fluid; mobile → desktop) ---- */
  --fs-hero:clamp(2.375rem,1.55rem + 3.7vw,5rem);         /* 38 → 80px */
  --fs-display:clamp(1.875rem,1.3rem + 2.3vw,3.375rem);   /* 30 → 54px  section headlines */
  --fs-title:clamp(1.3125rem,1.2rem + .45vw,1.625rem);    /* 21 → 26px  card / editorial titles */
  --fs-subhead:clamp(1.25rem,1.15rem + .35vw,1.5rem);     /* 20 → 24px  Inter subheadings & lead */
  --fs-body:clamp(.9375rem,.9rem + .2vw,1.0625rem);       /* 15 → 17px */
  --fs-small:.875rem;                                     /* 14px */
  --fs-nav:.875rem;                                       /* 14px */
  --fs-button:.8125rem; --fs-button-lg:.875rem; --fs-button-sm:.75rem; /* 13 / 14 / 12px */
  --fs-label:clamp(.6875rem,.66rem + .1vw,.75rem);        /* 11 → 12px */

  --lh-hero:1.06; --lh-heading:1.14; --lh-title:1.25; --lh-body:1.7; --lh-ui:1.45;
  --ls-hero:-.022em; --ls-heading:-.014em; --ls-label:.2em; --ls-button:.045em; --ls-nav:.01em;
  --fw-hero:600; --fw-heading:600; --fw-title:600; --fw-ui:500; --fw-strong:600;
  --em-style:normal; --em-weight:600;  /* headline emphasis: italic for serif presets, gold-only for sans */
  --measure:68ch; --measure-narrow:56ch; --hero-max:850px;

  --accent-em:var(--c-gold-ink);   /* colour of headline emphasis (light bg) */

  /* Bootstrap hooks */
  --bs-body-font-family:var(--font-body);
  --bs-body-font-weight:400;
  --bs-body-color:var(--c-ink);
}

/* ---------------------------------------------------------------------
   Base (shared)
   --------------------------------------------------------------------- */
body{font-family:var(--font-body);font-weight:400;color:var(--c-ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-kerning:normal;font-feature-settings:"kern","liga","calt"}
b,strong{font-weight:var(--fw-strong)}
.btn,.form-control,.form-select,.form-label,.nav-link,.dropdown-item,.badge,.table,.modal,.alert,.input-group-text{font-family:var(--font-body)}
.btn{font-weight:600;letter-spacing:var(--ls-button)}
.badge{font-weight:600;letter-spacing:.02em}
::selection{background:rgba(201,160,78,.28)}

/* Italic serif emphasis inside any headline: write *words* in admin → <em> */
:where(h1,h2,h3,.t-hero,.t-display,.t-title,.display-hero,.section-title,.fr-display) em{
  font-family:var(--font-heading);font-style:var(--em-style);font-weight:var(--em-weight);color:var(--accent-em);letter-spacing:inherit}

/* =====================================================================
   PUBLIC SITE — premium editorial hierarchy   (<body class="ui-editorial">)
   ===================================================================== */
.ui-editorial{font-size:var(--fs-body);line-height:var(--lh-body)}
.ui-editorial :where(h1,h2,h3,.h1,.h2,.h3){font-family:var(--font-heading);font-weight:var(--fw-heading);letter-spacing:var(--ls-heading);line-height:var(--lh-heading);text-wrap:balance}
.ui-editorial :where(h1,.h1){font-size:var(--fs-display)}
.ui-editorial :where(h2,.h2){font-size:var(--fs-display)}
.ui-editorial :where(h3,.h3){font-size:var(--fs-title);line-height:var(--lh-title)}
.ui-editorial :where(h4,.h4){font-family:var(--font-body);font-size:var(--fs-subhead);font-weight:600;line-height:1.35}
.ui-editorial :where(h5,.h5,h6,.h6){font-family:var(--font-body);font-size:1.0625rem;font-weight:600;line-height:1.4}
.ui-editorial :where(p,li,dd,blockquote){text-wrap:pretty}
.ui-editorial .lead{font-size:var(--fs-subhead);font-weight:400;line-height:1.55}
.ui-editorial small,.ui-editorial .small{font-size:var(--fs-small)}
.ui-editorial .nav-link,.ui-editorial .dropdown-item{font-size:var(--fs-nav);font-weight:500;letter-spacing:var(--ls-nav)}
.ui-editorial .btn{font-size:var(--fs-button);padding:.72rem 1.25rem;border-radius:10px}
.ui-editorial .btn-lg{font-size:var(--fs-button-lg);padding:.95rem 1.6rem}
.ui-editorial .btn-sm{font-size:var(--fs-button-sm);padding:.45rem .85rem}
.ui-editorial .btn-link{letter-spacing:0;font-weight:500}
.ui-editorial .form-control,.ui-editorial .form-select{font-size:.9375rem}
.ui-editorial .form-label{font-size:var(--fs-small);font-weight:500}
.ui-editorial .text-body-secondary,.ui-editorial .text-muted{color:var(--c-grey-dark)!important}
/* Named editorial roles (map existing component classes onto the scale) */
.ui-editorial .display-hero{font-family:var(--font-heading);font-size:var(--fs-hero);font-weight:var(--fw-hero);line-height:var(--lh-hero);letter-spacing:var(--ls-hero);max-width:var(--hero-max);text-wrap:balance}
.ui-editorial .section-title,.ui-editorial .fr-display{font-family:var(--font-heading);font-size:var(--fs-display);font-weight:var(--fw-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-heading)}
.ui-editorial .eyebrow,.ui-editorial .fr-step-label{font-family:var(--font-body);font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-label)}
.ui-editorial .section-sub{font-size:var(--fs-subhead);font-weight:400;line-height:1.55;max-width:var(--measure-narrow)}
.ui-editorial .prose,.ui-editorial .post-body{font-size:calc(var(--fs-body) + .0625rem);line-height:1.8;max-width:var(--measure)}
.ui-editorial .post-body h2{font-size:var(--fs-title);margin-top:2.2rem}
.ui-editorial .post-body h3{font-family:var(--font-body);font-size:var(--fs-subhead);font-weight:600}
.ui-editorial .post-body blockquote{font-family:var(--font-heading);font-style:var(--em-style);font-weight:500;font-size:var(--fs-subhead);line-height:1.5}

/* Dark surfaces: warm white text, soft grey support, light-gold emphasis */
.ui-editorial :is(.hero,.page-hero,.book-hero,.cohort-hero,.fr-hero,.fr-outcomes,.fr-tool-aside,.booking-band,.pb-popup-brand,.site-footer,.on-dark){
  --accent-em:var(--c-gold-light);color:var(--c-warm-white)}
.ui-editorial :is(.hero,.page-hero,.book-hero,.cohort-hero,.fr-hero,.fr-outcomes,.pb-popup-brand) :is(h1,h2,h3,.display-hero,.fr-display){color:var(--c-warm-white)}

/* =====================================================================
   PORTAL & ADMIN — same families, compact functional hierarchy
   (<body class="ui-app">)
   ===================================================================== */
.ui-app{font-size:.875rem;line-height:var(--lh-ui)}
.ui-app h1,.ui-app .page-title{font-family:var(--font-heading);font-size:clamp(1.375rem,1.25rem + .5vw,1.625rem);font-weight:500;letter-spacing:-.01em;line-height:1.2}
.ui-app :where(h2,.h2){font-family:var(--font-body);font-size:1.125rem;font-weight:600;letter-spacing:-.005em;line-height:1.3}
.ui-app :where(h3,.h3,h4,.h4){font-family:var(--font-body);font-size:1rem;font-weight:600;line-height:1.35}
.ui-app :where(h5,.h5,h6,.h6){font-family:var(--font-body);font-size:.875rem;font-weight:600;line-height:1.4}
.ui-app .btn{font-size:.8125rem;letter-spacing:.02em}
.ui-app .btn-sm{font-size:.75rem}
.ui-app .btn-lg{font-size:.875rem}
.ui-app .form-control,.ui-app .form-select{font-size:.875rem}
.ui-app .form-control-sm,.ui-app .form-select-sm{font-size:.8125rem}
.ui-app .form-label{font-weight:500}
.ui-app .table{font-size:.8125rem}
.ui-app .table thead th{font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--c-grey-dark)}
.ui-app .nav-link{font-size:.8125rem;font-weight:500}
.ui-app .t-eyebrow{letter-spacing:.14em}
.ui-app .stat-value,.ui-app .kpi-value{font-family:var(--font-heading);font-weight:500;font-variant-numeric:lining-nums tabular-nums}
.text-gold-dark{color:var(--c-gold-ink)!important}

/* ---------------------------------------------------------------------
   Utility classes — use these in every new template (kept last so they win over scoped defaults)
   --------------------------------------------------------------------- */
.t-hero{font-family:var(--font-heading);font-size:var(--fs-hero);font-weight:var(--fw-hero);line-height:var(--lh-hero);letter-spacing:var(--ls-hero);max-width:var(--hero-max);text-wrap:balance}
.t-display{font-family:var(--font-heading);font-size:var(--fs-display);font-weight:var(--fw-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);text-wrap:balance}
.t-title{font-family:var(--font-heading);font-size:var(--fs-title);font-weight:var(--fw-title);line-height:var(--lh-title);letter-spacing:-.005em;text-wrap:balance}
.t-subhead{font-family:var(--font-body);font-size:var(--fs-subhead);font-weight:500;line-height:1.4;letter-spacing:-.008em}
.t-lead{font-family:var(--font-body);font-size:var(--fs-subhead);font-weight:400;line-height:1.55;text-wrap:pretty}
.t-body{font-family:var(--font-body);font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body)}
.t-small{font-size:var(--fs-small);line-height:1.6}
.t-eyebrow{font-family:var(--font-body);font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-label);line-height:1.4}
.t-em{font-family:var(--font-heading);font-style:var(--em-style);font-weight:var(--em-weight)}
.t-italic{font-style:italic}
.t-serif{font-family:var(--font-heading)}
.t-sans{font-family:var(--font-body)}
.t-measure{max-width:var(--measure)}
.t-measure-narrow{max-width:var(--measure-narrow)}
.t-balance{text-wrap:balance}
.t-pretty{text-wrap:pretty}
.t-num{font-variant-numeric:tabular-nums lining-nums}
.t-muted{color:var(--c-grey-dark)}
.t-gold{color:var(--accent-em)}
.on-dark,.on-dark .t-muted{--accent-em:var(--c-gold-light)}
.on-dark{color:var(--c-warm-white)}
.on-dark .t-muted{color:var(--c-grey-light)}