/* =========================================================================
   BayBoost — Color + Type tokens
   Reverse-engineered from BayBoost_Package_Showcase_v0.2.html
   ========================================================================= */

/* Webfonts ----------------------------------------------------------------
   The brand uses two Google Fonts: Barlow Condensed (display) + Inter (body).
   Pull from Google Fonts in HTML (recommended) OR self-host from fonts/.    */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Brand palette: raw tokens ─────────────────────────────────────── */
  --bb-dark-navy:     #0F1C2D;   /* header, hero base, footer */
  --bb-deep-navy:     #1C2B3A;   /* body text, section titles */
  --bb-mid-navy:      #243447;   /* gradient stop, dark-zone soft surfaces */
  --bb-signal-orange: #FF6B1A;   /* THE accent; CTAs, eyebrows, accents */
  --bb-orange-hover:  #E85E12;
  --bb-orange-soft:   #FFE5D2;   /* pulse highlight */

  --bb-white:         #FFFFFF;
  --bb-light-grey:    #F5F6F8;   /* page bg */
  --bb-soft-grey:     #EAEDF2;   /* band bg, section row, dash chip */
  --bb-line-grey:     #DDE3EC;   /* default border */
  --bb-mid-grey:      #5A6A7A;   /* secondary body text */

  /* Semantic accents (used sparingly; blue/amber are reserved) */
  --bb-green:         #27864A;
  --bb-green-soft:    #E8F3EC;
  --bb-blue:          #2471A3;
  --bb-blue-soft:     #E6F0F7;
  --bb-amber:         #C17F24;
  --bb-amber-soft:    #FCEFD5;

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --bb-shadow-sm: 0 2px 6px  rgba(15, 28, 45, 0.06);
  --bb-shadow-md: 0 6px 18px rgba(15, 28, 45, 0.10);
  --bb-shadow-lg: 0 14px 40px rgba(15, 28, 45, 0.14);

  /* Contextual orange-tinted shadow (sliders, primary press) */
  --bb-shadow-orange-sm: 0 2px 6px rgba(255, 107, 26, 0.40);
  --bb-shadow-cta:       0 8px 24px rgba(0, 0, 0, 0.18);
  --bb-shadow-cta-hover: 0 12px 32px rgba(0, 0, 0, 0.25);

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --bb-radius-xs: 4px;   /* pills, eyebrow chip */
  --bb-radius-sm: 6px;   /* buttons */
  --bb-radius-md: 8px;   /* msg cells, info tooltip */
  --bb-radius-lg: 12px;  /* small cards */
  --bb-radius-xl: 14px;  /* big content cards */
  --bb-radius-2xl: 18px; /* hero cards (ROI) */
  --bb-radius-pill: 50px;

  /* ── Spacing scale (4px grid) ──────────────────────────────────────── */
  --bb-space-1: 4px;
  --bb-space-2: 8px;
  --bb-space-3: 12px;
  --bb-space-4: 16px;
  --bb-space-5: 22px;
  --bb-space-6: 28px;
  --bb-space-7: 40px;
  --bb-space-section: 80px;   /* default section vertical padding */
  --bb-space-section-tight: 60px;

  /* ── Type tokens: families ─────────────────────────────────────────── */
  --bb-font-display: 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
  --bb-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Type tokens: weights ──────────────────────────────────────────── */
  --bb-weight-regular:  400;
  --bb-weight-medium:   500;
  --bb-weight-semibold: 600;
  --bb-weight-bold:     700;
  --bb-weight-black:    800;

  /* ── Type tokens: sizes ────────────────────────────────────────────── */
  --bb-fs-h1:  clamp(40px, 6vw, 68px);
  --bb-fs-h2:  clamp(34px, 4vw, 50px);
  --bb-fs-h3:  26px;
  --bb-fs-h4:  22px;     /* tl-name, setup-step-name, compare head */
  --bb-fs-lede: clamp(16px, 1.5vw, 19px);
  --bb-fs-body: 15px;
  --bb-fs-small: 14px;
  --bb-fs-xs: 13px;
  --bb-fs-2xs: 12px;
  --bb-fs-eyebrow: 12px;
  --bb-fs-utility: 11px; /* utility / status / tagline */
  --bb-fs-display-num: 44px; /* hero stat numerals */
  --bb-fs-display-amount: 64px; /* ROI giant numeral */

  /* ── Type tokens: line-height ──────────────────────────────────────── */
  --bb-lh-display: 1.05;   /* tight, condensed headings */
  --bb-lh-tight:   1.35;
  --bb-lh-base:    1.55;
  --bb-lh-loose:   1.6;

  /* ── Type tokens: letter-spacing ───────────────────────────────────── */
  --bb-ls-display: -0.5px; /* big condensed type */
  --bb-ls-utility-tight: 0.3px;
  --bb-ls-utility: 0.5px;
  --bb-ls-eyebrow: 1.2px;
  --bb-ls-eyebrow-wide: 1.5px;

  /* ── Semantic surfaces ─────────────────────────────────────────────── */
  --bb-bg-page:          var(--bb-light-grey);
  --bb-bg-surface:       var(--bb-white);
  --bb-bg-band:          var(--bb-soft-grey);
  --bb-bg-dark:          var(--bb-dark-navy);

  /* Iconic gradient for dark zones (hero + standard) */
  --bb-bg-dark-gradient:
    radial-gradient(circle at 85% 20%, rgba(255, 107, 26, 0.18) 0%, transparent 55%),
    linear-gradient(135deg, var(--bb-dark-navy) 0%, var(--bb-deep-navy) 55%, var(--bb-mid-navy) 100%);

  /* CTA zone gradient */
  --bb-bg-cta-gradient:
    linear-gradient(135deg, var(--bb-signal-orange) 0%, #E05A0D 100%);

  /* ── Semantic ink ──────────────────────────────────────────────────── */
  --bb-ink-primary:    var(--bb-deep-navy);
  --bb-ink-secondary:  var(--bb-mid-grey);
  --bb-ink-on-dark:    var(--bb-white);
  --bb-ink-on-dark-2:  rgba(255, 255, 255, 0.78);
  --bb-ink-on-dark-3:  rgba(255, 255, 255, 0.55);
  --bb-ink-accent:     var(--bb-signal-orange);

  /* ── Semantic borders ──────────────────────────────────────────────── */
  --bb-border-default: 1px solid var(--bb-line-grey);
  --bb-border-on-dark: 1px solid rgba(255, 255, 255, 0.10);
  --bb-border-accent:  3px solid var(--bb-signal-orange);

  /* ── Motion ────────────────────────────────────────────────────────── */
  --bb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bb-dur-fast:   0.15s;
  --bb-dur-base:   0.2s;
  --bb-dur-slow:   0.3s;
  --bb-dur-pulse:  0.8s;
}

