/* Source Field Book design tokens: the SHARED design system for the public
   supply suite. Every public page links this one file as /brand.css and reads
   these tokens. Token VALUES here are kept identical to the internal build's
   fieldbook-internal/assets/brand.css; edit the two together.

   DEPLOY: the public suite ships flat at the site root, so the staging step
   places _brand/brand.css -> /brand.css and _brand/fonts/ -> /fonts/. The
   @font-face url("fonts/..woff2") is relative to THIS file, so when brand.css
   sits at /brand.css the fonts resolve to /fonts/.. with no edit.
   Self-hosted fonts only: no external font CDN calls (the external-host grep
   returns nothing).

   FONTS: the 7 woff2 files live beside this file in fonts/ (staged to /fonts/).
   Get them from the IBM Plex repo (OFL license, self-hosting allowed):
     IBMPlexSans-Regular.woff2  IBMPlexSans-Medium.woff2
     IBMPlexSans-SemiBold.woff2 IBMPlexSans-Bold.woff2
     IBMPlexMono-Regular.woff2  IBMPlexMono-Medium.woff2
     IBMPlexMono-SemiBold.woff2
*/

@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  /* ---- font roles ----
     One text family (IBM Plex Sans) plus its mono sibling. The serif is
     retired: --font-serif now points at the sans, so every existing
     var(--prose) usage in index.html flows through with no code edit. */
  --font-display:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif:  var(--font-display);
  --font-mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

  /* ---- type scale: 6 roles, mobile floor to desktop ceiling ----
     One minor-third step, no half-pixels. */
  --fs-display:  clamp(25px, 22.81px + 0.56vw, 30px); /* page / screen title   */
  --fs-title:    clamp(20px, 18.69px + 0.34vw, 23px); /* card + detail heading  */
  --fs-subtitle: clamp(17px, 16.12px + 0.22vw, 19px); /* section heading, lead  */
  --fs-body:     clamp(15px, 14.56px + 0.11vw, 16px); /* running text, values   */
  --fs-label:    clamp(12px, 11.56px + 0.11vw, 13px); /* mono labels, eyebrows  */
  --fs-micro:    clamp(11px, 10.56px + 0.11vw, 12px); /* mono IDs, pills, meta   */

  /* ---- surfaces ---- */
  --brand-bg:    #FBFBFE;
  --brand-card:  #FFFFFF;
  --brand-rule:  #E3E3EA;

  /* ---- ink: five near-blacks collapsed to two ----
     #16161A #1F1F25 #26262C  -> --brand-ink
     #3A3A40 #5A5A66 #6A6A72  -> --brand-muted (6.8:1 on white, AA) */
  --brand-ink:   #16161A;
  --brand-muted: #5A5A66;

  /* ---- single brand accent (terracotta), with text + tint companions ----
     --brand-accent is for marks, fills, top edges (4.66:1 on white).
     --brand-accent-ink is the darker cut for accent-colored TEXT (6.6:1). */
  --brand-accent:      #C84B31;
  --brand-accent-ink:  #A33A22;
  --brand-accent-soft: #F7ECE8;

  /* ---- status pairs: text + soft bg, all AA on white AND on their tint ----
     ok / warn / risk + the steel "info" used for tie-in callouts. */
  --status-green:      #1F7A45; /* ok   5.4:1 white, 4.7:1 tint */
  --status-green-soft: #E7F2EB;
  --status-amber:      #8A5300; /* warn 6.3:1 white, 5.5:1 tint */
  --status-amber-soft: #F6EEDF;
  --status-red:        #C42032; /* risk 5.8:1 white, 5.0:1 tint */
  --status-red-soft:   #FBE9EB;
  --brand-steel:       #1F5F8B; /* info 6.8:1 white, 6.0:1 tint */
  --brand-steel-soft:  #E9F1F8;
}