/* ============================================================
   STANDARD BUREAU — Colors & Type
   Mid-century civic identity, pulled from the current mark.
   Import this file, then use the CSS variables below.
   ------------------------------------------------------------
   FONT NOTE: The brand specifies licensed system fonts
   (Didot / Bodoni 72 for display, Avenir for body, SF Mono for
   labels). Those are listed FIRST so Mac users get the real
   thing. Google Fonts substitutes load from each document head:
     · Bodoni Moda     → Didot / Bodoni 72   (Didone display)
     · Hanken Grotesk    → Avenir / Avenir Next (geometric body)
     · Space Mono        → SF Mono              (typed metadata)
   Substitutions are flagged in README.md.
   ============================================================ */

:root {
  /* ---- Brand color tokens (sampled and tuned from the supplied mark) ---- */
  --sb-paper:       #F1E5C9;
  --sb-paper-soft:  #F8F0DB;
  --sb-paper-deep:  #D8C9A7;
  --sb-ink:         #272722;
  --sb-ink-soft:    #41413A;
  --sb-walnut:      #665B46;
  --sb-teal:        #356E70;
  --sb-teal-deep:   #28595B;
  --sb-teal-soft:   #97B0AA;
  --sb-orange:      #CF5827;
  --sb-orange-field:#E57B40;
  --sb-orange-deep: #A9421A;
  --sb-copper:      var(--sb-orange);
  --sb-accent-ink:  var(--sb-orange-deep);
  --sb-copper-on-ink: #F08A57;
  --sb-tobacco:     #A98B54;
  --sb-archive:     #C4B89D;
  --sb-gold:        #D59B32;
  --sb-blue:        var(--sb-teal);
  --sb-blue-deep:   var(--sb-teal-deep);

  --sb-line:        #C9B991;
  --sb-muted:       #6E654F;
  --sb-white:       #FFFDF7;

  /* ---- Semantic surfaces (white-first) ---- */
  --sb-surface:        var(--sb-paper-soft);
  --sb-surface-raised: #FFF9E9;
  --sb-surface-filed:  var(--sb-paper);
  --sb-surface-ink:    var(--sb-ink);

  /* ---- Semantic text ---- */
  --sb-text:           var(--sb-ink);
  --sb-text-secondary: #575447;
  --sb-text-muted:     #6E654F;
  --sb-text-accent:    var(--sb-orange-deep);
  --sb-text-link:      var(--sb-teal-deep);
  --sb-text-link-hover:#183F40;
  --sb-text-on-ink:    var(--sb-paper-soft);

  /* ---- Borders & rules ---- */
  --sb-border:        #D9CCAE;
  --sb-border-mid:    #B9A982;
  --sb-border-strong: var(--sb-ink);

  /* ---- Elevation (low-gloss only) ---- */
  --sb-shadow-sm: 0 1px 2px rgba(50, 49, 41, .06);
  --sb-shadow-md: 0 12px 30px rgba(50, 49, 41, .10);
  --sb-shadow-lg: 0 28px 70px rgba(50, 49, 41, .14);

  /* ---- Radius (square or lightly softened rectangles) ---- */
  --sb-radius-0: 0px;
  --sb-radius-1: 8px;
  --sb-radius-2: 18px;
  --sb-radius-pill: 999px;

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

  /* ---- Font families ---- */
  --sb-serif: Didot, "Bodoni 72", "Bodoni Moda", Bodoni, "Iowan Old Style", Georgia, serif;
  --sb-body:  "Hanken Grotesk", Avenir, "Avenir Next", Futura, Helvetica, Arial, sans-serif;
  --sb-display: "Hanken Grotesk", Avenir, "Avenir Next", Futura, Helvetica, Arial, sans-serif;
  --sb-mono:  "SF Mono", "Space Mono", Menlo, Monaco, Consolas, monospace;

  /* ---- Type scale (display = serif, tight tracking) ---- */
  --sb-display-1: 700;   /* weight token: keep serif light→regular */
  --sb-tracking-display: -0.055em;
  --sb-tracking-label:    0.14em;  /* mono labels, uppercase */
}

/* ============================================================
   SEMANTIC TYPE — apply these classes or copy the rules.
   Display type is serif and tightly tracked. Body is plain
   sans. Mono is reserved for labels, codes, file numbers,
   and operational metadata (uppercase, tracked).
   ============================================================ */

.sb-h1, .sb-h2, .sb-h3, .sb-h4 {
  font-family: var(--sb-display);
  font-weight: 700;
  color: var(--sb-text);
  line-height: 0.98;
  letter-spacing: var(--sb-tracking-display);
  margin: 0;
  text-wrap: balance;
}
.sb-h1 { font-size: clamp(58px, 9vw, 136px); letter-spacing: -0.07em; line-height: 0.84; }
.sb-h2 { font-size: clamp(40px, 6vw, 76px);  letter-spacing: -0.055em; line-height: .92; }
.sb-h3 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.045em; }
.sb-h4 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.03em; }

.sb-lede {
  font-family: var(--sb-body);
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.45;
  color: var(--sb-text-secondary);
  font-weight: 400;
}

.sb-body {
  font-family: var(--sb-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--sb-text);
  font-weight: 400;
}
.sb-body-sm {
  font-family: var(--sb-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--sb-text-secondary);
}

/* Mono label — typed office metadata, file numbers, kickers */
.sb-label, .sb-kicker, .sb-num {
  font-family: var(--sb-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--sb-tracking-label);
  color: var(--sb-muted);
  font-weight: 400;
}
.sb-kicker { color: var(--sb-accent-ink); }
.sb-num    { color: var(--sb-accent-ink); }

/* Serif display utility (for one-off oversized marks) */
.sb-display {
  font-family: var(--sb-serif);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.86;
  color: var(--sb-text);
}

/* ============================================================
   INLINE TEXT LINKS — the ONLY place Bureau Blue appears in
   running UI. Use inside body copy / prose. Buttons, kickers,
   and CTAs stay copper or ink — never blue.
   ============================================================ */
.sb-body a:not(.sb-btn),
.sb-lede a:not(.sb-btn),
a.sb-link {
  color: var(--sb-text-link);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(51, 102, 153, .4);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.sb-body a:not(.sb-btn):hover,
.sb-lede a:not(.sb-btn):hover,
a.sb-link:hover {
  color: var(--sb-text-link-hover);
  text-decoration-color: currentColor;
}