/* ============================================================
   IDEAL BODY — Design System
   Global entry point. Consumers link THIS file only.
   Keep this file as @import lines (+ base reset) only.
   ============================================================ */
/* Ideal Body — Webfonts
   ------------------------------------------------------------------
   The IDEAL BODY wordmark uses a proprietary ultra-bold condensed
   gothic. No license file was provided, so we substitute the nearest
   free matches from Google Fonts:
     • Anton            → wordmark / display (heavy condensed gothic)
     • Barlow Condensed → headings, labels, UI emphasis (squared,
                          transport-inspired — fits a truck-body brand)
     • Barlow           → body copy & UI text
   Replace with the licensed brand faces when available.
   ------------------------------------------------------------------ */
/* vietnamese */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/e761dfdd-8729-49b2-afb0-d8afaa932632.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/3a37f276-cd81-4bb5-abd3-d80435f9ede3.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/e475820b-10e2-43bb-b7b6-a5243a5a11e4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/955918ae-e2e6-4675-8afb-bd028e09acc5.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/392a2fcf-f3b4-49cf-945a-5e2485b76ab5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/56181392-8868-43e1-b1c6-c3ad29daaa65.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/5fb21cf7-7270-43ba-8ac7-56f1cef96b9f.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/eff6a325-de20-44d9-8266-f216eb783b58.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/2945cc50-8df4-4424-9faf-edb5a22e1ef2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/f4868a95-b0fa-4d32-8877-e532e8ab91af.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/5c257684-7196-4f61-86b7-a872f0c6c7e1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/3f3f57a7-db31-44c0-af73-b0f115aaeaa8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/3f0a1d8d-fa18-4a91-9881-b86800ee7e8a.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/21a68718-6ebc-4148-bcd5-374865e5f26a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/edc1c1b0-8bf0-419a-8f0c-3770d9aedba3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/07fb3694-673d-4304-b06e-7b6f403951bc.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/8b8e33b4-e259-4cee-a9d4-da58da3adaf1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/31bbdc1d-c367-42c0-aa1b-94ed90dfc839.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/bb52bdf5-fac5-40ce-afd6-b88812965b64.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/c5b337cc-6ffe-4c73-89c4-1fbe085e63c1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/7e566bad-42e2-474f-85e1-480f28df6f26.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/4b5bbb12-9bec-4ef4-b5ba-afc1f723d0ca.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/dfd483ce-f0af-4b77-aad2-d874ebc99caf.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/cc31b98b-e858-47df-ac05-5bc1483cc82c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/6194a228-c56a-4da5-9ba9-1ecd5ae18dca.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/204820df-ad08-45d0-bc29-229a0b4df1f4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/f6e14e60-aa55-47d0-af0e-38ea7949dc89.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/f12160d6-df38-4cd1-b865-b5d805f073a7.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/19355a5a-e331-4bb0-ae8c-f79eb66b9d4b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/def2fcd5-5344-426a-ae6c-8f1219de15bb.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/75fca93e-bfad-406e-85a5-7f6c3f85d211.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/a63a043c-8649-4c90-813e-9e8c2082df87.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/aeb867a9-52c4-456e-aef0-8c49b6c25637.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Ideal Body — Color tokens
   Sampled from the master logo + 4-colour cube mark.
   Palette: industrial RED, deep BLACK, brushed CHROME/SILVER, white. */
:root {
  /* ---- Brand red (the cube) ---------------------------------- */
  --ib-red-50:  #fdeceb;
  --ib-red-100: #f9c9c6;
  --ib-red-300: #f25f5a;
  --ib-red-500: #e11414;  /* PRIMARY — Ideal Body red */
  --ib-red-600: #c20f0f;
  --ib-red-700: #9a0000;  /* deep cube shadow red */
  --ib-red-900: #5e0303;

  /* Red bevel gradient (cube faces) */
  --ib-red-bright: #fa2a2a;
  --ib-red-deep:   #8f0202;

  /* ---- Ink / black ------------------------------------------- */
  --ib-black:   #0b0b0c;  /* wordmark black */
  --ib-ink-900: #141416;
  --ib-ink-800: #232327;
  --ib-ink-700: #34343a;
  --ib-ink-500: #5b5b63;
  --ib-ink-400: #8a8a93;

  /* ---- Chrome / silver (the banner) -------------------------- */
  --ib-chrome-hi:  #f4f4f5;
  --ib-chrome-100: #e6e6e7;
  --ib-chrome-200: #d4d4d6;
  --ib-chrome-300: #b6b6b9;
  --ib-chrome-400: #9a9aa0;
  --ib-chrome-edge:#7c7c82;

  /* ---- Neutrals ---------------------------------------------- */
  --ib-white:   #ffffff;
  --ib-paper:   #f5f6f7;  /* page background */
  --ib-mist:    #eceef0;
  --ib-line:    #d8dadd;
  --ib-line-soft: #e8eaec;

  /* ---- Semantic (status) ------------------------------------- */
  --ib-success: #1f8a4c;
  --ib-warning: #e8920c;
  --ib-danger:  #c20f0f;
  --ib-info:    #2766b8;

  /* ================= Semantic aliases ====================== */
  --color-primary:        var(--ib-red-500);
  --color-primary-hover:  var(--ib-red-600);
  --color-primary-press:  var(--ib-red-700);
  --color-on-primary:     var(--ib-white);

  --surface-page:    var(--ib-paper);
  --surface-card:    var(--ib-white);
  --surface-raised:  var(--ib-white);
  --surface-inverse: var(--ib-ink-900);
  --surface-steel:   var(--ib-chrome-200);

  --text-strong:  var(--ib-black);
  --text-body:    var(--ib-ink-800);
  --text-muted:   var(--ib-ink-500);
  --text-faint:   var(--ib-ink-400);
  --text-on-dark: var(--ib-white);
  --text-on-dark-muted: var(--ib-chrome-300);

  --border-default: var(--ib-line);
  --border-soft:    var(--ib-line-soft);
  --border-strong:  var(--ib-ink-800);

  --focus-ring: var(--ib-red-500);

  /* Signature gradients */
  --grad-chrome: linear-gradient(180deg, var(--ib-chrome-hi) 0%, var(--ib-chrome-200) 45%, var(--ib-chrome-400) 100%);
  --grad-chrome-h: linear-gradient(90deg, var(--ib-chrome-300) 0%, var(--ib-chrome-hi) 18%, var(--ib-chrome-200) 50%, var(--ib-chrome-hi) 82%, var(--ib-chrome-300) 100%);
  --grad-red-bevel: linear-gradient(135deg, var(--ib-red-bright) 0%, var(--ib-red-500) 42%, var(--ib-red-deep) 100%);
  --grad-ink: linear-gradient(180deg, var(--ib-ink-800) 0%, var(--ib-black) 100%);
}

