/* ============================================================
   STANDARD BUREAU — Colors & Type
   Warm institutional identity, rendered on white.
   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 as fallbacks:
     · 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.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- Brand color tokens (from the approved mark) ---- */
  --sb-paper:       #EEE5D2;  /* warm paper — now a secondary "filed" surface */
  --sb-paper-soft:  #F7F0E2;
  --sb-paper-deep:  #DED3BD;
  --sb-ink:         #323129;  /* near-black warm ink — primary text & rules */
  --sb-ink-soft:    #4A493F;
  --sb-walnut:      #6A543E;  /* brown — depth, secondary headings */
  --sb-copper:      #AF5E35;  /* the warm accent */
  --sb-tobacco:     #A98B54;  /* muted ochre — support */
  --sb-archive:     #C3B8A1;  /* greyed linen — borders, quiet fills */
  --sb-gold:        #C8992E;  /* mustard gold from the original monogram square */
  --sb-blue:        #336699;  /* bureau blue — from the updated mark (the S + square) */
  --sb-blue-deep:   #294F77;  /* pressed / hover state for blue */

  --sb-line:        #C8B99C;  /* hairline rule on paper */
  --sb-muted:       #746852;  /* secondary metadata text */
  --sb-white:       #FFFFFF;

  /* ---- Semantic surfaces (white-first) ---- */
  --sb-surface:        #FFFFFF;  /* dominant background */
  --sb-surface-raised: #FBF8F2;  /* faint warm off-white, cards on white */
  --sb-surface-filed:  #F4EEE0;  /* paper card — "filed", not floated */
  --sb-surface-ink:    #323129;  /* inverted / footer / dark sections */

  /* ---- Semantic text ---- */
  --sb-text:           #323129;
  --sb-text-secondary: #6A6457;
  --sb-text-muted:     #8C8472;
  --sb-text-accent:    #AF5E35;  /* copper — kickers, highlights, ghost CTAs */
  --sb-text-link:      #336699;  /* bureau blue — INLINE TEXT LINKS ONLY (rare) */
  --sb-text-link-hover:#294F77;  /* blue-deep — link hover */
  --sb-text-on-ink:    #F7F0E2;  /* text on dark ink surfaces */

  /* ---- Borders & rules ---- */
  --sb-border:        #E6DECF;  /* soft hairline on white */
  --sb-border-mid:    #C8B99C;  /* visible rule */
  --sb-border-strong: #323129;  /* ink rule — buttons, dividers, frames */

  /* ---- Semantic state (notices stay square + filed, never floated) ---- */
  --sb-error:        #8E3320;  /* oxidized red ink — error text & rules (AA on white) */
  --sb-error-bg:     #FBECEA;  /* faint error fill */
  --sb-error-border: #D9B7AE;  /* error hairline */
  --sb-warn:         #7A5212;  /* tobacco-deep — warning text (AA on white) */
  --sb-warn-bg:      #FBF3E2;  /* faint warning fill */
  --sb-warn-border:  #E2CE9C;  /* warning hairline */
  --sb-focus:        #AF5E35;  /* copper — focus ring, the one interactive accent */

  /* ---- 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: 2px;
  --sb-radius-2: 4px;
  --sb-radius-pill: 0px;  /* there are no pills in this system */

  /* ---- 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:  Avenir, "Avenir Next", "Hanken Grotesk", 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.05em;  /* -3% to -6% per brand */
  --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-serif);
  font-weight: 500;
  color: var(--sb-text);
  line-height: 0.98;
  letter-spacing: var(--sb-tracking-display);
  margin: 0;
  text-wrap: balance;
}
.sb-h1 { font-size: clamp(56px, 9vw, 132px); letter-spacing: -0.055em; line-height: 0.92; }
.sb-h2 { font-size: clamp(40px, 6vw, 76px);  letter-spacing: -0.045em; }
.sb-h3 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.03em; }
.sb-h4 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; }

.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-copper); }
.sb-num    { color: var(--sb-copper); }

/* 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;
}