/* =====================================================================
   BACKERPLATE DESIGN TOKENS  v1.0  (2026-10-26)
   Single source for web, docs, decks, one-pagers and social.
   Direction: "Steel glass" — light, engineered, quiet. Spectacle lives
   only in the hero 3D; everything else stays calm.
   Palette is the locked Steel set (Iron / Steel Blue / Titanium).
   Contrast notes are measured against --bp-paper (#F5F7F9).
   ===================================================================== */

/* ---------- Fonts (self-hosted, OFL licensed) ---------- */
@font-face{font-family:"Archivo";font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;src:url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:italic;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

:root{
  /* ---- Core brand (locked 2026-08-30) ---- */
  --bp-iron:        #202A34;  /* primary text, dark panels, backer plate   13.6:1 */
  --bp-steel:       #55758D;  /* brand accent, large text & marks only      4.5:1 */
  --bp-titanium:    #AEB8C2;  /* reversed mark, dividers on dark, glass rim        */

  /* ---- Extended neutrals (derived, biased toward steel) ---- */
  --bp-paper:       #F5F7F9;  /* page background                                   */
  --bp-white:       #FFFFFF;  /* cards, raised surfaces                             */
  --bp-mist:        #E9EEF2;  /* subtle fills, table stripes                        */
  --bp-line:        #DCE3E9;  /* hairlines                                          */
  --bp-line-strong: #C3CDD6;  /* borders that must read                             */
  --bp-slate:       #56636F;  /* secondary body text                          5.7:1 */
  --bp-steel-ink:   #3E5A6F;  /* steel for SMALL text & links                 6.8:1 */
  --bp-iron-2:      #2A3743;  /* raised surface on dark                             */

  /* ---- Glass (3D + rare HTML glass) ---- */
  --bp-glass-tint:  #CFE0EC;
  --bp-glass-glow:  #8FB4CF;
  --bp-glass-core:  #6E93AE;

  /* ---- Semantic (UI state only, never decoration) ---- */
  --bp-ok:          #277A4C;
  --bp-warn:        #96590A;
  --bp-risk:        #B3412F;

  /* ---- Type families ---- */
  --bp-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --bp-font-body:    "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bp-font-mono:    "IBM Plex Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;

  /* ---- Type scale (web, fluid) ---- */
  --bp-text-hero:   clamp(2.75rem, 1.5rem + 3.8vw, 4.75rem); /* 44 → 76px, lh 0.98, stretch 84% */
  --bp-text-h1:     clamp(2.25rem, 1.5rem + 3.2vw, 4rem);    /* 36 → 64px, lh 1.04 */
  --bp-text-h2:     clamp(1.75rem, 1.3rem + 2vw, 3rem);      /* 28 → 48px, lh 1.08 */
  --bp-text-h3:     clamp(1.25rem, 1.1rem + .5vw, 1.5rem);   /* 20 → 24px, lh 1.25 */
  --bp-text-lede:   clamp(1.0625rem, 1rem + .35vw, 1.25rem); /* 17 → 20px, lh 1.6  */
  --bp-text-body:   1.0625rem;                               /* 17px,      lh 1.65 */
  --bp-text-small:  .9375rem;                                /* 15px                */
  --bp-text-label:  .75rem;                                  /* 12px mono, caps, .14em */

  --bp-track-display: -.025em;
  --bp-stretch-display: 88%;   /* Archivo width axis: semi-condensed for headlines */
  --bp-track-label:   .14em;

  /* ---- Spacing (4-based) ---- */
  --bp-s1: 4px;  --bp-s2: 8px;  --bp-s3: 12px; --bp-s4: 16px;
  --bp-s5: 24px; --bp-s6: 32px; --bp-s7: 48px; --bp-s8: 64px;
  --bp-s9: 96px; --bp-s10: 128px;
  --bp-section: clamp(72px, 6vw + 40px, 144px);
  --bp-wrap: 1280px;
  --bp-gutter: clamp(20px, 4vw, 56px);

  /* ---- Shape ---- */
  --bp-radius-sm: 8px;    /* inputs, chips             */
  --bp-radius:    16px;   /* cards                     */
  --bp-radius-lg: 24px;   /* feature panels, CTA band  */
  --bp-radius-pill: 999px;/* buttons                   */

  /* ---- Elevation (soft, steel-tinted) ---- */
  --bp-shadow-1: 0 1px 2px rgba(32,42,52,.05), 0 2px 8px rgba(32,42,52,.04);
  --bp-shadow-2: 0 2px 4px rgba(32,42,52,.04), 0 12px 32px rgba(32,42,52,.08);

  /* ---- Motion ---- */
  --bp-ease:      cubic-bezier(.2,.7,.2,1);
  --bp-dur-fast:  200ms;   /* hover, press        */
  --bp-dur:       600ms;   /* section entrance    */
}