/* Ideal Body — Typography tokens
   Display: Anton (wordmark feel). Headings/labels: Barlow Condensed.
   Body/UI: Barlow. Mono for specs/part numbers. */
:root {
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Type scale (rem, 16px base) */
  --fs-2xs: 0.6875rem; /* 11 */
  --fs-xs:  0.75rem;   /* 12 */
  --fs-sm:  0.875rem;  /* 14 */
  --fs-md:  1rem;      /* 16 */
  --fs-lg:  1.125rem;  /* 18 */
  --fs-xl:  1.375rem;  /* 22 */
  --fs-2xl: 1.75rem;   /* 28 */
  --fs-3xl: 2.25rem;   /* 36 */
  --fs-4xl: 3rem;      /* 48 */
  --fs-5xl: 4rem;      /* 64 */
  --fs-6xl: 5.5rem;    /* 88 */

  /* Line heights */
  --lh-tight:   1.02; /* @kind other */
  --lh-snug:    1.15; /* @kind other */
  --lh-normal:  1.45; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* Weights */
  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:    700; /* @kind other */
  --fw-black:   800; /* @kind other */

  /* Letter spacing — tight display + wide labels */
  --ls-display: -0.01em; /* @kind other */
  --ls-tight:  -0.02em; /* @kind other */
  --ls-normal:  0; /* @kind other */
  --ls-label:   0.12em; /* @kind other */
  --ls-wide:    0.06em; /* @kind other */

  /* Semantic text roles */
  --role-display: var(--fw-regular) var(--fs-6xl)/var(--lh-tight) var(--font-display);
  --role-h1: var(--fw-bold) var(--fs-4xl)/var(--lh-snug) var(--font-heading);
  --role-h2: var(--fw-bold) var(--fs-3xl)/var(--lh-snug) var(--font-heading);
  --role-h3: var(--fw-semibold) var(--fs-2xl)/var(--lh-snug) var(--font-heading);
  --role-kicker: var(--fw-semibold) var(--fs-xs)/1.2 var(--font-heading);
  --role-body: var(--fw-regular) var(--fs-md)/var(--lh-normal) var(--font-body);
  --role-small: var(--fw-regular) var(--fs-sm)/var(--lh-normal) var(--font-body);
}

/* Ideal Body — Spacing, radii, sizing */
:root {
  --sp-0:  0; /* @kind spacing */
  --sp-1:  0.25rem;  /* 4 */
  --sp-2:  0.5rem;   /* 8 */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.5rem;   /* 24 */
  --sp-6:  2rem;     /* 32 */
  --sp-7:  3rem;     /* 48 */
  --sp-8:  4rem;     /* 64 */
  --sp-9:  6rem;     /* 96 */

  /* Radii — industrial brand: mostly squared, small rounding only */
  --r-none: 0; /* @kind radius */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-pill: 999px;

  /* Control sizing */
  --control-h-sm: 34px;
  --control-h-md: 44px;   /* default — meets 44px hit target */
  --control-h-lg: 54px;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1360px;
  --gutter: 24px;

  /* Borders */
  --bw-hair: 1px;
  --bw-thick: 2px;
  --bw-heavy: 3px;
}

/* Ideal Body — Effects: shadows, motion, signature treatments */
:root {
  /* Elevation — crisp, hardware-like, low-blur */
  --shadow-sm:  0 1px 2px rgba(11,11,12,.10);
  --shadow-md:  0 2px 6px rgba(11,11,12,.12), 0 1px 2px rgba(11,11,12,.10);
  --shadow-lg:  0 10px 24px rgba(11,11,12,.16), 0 2px 6px rgba(11,11,12,.10);
  --shadow-xl:  0 22px 48px rgba(11,11,12,.22);
  --shadow-red: 0 6px 18px rgba(225,20,20,.32);

  /* Inset / bevel — chrome banner & metal edges */
  --bevel-chrome: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 3px rgba(0,0,0,.22); /* @kind shadow */
  --bevel-inset:  inset 0 1px 2px rgba(0,0,0,.18);

  /* Top accent rule used on cards/headers */
  --accent-rule: var(--ib-red-500);

  /* Motion — mechanical, decisive; little bounce */
  --ease-standard: cubic-bezier(.2,.0,.2,1); /* @kind other */
  --ease-out: cubic-bezier(.16,1,.3,1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-med:  200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* Focus ring */
  --ring: 0 0 0 3px rgba(225,20,20,.35);
}


/* --- minimal base reset (safe for consumers) --- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--role-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; }
a { color: var(--ib-red-600); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--ib-red-500); color: #fff; }