/* ============================================================================
   BRAVE & BOUNDLESS — Design System
   Source of truth ported from the Claude Design handoff (tokens.css + base.css).

   STRATEGY (hybrid, performance-first):
   - The brand fonts (@font-face) and design TOKENS (:root custom properties)
     load site-wide. They are harmless on their own — a browser only downloads
     a @font-face file when some rendered text actually uses that family, so
     existing Elementor pages pay no font cost.
   - The opinionated EDITORIAL styling (uppercase display headings, brand
     buttons, etc.) is scoped under the `.bb-ds` wrapper class, so it only
     applies to surfaces we have intentionally migrated (e.g. the new
     block-built home page). Elementor / WooCommerce pages are untouched until
     we opt them in.

   Add `.bb-ds` to a block Group's "Additional CSS class(es)" to opt a page in.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Brand font faces — Brandon Grotesque (licensed; shipped as woff2)
   Inter Tight, JetBrains Mono and Playfair Display are enqueued from Google
   Fonts in PHP (with preconnect) for performance, so they are not @imported
   here.
   ---------------------------------------------------------------------------- */
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/BrandonGrotesque-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/BrandonGrotesque-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/BrandonGrotesque-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Brandon Grotesque";
  src: url("../fonts/BrandonGrotesque-MediumItalic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
/* Condensed cut — merch / tattoo-caps accent only. Loaded but used sparingly. */
@font-face {
  font-family: "Brandon Grotesque Cond";
  src: url("../fonts/BrandonGrotesqueCond-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------------------------------
   2. Design tokens (global — just custom properties, no visual side effects)
   ---------------------------------------------------------------------------- */
:root {
  /* ---- Color ---- */
  --bb-ink: #14110F;          /* char — primary ink, near-black w/ warm tint */
  --bb-ink-80: #2A2522;
  --bb-ink-60: #4A423D;

  --bb-bone: #F3ECE0;         /* cream / paper */
  --bb-bone-deep: #E6DBC8;
  --bb-paper: #FBF7EF;        /* lightest surface */

  /* The four named pillars */
  --bb-fire: #7A1E22;         /* deep burgundy — Part One */
  --bb-forge: #C64A1E;        /* rust orange — Part Two */
  --bb-foundation: #4F5B61;   /* slate — Part Three */
  --bb-field: #4F5B2A;        /* deep olive — Part Four */

  /* Secondary accents */
  --bb-aqua: #4BB7B5;
  --bb-chartreuse: #C7D33A;
  --bb-gold: #D4A24C;
  --bb-burgundy: #6B1018;

  /* Neutrals / utility */
  --bb-smoke: #C6BEB0;
  --bb-ash: #8A8378;
  --bb-rule: #211C18;
  --bb-rule-soft: #D8CEBD;

  /* Semantic surfaces */
  --bb-surface: var(--bb-paper);
  --bb-surface-alt: var(--bb-bone);
  --bb-surface-deep: var(--bb-ink);
  --bb-surface-fire: var(--bb-fire);
  --bb-text: var(--bb-ink);
  --bb-text-muted: var(--bb-ink-60);
  --bb-text-inverse: var(--bb-bone);

  /* ---- Type families ---- */
  --bb-font-display: "Brandon Grotesque", "Helvetica Neue", "Arial", sans-serif;
  --bb-font-body-brand: "Brandon Grotesque", "Helvetica Neue", "Arial", sans-serif;
  --bb-font-display-cond: "Brandon Grotesque Cond", "Brandon Grotesque", sans-serif;
  /* Serif: Freight Text Pro is the licensed brand serif; Playfair Display is
     the approved free web stand-in until/if Freight is licensed. */
  --bb-font-serif: "Playfair Display", "Georgia", serif;
  --bb-font-body: "Inter Tight", "Helvetica Neue", "Arial", sans-serif;
  --bb-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---- Type scale (fluid: mobile-first, scales up to the desktop targets) ---- */
  --bb-fs-overline: 0.75rem;
  --bb-fs-body-sm: 0.875rem;
  --bb-fs-body: 1rem;
  --bb-fs-body-lg: 1.125rem;
  --bb-fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --bb-fs-h6: 1.25rem;
  --bb-fs-h5: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --bb-fs-h4: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --bb-fs-h3: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);
  --bb-fs-h2: clamp(2.3rem, 1.5rem + 3.6vw, 3.75rem);
  --bb-fs-h1: clamp(2.8rem, 1.5rem + 6vw, 5.25rem);
  --bb-fs-display: clamp(3.2rem, 1rem + 10vw, 8rem);

  --bb-lh-tight: 0.92;
  --bb-lh-snug: 1.1;
  --bb-lh-body: 1.55;
  --bb-lh-loose: 1.7;

  --bb-tracking-tight: -0.015em;
  --bb-tracking-wide: 0.08em;
  --bb-tracking-xwide: 0.16em;

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

  /* ---- Radius (brand is predominantly square corners) ---- */
  --bb-radius-0: 0px; --bb-radius-1: 2px; --bb-radius-2: 4px; --bb-radius-pill: 999px;

  /* ---- Shadow (offset print-block, not Material blur) ---- */
  --bb-shadow-block: 6px 6px 0 var(--bb-ink);
  --bb-shadow-block-lg: 10px 10px 0 var(--bb-ink);
  --bb-shadow-soft: 0 2px 20px rgba(20, 17, 15, 0.08);
  --bb-shadow-paper: 0 1px 0 rgba(20,17,15,0.12), 0 10px 30px rgba(20,17,15,0.10);

  /* ---- Hairlines ---- */
  --bb-hairline: 1px solid var(--bb-rule);
  --bb-hairline-soft: 1px solid var(--bb-rule-soft);
  --bb-rule-thick: 4px solid var(--bb-ink);
}

/* Dark / ink-surface reversal — usable anywhere via the class */
.bb-ink-surface {
  --bb-surface: var(--bb-ink);
  --bb-surface-alt: var(--bb-ink-80);
  --bb-text: var(--bb-bone);
  --bb-text-muted: var(--bb-smoke);
  --bb-rule: var(--bb-bone);
  --bb-rule-soft: var(--bb-ink-60);
  background: var(--bb-ink);
  color: var(--bb-bone);
}

/* ============================================================================
   3. EDITORIAL STYLES — scoped to `.bb-ds` (opt-in surfaces only)
   ============================================================================ */
.bb-ds {
  font-family: var(--bb-font-body);
  color: var(--bb-text);
  font-size: var(--bb-fs-body);
  line-height: var(--bb-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bb-ds *, .bb-ds *::before, .bb-ds *::after { box-sizing: border-box; }

/* ---- Headings: Brandon Grotesque Black, uppercase, tight ---- */
.bb-ds h1, .bb-ds h2, .bb-ds h3, .bb-ds h4, .bb-ds h5, .bb-ds h6 {
  font-family: var(--bb-font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--bb-tracking-tight);
  line-height: var(--bb-lh-tight);
  color: var(--bb-text);
  margin: 0 0 var(--bb-sp-4);
}
.bb-ds h1 { font-size: var(--bb-fs-h1); }
.bb-ds h2 { font-size: var(--bb-fs-h2); }
.bb-ds h3 { font-size: var(--bb-fs-h3); }
.bb-ds h4 { font-size: var(--bb-fs-h4); }
.bb-ds h5 { font-size: var(--bb-fs-h5); line-height: var(--bb-lh-snug); }
.bb-ds h6 { font-size: var(--bb-fs-h6); line-height: var(--bb-lh-snug); }

.bb-ds p { margin: 0 0 var(--bb-sp-4); }
.bb-ds a { color: var(--bb-fire); text-underline-offset: 2px; text-decoration-thickness: 1px; }
.bb-ds a:hover { color: var(--bb-forge); }
.bb-ds strong, .bb-ds b { font-weight: 700; }

/* ---- Type primitives (apply via block "Additional CSS class") ---- */
.bb-display {
  font-family: var(--bb-font-display) !important;
  font-weight: 900; line-height: var(--bb-lh-tight);
  letter-spacing: var(--bb-tracking-tight); text-transform: uppercase;
}
.bb-display--cond { font-family: var(--bb-font-display-cond) !important; }
.bb-serif {
  font-family: var(--bb-font-serif) !important;
  font-weight: 400; font-style: italic; line-height: var(--bb-lh-snug);
  text-transform: none; letter-spacing: 0;
}
.bb-lead { font-family: var(--bb-font-serif); font-style: italic; font-size: var(--bb-fs-lead); line-height: 1.4; color: var(--bb-text-muted); }
.bb-overline, .bb-eyebrow {
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-overline);
  letter-spacing: var(--bb-tracking-xwide);
  text-transform: uppercase; font-weight: 700; color: var(--bb-text-muted);
}
.bb-mono { font-family: var(--bb-font-mono); letter-spacing: var(--bb-tracking-wide); }

/* The burgundy accent word in display headlines (italic serif fire-color) */
.bb-ds em, .bb-accent {
  font-family: var(--bb-font-serif); font-style: italic; font-weight: 400;
  text-transform: none; color: var(--bb-fire); letter-spacing: 0;
}

/* ---- Stamp label ---- */
.bb-stamp {
  display: inline-block; font-family: var(--bb-font-display); font-weight: 900;
  font-size: 0.75rem; letter-spacing: var(--bb-tracking-xwide);
  text-transform: uppercase; padding: 4px 10px 3px;
  border: 2px solid currentColor; line-height: 1;
}

/* ---- Buttons: square, ink/fire, offset block shadow on hover ---- */
.bb-ds .wp-block-button__link,
.bb-btn {
  display: inline-block;
  font-family: var(--bb-font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: var(--bb-tracking-wide);
  font-size: 0.95rem; line-height: 1;
  padding: 16px 28px; border: 2px solid var(--bb-ink);
  border-radius: var(--bb-radius-0);
  background: var(--bb-fire); color: var(--bb-bone);
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.bb-ds .wp-block-button__link:hover,
.bb-btn:hover {
  background: var(--bb-ink); color: var(--bb-bone);
  box-shadow: var(--bb-shadow-block); transform: translate(-2px, -2px);
}
/* Secondary / outline button */
.bb-btn--ghost, .bb-ds .is-style-outline .wp-block-button__link {
  background: transparent; color: var(--bb-ink);
}
.bb-btn--ghost:hover { background: var(--bb-ink); color: var(--bb-bone); }

/* ---- Surfaces / components ---- */
.bb-card { background: var(--bb-bone); border: var(--bb-hairline); padding: var(--bb-sp-6); }
.bb-rule { height: 0; border: 0; border-top: var(--bb-rule-thick); margin: var(--bb-sp-5) 0; }
.bb-rule.thin { border-top-width: 1px; border-top-color: var(--bb-rule-soft); }

/* ---- Pillar color utilities (bg + readable text) ---- */
.bb-on-fire,       .has-bb-fire-background-color       { background: var(--bb-fire); color: var(--bb-bone); }
.bb-on-forge,      .has-bb-forge-background-color      { background: var(--bb-forge); color: var(--bb-bone); }
.bb-on-foundation, .has-bb-foundation-background-color { background: var(--bb-foundation); color: var(--bb-bone); }
.bb-on-field,      .has-bb-field-background-color       { background: var(--bb-field); color: var(--bb-bone); }
.bb-on-ink,        .has-bb-ink-background-color         { background: var(--bb-ink); color: var(--bb-bone); }
.bb-on-paper,      .has-bb-paper-background-color       { background: var(--bb-paper); color: var(--bb-ink); }

/* Text-color helpers (also match WP's slug-based class names) */
.has-bb-fire-color { color: var(--bb-fire); }
.has-bb-forge-color { color: var(--bb-forge); }
.has-bb-ink-color { color: var(--bb-ink); }
.has-bb-bone-color { color: var(--bb-bone); }

/* ---- Section rhythm ---- */
.bb-section { padding-block: clamp(var(--bb-sp-7), 6vw, var(--bb-sp-9)); }

/* ---- Mobile niceties (Mark's audience skews mobile) ---- */
@media (max-width: 600px) {
  .bb-ds { line-height: 1.5; }
  .bb-ds .wp-block-button__link, .bb-btn { display: block; text-align: center; }
}