/* ============================================================
   Business Builders — Colors & Type
   v2, 2025 brand guide
   ============================================================ */

/* Brand typeface: Poppins (self-hosted). Inter + Playfair Display still from Google. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&display=swap');

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Poppins-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Poppins-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Poppins-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Poppins-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Poppins-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Poppins-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Poppins-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Poppins-Black.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Poppins-BlackItalic.ttf') format('truetype'); }

:root {
  /* ---------- Brand palette ---------- */
  --bb-yellow:        #FACC15;  /* primary accent */
  --bb-yellow-deep:   #F49E1C;  /* gradient stop / hover */
  --bb-yellow-soft:   #FEF3C7;  /* tint backgrounds */

  --bb-black:         #1A1918;  /* primary dark (not pure black) */
  --bb-navy:          #111827;  /* secondary dark */
  --bb-gray:          #505050;  /* secondary mid */
  --bb-gray-2:        #6B6B6B;  /* body gray */
  --bb-gray-3:        #A3A3A3;  /* muted */
  --bb-gray-4:        #E5E5E5;  /* hairline */
  --bb-off-white:     #F7F5F2;  /* page bg alt */
  --bb-white:         #FFFFFF;

  /* Semantic */
  --bb-success:       #16A34A;
  --bb-danger:        #DC2626;

  /* ---------- Foreground / Background roles ---------- */
  --bg:               var(--bb-white);
  --bg-alt:           var(--bb-off-white);
  --bg-inverse:       var(--bb-black);
  --bg-inverse-2:     var(--bb-navy);

  --fg:               var(--bb-black);
  --fg-2:             var(--bb-gray);
  --fg-3:             var(--bb-gray-2);
  --fg-inverse:       var(--bb-white);
  --fg-inverse-2:     #D6D6D6;

  --accent:           var(--bb-yellow);
  --accent-ink:       var(--bb-black); /* text on yellow */
  --border:           var(--bb-black);
  --hairline:         var(--bb-gray-4);

  /* ---------- Gradients ---------- */
  --grad-yellow:      linear-gradient(135deg, #FACC15 0%, #F49E1C 100%);
  --grad-dark:        linear-gradient(135deg, #1A1918 0%, #505050 100%);

  /* ---------- Type families ---------- */
  --font-display:     'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:       'Playfair Display', Georgia, 'Times New Roman', serif; /* italic supporting copy */
  --font-mono:        ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (desktop) ---------- */
  --fs-display:       80px;  /* hero */
  --fs-h1:            56px;
  --fs-h2:            42px;
  --fs-h3:            28px;
  --fs-h4:            22px;
  --fs-body-lg:       18px;
  --fs-body:          16px;
  --fs-body-sm:       14px;
  --fs-eyebrow:       12px; /* uppercase tracked */
  --fs-caption:       13px;

  /* Line heights */
  --lh-tight:         1.02;
  --lh-heading:       1.12;
  --lh-body:          1.55;
  --lh-loose:         1.7;

  /* Letter spacing */
  --ls-tight:         -0.02em;
  --ls-normal:        0;
  --ls-eyebrow:       0.18em;
  --ls-caps:          0.02em;

  /* ---------- Spacing ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- Radii (BB is mostly SQUARE; small rounding only) ---------- */
  --r-0:   0px;
  --r-1:   2px;
  --r-2:   4px;
  --r-3:   8px;
  --r-pill: 999px;

  /* ---------- Signature offset shadows ---------- */
  /* Hard drop (no blur) — BB hallmark: yellow box with black bottom-right offset */
  --shadow-offset-sm: 4px 4px 0 0 var(--bb-black);
  --shadow-offset:    6px 6px 0 0 var(--bb-black);
  --shadow-offset-lg: 10px 10px 0 0 var(--bb-black);
  --shadow-offset-yellow: 6px 6px 0 0 var(--bb-yellow);

  /* Soft elevation (used sparingly — cards, menus) */
  --shadow-sm: 0 1px 2px rgba(26,25,24,0.06), 0 1px 3px rgba(26,25,24,0.08);
  --shadow-md: 0 4px 8px rgba(26,25,24,0.08), 0 2px 4px rgba(26,25,24,0.06);
  --shadow-lg: 0 12px 28px rgba(26,25,24,0.12), 0 4px 8px rgba(26,25,24,0.08);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  120ms;
  --dur:       200ms;
  --dur-slow:  360ms;
}

/* ============================================================
   Semantic text roles — just add class="bb-h1" etc
   ============================================================ */

.bb-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

.bb-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

.bb-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

.bb-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  text-transform: uppercase;
}

.bb-h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.3;
}

.bb-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.bb-body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  font-weight: 400;
}

.bb-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
}

.bb-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  font-weight: 400;
}

/* Italic serif — used for descriptive subtext under headlines, pull-quotes */
.bb-serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: 1.45;
  color: var(--fg-2);
}

/* Emphasis: yellow highlight word (used inline in headlines) */
.bb-hl { color: var(--bb-yellow); }
.bb-hl-italic {
  color: var(--bb-yellow);
  font-style: italic;
  font-weight: 700;
}

.bb-mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ============================================================
   Base reset (optional — scoped)
   ============================================================ */
.bb-root {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bb-root * { box-sizing: border-box; }