/* ============================================================
   BRAND TOKENS  —  THE ONE FILE TO EDIT WHEN YOU REBRAND
   Change the palette, fonts, and shape here. Everything
   downstream reads from these variables.
   ============================================================ */

/* Self-hosted fonts — no third-party requests (latin subset covers all content incl. em-dashes/quotes). */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/bricolage-grotesque.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/inter.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2')}

:root{
  /* ---- COLOR (swap these to rebrand the whole site) ---- */
  --bg:        #F6F8F8;   /* page background (soft cool off-white) */
  --bg-elev:   #FFFFFF;   /* raised panels                        */
  --line:      #DCE3E3;   /* borders                              */
  --line-soft: #E9EEEE;   /* hairline dividers                    */
  --text:      #18222A;   /* primary text (deep slate)            */
  --text-mid:  #586671;   /* secondary text                       */
  --text-dim:  #647079;   /* muted / labels (AA 4.5:1+ on bg)     */
  --signal:    #1C2329;   /* PRIMARY ACCENT (ink — monochrome)    */
  --signal-glow: rgba(28,35,41,.06);
  --warn:      #8C949B;   /* threshold marker (neutral grey)      */
  --fall:      #AEB6BC;   /* the "decline" line (light grey)      */

  /* ---- TYPE (swap families here + the <link> in each .html head) ---- */
  --font-display: 'Bricolage Grotesque', sans-serif;  /* headings */
  --font-body:    'Inter', system-ui, sans-serif;     /* body     */
  --font-mono:    'IBM Plex Mono', monospace;          /* labels   */

  /* ---- SHAPE / LAYOUT ---- */
  --radius: 14px;
  --radius-lg: 18px;
  --maxw: 1280px;
}