/* =========================================================================
   Berlin Bytes — full stylesheet
   Imports the generated design tokens, self-hosts the brand fonts, and
   ships the semantic .bb-* helper classes.

   Import this file for full styling. For tokens only, import dist/tokens.css.
   Token values are generated from tokens/tokens.json — never edit them here.
   ========================================================================= */

@import "../dist/tokens.css";

/* ----------------------------------------------------------
   FONTS — self-hosted brand TTFs (Open Font License).
   - Space Grotesk: variable, display & headlines
   - Inter: variable, body & UI
   - Space Mono: 700 only, labels & numerics
   ---------------------------------------------------------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("../fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   Semantic / element-level type styles (use these directly in components)
   ========================================================================= */

.bb-display-xl,
.bb-display-lg,
.bb-display-md,
.bb-display-sm,
.bb-h1, .bb-h2, .bb-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--fg);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-display);
  text-wrap: balance;
}

.bb-display-xl { font-size: var(--fs-display-xl); font-weight: 500; }
.bb-display-lg { font-size: var(--fs-display-lg); font-weight: 500; }
.bb-display-md { font-size: var(--fs-display-md); letter-spacing: 0; }
.bb-display-sm { font-size: var(--fs-display-sm); letter-spacing: 0; }
.bb-h1         { font-size: var(--fs-h1); letter-spacing: 0; line-height: var(--lh-tight); }
.bb-h2         { font-size: var(--fs-h2); letter-spacing: 0; line-height: var(--lh-snug); }
.bb-h3         { font-size: var(--fs-h3); font-weight: 500; letter-spacing: 0; line-height: var(--lh-snug); }

.bb-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}

.bb-body-xl, .bb-body-lg, .bb-body, .bb-body-sm, .bb-caption {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--fg);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-soft);
  text-wrap: pretty;
}
.bb-body-xl { font-size: var(--fs-body-xl); }
.bb-body-lg { font-size: var(--fs-body-lg); }
.bb-body    { font-size: var(--fs-body); }
.bb-body-sm { font-size: var(--fs-body-sm); }
.bb-caption { font-size: var(--fs-caption); color: var(--fg-muted); }

.bb-bold     { font-weight: 500; } /* Inter Medium — preferred over <b> */

.bb-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  letter-spacing: 0;
}

/* Brand "pill" — used as a chip/tag */
.bb-pill {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  background: var(--bb-white);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--fg);
  border: 1px solid var(--border);
}

/* The signature "leaf" silhouette — convenience classes */
.bb-leaf-lg { border-radius: var(--radius-leaf-lg); }
.bb-leaf-md { border-radius: var(--radius-leaf-md); }
.bb-leaf-sm { border-radius: var(--radius-leaf-sm); }