/* =========================================================================
   Semantic element styles — apply on a page by including this file
   and either using these classes OR wrapping the page in .bb-skin
   ========================================================================= */

body, .bb-skin {
  font-family: var(--bb-font-body);
  font-size: var(--bb-fs-body);
  line-height: var(--bb-lh-base);
  color: var(--bb-ink-primary);
  background: var(--bb-bg-page);
  -webkit-font-smoothing: antialiased;
}

.bb-skin h1, .bb-skin h2, .bb-skin h3, .bb-skin .bb-heading {
  font-family: var(--bb-font-display);
  font-weight: var(--bb-weight-black);
  line-height: var(--bb-lh-display);
  letter-spacing: var(--bb-ls-display);
  color: var(--bb-ink-primary);
}

.bb-skin h1 { font-size: var(--bb-fs-h1); }
.bb-skin h2 { font-size: var(--bb-fs-h2); }
.bb-skin h3 { font-size: var(--bb-fs-h3); }

/* Single-word orange accent inside a heading */
.bb-accent { color: var(--bb-signal-orange); }

/* Eyebrow label — wide-tracked, uppercase, orange */
.bb-eyebrow {
  display: inline-block;
  font-family: var(--bb-font-body);
  font-size: var(--bb-fs-eyebrow);
  font-weight: var(--bb-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--bb-ls-eyebrow-wide);
  color: var(--bb-signal-orange);
}

/* Lede / introductory paragraph */
.bb-lede {
  font-size: var(--bb-fs-lede);
  color: var(--bb-ink-secondary);
  line-height: var(--bb-lh-loose);
}

/* Body copy default already applied via body */
.bb-body { font-size: var(--bb-fs-body); line-height: var(--bb-lh-base); }

/* Utility / tagline / micro */
.bb-utility {
  font-size: var(--bb-fs-utility);
  font-weight: var(--bb-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--bb-ls-eyebrow);
}

/* Big condensed numerals (hero stats, ROI amount) */
.bb-numeral {
  font-family: var(--bb-font-display);
  font-weight: var(--bb-weight-black);
  font-size: var(--bb-fs-display-num);
  line-height: 1;
  color: var(--bb-signal-orange);
}
.bb-numeral--xl {
  font-size: var(--bb-fs-display-amount);
}