/* Shared brand tokens for Balanced & Bankable
   Used across all 3 variations. */

:root {
  /* Brand palette */
  --forest: #1F3B2D;
  --forest-2: #284A39;
  --forest-deep: #152A20;
  --olive: #4F5C3A;
  --sage: #6E8167;
  --gold: #B8893D;
  --gold-deep: #8A6529;
  --champagne: #D8BC7A;
  --cream: #F5EFE2;
  --paper: #FAF6EC;
  --ink: #1C211D;

  --paper-warm: #F4ECDA;
  --cream-shadow: #E8DFCB;

  /* Type */
  --serif: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --serif-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans-feature: "DM Sans", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
}

/* shared utilities */
.bb-rule {
  display: block;
  height: 1px;
  background: var(--gold);
  border: none;
  margin: 0;
}
.bb-rule-thin {
  height: 1px;
  background: rgba(184, 137, 61, 0.4);
}
.bb-eyebrow {
  font-family: var(--sans-feature);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
}
.bb-serif-italic {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
}

/* Reset within artboards */
.bb-artboard * {
  box-sizing: border-box;
}
.bb-artboard {
  font-family: var(--serif);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bb-artboard a {
  color: inherit;
  text-decoration: none;
}
.bb-artboard button {
  font: inherit;
  border: none;
  cursor: pointer;
  background: none;
  color: inherit;
}

/* Decorative B&B monogram (used at multiple sizes) */
.bb-seal {
  position: relative;
  display: inline-block;
}
.bb-seal svg {
  display: block;
}

/* Buttons */
.bb-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  font-family: var(--sans-feature);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 200ms ease;
  cursor: pointer;
  border: 1px solid currentColor;
}
.bb-btn-gold {
  background: var(--gold);
  color: var(--forest-deep);
  border-color: var(--gold);
}
.bb-btn-gold:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--cream);
}
.bb-btn-outline {
  background: transparent;
  color: currentColor;
}
.bb-btn-outline:hover {
  background: currentColor;
}

/* Video placeholder play button */
.bb-play {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.bb-play svg {
  width: 28px;
  height: 28px;
  fill: var(--forest-deep);
  margin-left: 4px;
}