/* ============================================================
   JBDS — design tokens
   Source: Figma design system
   ============================================================ */

 :root {

     /* ── PRIMITIVE / DIMENSION ─────────────────────────────────────────
     Variable name convention: --d{N} where value = N / 12.5 px
     e.g. --d200 = 16px, --d100 = 8px
  ─────────────────────────────────────────────────────────────────── */
     --d-0: 0px;
     --d-10: 1px;
     --d-25: 2px;
     --d-50: 4px;
     --d-75: 6px;
     --d-100: 8px;
     --d-125: 10px;
     --d-150: 12px;
     --d-175: 14px;
     --d-200: 16px;
     --d-225: 18px;
     --d-250: 20px;
     --d-275: 22px;
     --d-300: 24px;
     --d-350: 28px;
     --d-400: 32px;
     --d-450: 36px;
     --d-500: 40px;
     --d-600: 48px;
     --d-700: 56px;
     --d-800: 64px;
     --d-900: 72px;
     --d-1000: 80px;
     --d-1100: 88px;
     --d-1200: 96px;
     --d-1300: 104px;
     --d-1400: 112px;
     --d-1500: 120px;
     --d-1600: 128px;
     --d-1700: 136px;
     --d-1800: 144px;
     --d-1900: 152px;
     --d-2000: 160px;
     --d-2100: 168px;
     --d-2200: 176px;
     --d-2300: 184px;
     --d-2400: 192px;
     --d-2600: 208px;
     --d-2800: 224px;
     --d-3000: 240px;
     --d-3200: 256px;
     --d-3400: 272px;
     --d-3600: 288px;
     --d-3800: 304px;
     --d-4000: 320px;
     --d-5000: 400px;
     --d-6000: 480px;
     --d-7000: 560px;
     --d-7500: 600px;
     --d-8000: 640px;
     --d-9000: 720px;
     --d-10000: 800px;
     --d-15000: 1200px;
     /* Negative */
     --d010: -1px;
     --d025: -2px;
     --d050: -4px;
     --d075: -6px;
     --d001: -8px;
     --d00125: -10px;
     --d00150: -12px;
     --d00175: -14px;
     --d002: -16px;

     /* ── PRIMITIVE / COLOR ─────────────────────────────────────────────
     Naming: --{Palette}--{Shade}  (double-dash separates palette + shade)
     All opacity variants follow: --{Palette}--{Shade}-{opacity}
  ─────────────────────────────────────────────────────────────────── */




     /* Neutral */
     --neutral--white: #ffffff;
     --neutral--black: #000000;

     --neutral--900: #0B0C18;
     --neutral--800: #242533;
     --neutral--700: #3D3E4D;
     --neutral--600: #585965;
     --neutral--500: #74757B;
     --neutral--400: #8E8F95;
     --neutral--300: #A8A9AD;
     --neutral--200: #C3C3C6;
     --neutral--100: #DDDDDF;
     --neutral--50: #F7F7F8;

     --neutral--alpha--light--5: rgba(255, 255, 255, 0.05);
     --neutral--alpha--light--10: rgba(255, 255, 255, 0.10);
     --neutral--alpha--light--15: rgba(255, 255, 255, 0.15);
     --neutral--alpha--light--20: rgba(255, 255, 255, 0.20);
     --neutral--alpha--light--30: rgba(255, 255, 255, 0.30);
     --neutral--alpha--light--40: rgba(255, 255, 255, 0.40);
     --neutral--alpha--light--50: rgba(255, 255, 255, 0.50);
     --neutral--alpha--light--60: rgba(255, 255, 255, 0.60);
     --neutral--alpha--light--70: rgba(255, 255, 255, 0.70);
     --neutral--alpha--light--80: rgba(255, 255, 255, 0.80);
     --neutral--alpha--light--90: rgba(255, 255, 255, 0.90);

     --neutral--alpha--dark--5: rgba(0, 0, 0, 0.05);
     --neutral--alpha--dark--10: rgba(0, 0, 0, 0.10);
     --neutral--alpha--dark--15: rgba(0, 0, 0, 0.15);
     --neutral--alpha--dark--20: rgba(0, 0, 0, 0.20);
     --neutral--alpha--dark--30: rgba(0, 0, 0, 0.30);
     --neutral--alpha--dark--40: rgba(0, 0, 0, 0.40);
     --neutral--alpha--dark--50: rgba(0, 0, 0, 0.50);
     --neutral--alpha--dark--60: rgba(0, 0, 0, 0.60);
     --neutral--alpha--dark--70: rgba(0, 0, 0, 0.70);
     --neutral--alpha--dark--80: rgba(0, 0, 0, 0.80);
     --neutral--alpha--dark--90: rgba(0, 0, 0, 0.90);

     /* Blue — Primary brand / info */
     --blue--900: #015A7E;
     --blue--800: #027EB1;
     --blue--700: #029EDE;
     --blue--600: #33C4FF;
     --blue--500: #7AD8FF;
     --blue--400: #BDECFF;

     --blue--alpha--90: rgba(51, 196, 255, 0.90);
     --blue--alpha--80: rgba(51, 196, 255, 0.80);
     --blue--alpha--70: rgba(51, 196, 255, 0.70);
     --blue--alpha--60: rgba(51, 196, 255, 0.60);
     --blue--alpha--50: rgba(51, 196, 255, 0.50);
     --blue--alpha--40: rgba(51, 196, 255, 0.40);
     --blue--alpha--30: rgba(51, 196, 255, 0.30);
     --blue--alpha--20: rgba(51, 196, 255, 0.20);
     --blue--alpha--15: rgba(51, 196, 255, 0.15);
     --blue--alpha--10: rgba(51, 196, 255, 0.10);
     --blue--alpha--5: rgba(51, 196, 255, 0.05);

     /* Green — Secondary brand / success */
     --green--900: #515A25;
     --green--800: #6E7B33;
     --green--700: #88983F;
     --green--600: #A3B54C;
     --green--500: #B5C36F;
     --green--400: #CBD59A;

     --green--alpha--90: rgba(163, 181, 76, 0.90);
     --green--alpha--80: rgba(163, 181, 76, 0.80);
     --green--alpha--70: rgba(163, 181, 76, 0.70);
     --green--alpha--60: rgba(163, 181, 76, 0.60);
     --green--alpha--50: rgba(163, 181, 76, 0.50);
     --green--alpha--40: rgba(163, 181, 76, 0.40);
     --green--alpha--30: rgba(163, 181, 76, 0.30);
     --green--alpha--20: rgba(163, 181, 76, 0.20);
     --green--alpha--15: rgba(163, 181, 76, 0.15);
     --green--alpha--10: rgba(163, 181, 76, 0.10);
     --green--alpha--5: rgba(163, 181, 76, 0.05);

     /* yellow — brand accent / caution */
     --yellow--900: #665300;
     --yellow--800: #8A7000;
     --yellow--700: #AD8E00;
     --yellow--600: #E5BB00;
     --yellow--500: #FFDF52;
     --yellow--400: #FFEB94;

     --yellow--alpha--90: rgba(229, 187, 0, 0.90);
     --yellow--alpha--80: rgba(229, 187, 0, 0.80);
     --yellow--alpha--70: rgba(229, 187, 0, 0.70);
     --yellow--alpha--60: rgba(229, 187, 0, 0.60);
     --yellow--alpha--50: rgba(229, 187, 0, 0.50);
     --yellow--alpha--40: rgba(229, 187, 0, 0.40);
     --yellow--alpha--30: rgba(229, 187, 0, 0.30);
     --yellow--alpha--20: rgba(229, 187, 0, 0.20);
     --yellow--alpha--15: rgba(229, 187, 0, 0.15);
     --yellow--alpha--10: rgba(229, 187, 0, 0.10);
     --yellow--alpha--5: rgba(229, 187, 0, 0.05);

     /* orange — brand accent / warning */
     --orange--900: #7F4815;
     --orange--800: #AF641D;
     --orange--700: #D27823;
     --orange--600: #E39A55;
     --orange--500: #EDBE92;
     --orange--400: #F5DBC2;

     --orange--alpha--90: rgba(227, 154, 85, 0.90);
     --orange--alpha--80: rgba(227, 154, 85, 0.80);
     --orange--alpha--70: rgba(227, 154, 85, 0.70);
     --orange--alpha--60: rgba(227, 154, 85, 0.60);
     --orange--alpha--50: rgba(227, 154, 85, 0.50);
     --orange--alpha--40: rgba(227, 154, 85, 0.40);
     --orange--alpha--30: rgba(227, 154, 85, 0.30);
     --orange--alpha--20: rgba(227, 154, 85, 0.20);
     --orange--alpha--15: rgba(227, 154, 85, 0.15);
     --orange--alpha--10: rgba(227, 154, 85, 0.10);
     --orange--alpha--5: rgba(227, 154, 85, 0.05);


     /* pink — brand accent / danger */
     --pink--900: #AD002E;
     --pink--800: #EB003F;
     --pink--700: #FF3369;
     --pink--600: #FF5C87;
     --pink--500: #FF85A5;
     --pink--400: #FFB8CB;

     --pink--alpha--80: rgba(255, 92, 135, 0.80);
     --pink--alpha--90: rgba(255, 92, 135, 0.90);
     --pink--alpha--60: rgba(255, 92, 135, 0.60);
     --pink--alpha--70: rgba(255, 92, 135, 0.70);
     --pink--alpha--50: rgba(255, 92, 135, 0.50);
     --pink--alpha--40: rgba(255, 92, 135, 0.40);
     --pink--alpha--30: rgba(255, 92, 135, 0.30);
     --pink--alpha--20: rgba(255, 92, 135, 0.20);
     --pink--alpha--15: rgba(255, 92, 135, 0.15);
     --pink--alpha--10: rgba(255, 92, 135, 0.10);
     --pink--alpha--5: rgba(255, 92, 135, 0.05);


     /* Transparent base colors 
     * use these for UI elements that are invisible, 
     * but fade into existence. The different based colors 
     * change the "starting" color. 
     */
     --color-none-dark: rgba(0, 0, 0, 0);
     /* fade in from black */
     --color-none-light: rgba(255, 255, 255, 0);
     /* fade in from white */

     /* ── PRIMITIVE / TYPOGRAPHY ────────────────────────────────────────
     * 
     * v 2.0 - updated on 4/17/26
     * 
  ─────────────────────────────────────────────────────────────────── */

     /* Font families */
     --font-sans: 'Instrument Sans',
         system-ui,
         sans-serif;
     --font-serif: 'Libre Baskerville',
         Georgia,
         serif;

     /* Font sizes */
     --size-8: 8px;
     --size-10: 10px;
     --size-12: 12px;
     --size-14: 14px;
     --size-16: 16px;
     --size-18: 18px;
     --size-20: 20px;
     --size-21: 28px;
     --size-22: 22px;
     --size-24: 24px;
     --size-26: 26px;
     --size-28: 28px;
     --size-32: 32px;
     --size-34: 34px;
     --size-36: 36px;
     --size-40: 40px;
     --size-42: 42px;
     --size-44: 44px;
     --size-48: 48px;
     --size-54: 54px;
     --size-56: 56px;
     --size-60: 60px;
     --size-64: 64px;
     --size-72: 72px;
     --size-80: 80px;
     --size-96: 96px;
     --size-112: 112px;
     --size-128: 128px;
     --size-144: 144px;
     --size-160: 160px;

     /* Line heights */
     --lh-12: 12px;
     --lh-14: 14px;
     --lh-16: 16px;
     --lh-18: 18px;
     --lh-20: 20px;
     --lh-22: 22px;
     --lh-24: 24px;
     --lh-26: 26px;
     --lh-28: 28px;
     --lh-30: 30px;
     --lh-32: 32px;
     --lh-34: 34px;
     --lh-36: 36px;
     --lh-38: 38px;
     --lh-40: 40px;
     --lh-42: 42px;
     --lh-44: 44px;
     --lh-46: 46px;
     --lh-48: 48px;
     --lh-50: 50px;
     --lh-52: 52px;
     --lh-54: 54px;
     --lh-56: 56px;
     --lh-58: 58px;
     --lh-60: 60px;
     --lh-62: 62px;
     --lh-64: 64px;
     --lh-66: 66px;
     --lh-68: 68px;
     --lh-70: 70px;
     --lh-72: 72px;
     --lh-74: 74px;
     --lh-76: 76px;
     --lh-78: 78px;
     --lh-80: 80px;
     --lh-82: 82px;
     --lh-84: 84px;
     --lh-86: 86px;
     --lh-88: 88px;
     --lh-90: 90px;
     --lh-92: 92px;
     --lh-94: 94px;
     --lh-96: 96px;
     --lh-98: 98px;
     --lh-100: 100px;
     --lh-102: 102px;
     --lh-104: 104px;

     /* font weight */
     --fw-400: 400;
     --fw-500: 500;
     --fw-600: 600;
     --fw-700: 700;

     /* Letter spacing (converted from raw px values to em at base 16px) */
     --ls-tight: -1px;
     --ls-none: 0px;
     --ls-normal: 0.3px;
     --ls-wide: 1px;


 }