/* ============================================================
   TRAKKABLES DESIGN SYSTEM — global entry point
   Consumers link THIS file. It only @imports token layers.
   ============================================================ */

/* ============================================================
   TRAKKABLES — WEBFONTS
   NOTE (font substitution): The Trakkables wordmark uses a
   proprietary italic condensed display face that is NOT
   distributed as a webfont — it lives only in the logo lockups
   (kept as image assets in /assets/logos). For the digital UI
   system we standardise on the Google Fonts below, chosen to
   echo the logo's bold, technical, sporty character:
     • Saira / Saira Semi Condensed — display & headings
       (tall, condensed, technical — closest free match to the
        angular wordmark)
     • Figtree — body & UI text (friendly geometric sans)
     • JetBrains Mono — tracking codes, IDs, monospace data
   Loaded from Google Fonts CDN. If you have the licensed
   display face, drop the binaries here and add @font-face.
   ============================================================ */

/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/figtree-400-italic-1.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: 'Figtree';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/figtree-400-italic-2.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;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/figtree-400-normal-1.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: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/figtree-400-normal-2.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;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/figtree-400-normal-1.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: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/figtree-400-normal-2.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;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/figtree-400-normal-1.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: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/figtree-400-normal-2.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;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/figtree-400-normal-1.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: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/figtree-400-normal-2.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-3.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-4.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-5.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-6.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-3.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-4.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-5.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-6.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-3.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-4.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-5.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-normal-6.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: 'Saira';
  font-style: italic;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-600-italic-1.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: 'Saira';
  font-style: italic;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-600-italic-2.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: 'Saira';
  font-style: italic;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-600-italic-3.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: 'Saira';
  font-style: italic;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-600-italic-1.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: 'Saira';
  font-style: italic;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-600-italic-2.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: 'Saira';
  font-style: italic;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-600-italic-3.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: 'Saira';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-400-normal-1.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: 'Saira';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-400-normal-2.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: 'Saira';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-400-normal-3.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: 'Saira';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-400-normal-1.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: 'Saira';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-400-normal-2.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: 'Saira';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-400-normal-3.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: 'Saira';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-400-normal-1.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: 'Saira';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-400-normal-2.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: 'Saira';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-400-normal-3.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: 'Saira';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-400-normal-1.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: 'Saira';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-400-normal-2.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: 'Saira';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-400-normal-3.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: 'Saira';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-400-normal-1.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: 'Saira';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-400-normal-2.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: 'Saira';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/saira-400-normal-3.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: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/saira-semi-condensed-500-normal-1.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: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/saira-semi-condensed-500-normal-2.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: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/saira-semi-condensed-500-normal-3.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: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/saira-semi-condensed-600-normal-1.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: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/saira-semi-condensed-600-normal-2.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: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/saira-semi-condensed-600-normal-3.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: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/saira-semi-condensed-700-normal-1.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: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/saira-semi-condensed-700-normal-2.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: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/saira-semi-condensed-700-normal-3.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: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/saira-semi-condensed-800-normal-1.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: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/saira-semi-condensed-800-normal-2.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: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/saira-semi-condensed-800-normal-3.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;
}


/* ============================================================
   TRAKKABLES — COLOR TOKENS
   Sampled directly from the official product logos.
   Each product line owns a signature accent; the master
   brand is Trakkables Teal + ink black.
   ============================================================ */

:root {
  /* — Master brand ————————————————————————————— */
  --tk-teal: #0D9488;         /* Trakkables Teal — primary master accent */
  --tk-teal-600: #0B7E74;     /* pressed / hover-dark */
  --tk-teal-300: #6FC6BC;     /* tints */
  --tk-teal-100: #D7F0ED;     /* surface tint */

  --tk-ink: #161616;          /* near-black wordmark ink */
  --tk-ink-700: #2C2C2C;

  /* — Product accents ——————————————————————————— */
  --tk-proofing: #7A4F9E;     /* Flow — Flow Violet */
  --tk-proofing-600: #633F84;
  --tk-proofing-100: #ECE4F3;

  --tk-travel: #0090C4;       /* Travel — sky cyan */
  --tk-travel-600: #0077A3;
  --tk-travel-100: #DBF0F8;

  --tk-tab: #C8982F;          /* Tab — gold / bronze */
  --tk-tab-600: #A87C20;
  --tk-tab-100: #F6ECD3;

  --tk-golf: #34BE4A;         /* Golf — kelly green */
  --tk-golf-600: #279A39;
  --tk-golf-100: #DEF6E2;

  --tk-indigo: var(--tk-teal);       /* alias — the hero teal IS the master accent now */
  --tk-indigo-600: var(--tk-teal-600);
  --tk-indigo-100: var(--tk-teal-100);

  --tk-lostfound: var(--tk-teal);  /* Lost & Found rides the master teal */

  /* — Neutral ramp ————————————————————————————— */
  --tk-white: #FFFFFF;
  --tk-gray-50:  #F7F8F9;
  --tk-gray-100: #EEF0F2;
  --tk-gray-200: #E1E4E8;
  --tk-gray-300: #CDD2D8;
  --tk-gray-400: #A6AEB7;
  --tk-gray-500: #79828D;
  --tk-gray-600: #586069;
  --tk-gray-700: #3D434B;
  --tk-gray-800: #262A30;
  --tk-gray-900: #15181C;

  /* — Semantic status ————————————————————————— */
  --tk-success: #2BA84A;
  --tk-success-100: #DFF3E4;
  --tk-warning: #E0A22B;
  --tk-warning-100: #FBEFD3;
  --tk-danger:  #D6282E;
  --tk-danger-100: #FBE3E4;
  --tk-info:    #0090C4;
  --tk-info-100: #DBF0F8;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product UI
     ============================================================ */
  --color-brand:            var(--tk-teal);
  --color-brand-hover:      var(--tk-teal-600);
  --color-accent:           var(--tk-teal);     /* overridden per product scope below */

  --text-strong:   var(--tk-ink);
  --text-body:     var(--tk-gray-700);
  --text-muted:    var(--tk-gray-500);
  --text-faint:    var(--tk-gray-400);
  --text-inverse:  var(--tk-white);
  --text-on-accent:var(--tk-white);

  --surface-page:   var(--tk-gray-50);
  --surface-card:   var(--tk-white);
  --surface-sunken: var(--tk-gray-100);
  --surface-inverse:var(--tk-ink);

  --border-subtle: var(--tk-gray-200);
  --border-default:var(--tk-gray-300);
  --border-strong: var(--tk-gray-400);

  --focus-ring: color-mix(in srgb, var(--color-accent) 45%, transparent);
  --color-accent-tint: var(--tk-teal-100);
}

/* ——— Product theme scopes ———————————————————————————
   Wrap any product surface in one of these to retheme the
   semantic accent (buttons, links, focus, tags) instantly. */
[data-product="proofing"] { --color-accent: var(--tk-proofing); --color-brand: var(--tk-proofing); --color-brand-hover: var(--tk-proofing-600); --color-accent-tint: var(--tk-proofing-100); }
[data-product="travel"]   { --color-accent: var(--tk-travel);   --color-brand: var(--tk-travel);   --color-brand-hover: var(--tk-travel-600); --color-accent-tint: var(--tk-travel-100); }
[data-product="tab"]      { --color-accent: var(--tk-tab);      --color-brand: var(--tk-tab);      --color-brand-hover: var(--tk-tab-600); --color-accent-tint: var(--tk-tab-100); }
[data-product="golf"]     { --color-accent: var(--tk-golf);     --color-brand: var(--tk-golf);     --color-brand-hover: var(--tk-golf-600); --color-accent-tint: var(--tk-golf-100); }
[data-product="indigo"]   { --color-accent: var(--tk-indigo);   --color-brand: var(--tk-indigo);   --color-brand-hover: var(--tk-indigo-600); --color-accent-tint: var(--tk-indigo-100); }
[data-product="lostfound"]{ --color-accent: var(--tk-teal);     --color-brand: var(--tk-teal);     --color-brand-hover: var(--tk-teal-600); --color-accent-tint: var(--tk-teal-100); }

/* ============================================================
   TRAKKABLES — TYPOGRAPHY TOKENS
   ============================================================ */

:root {
  /* Families */
  --font-display: 'Saira Semi Condensed', 'Saira', system-ui, sans-serif;
  --font-heading: 'Saira', system-ui, sans-serif;
  --font-body:    'Figtree', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale (1.250 major-third-ish, tuned) */
  --text-2xs: 0.6875rem;  /* 11px — micro labels, code badges */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-md:  1rem;       /* 16px — base body */
  --text-lg:  1.125rem;   /* 18px */
  --text-xl:  1.375rem;   /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 3rem;       /* 48px */
  --text-5xl: 4rem;       /* 64px — hero display */

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   800;

  /* Line heights */
  --leading-tight:  1.05;   /* display */
  --leading-snug:   1.2;    /* headings */
  --leading-normal: 1.5;    /* body */
  --leading-relaxed:1.65;   /* long-form */

  /* Letter spacing — display is set TIGHT & uppercase to echo wordmark */
  --tracking-display: -0.01em;
  --tracking-label:   0.06em;   /* uppercase eyebrows / kickers */
  --tracking-wide:    0.12em;   /* tiny all-caps tags */
  --tracking-mono:    0.02em;
}

/* ============================================================
   TRAKKABLES — SPACING, RADII, LAYOUT TOKENS
   8px base grid. The brand's signature shape is the STADIUM
   (fully-rounded pill) from the logo lockup — radii lean round.
   ============================================================ */

:root {
  /* Spacing scale (8px grid, with 4px half-steps) */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 6rem;      /* 96 */

  /* Radii — stadium pill is the brand motif */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;   /* signature stadium */

  /* Border widths */
  --border-thin: 1px;
  --border-med:  2px;
  --border-thick:3px;     /* logo outline weight */

  /* Layout */
  --container-sm:  640px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1360px;
  --gutter:        var(--space-5);

  --control-h-sm: 34px;
  --control-h-md: 42px;
  --control-h-lg: 52px;
}

/* ============================================================
   TRAKKABLES — ELEVATION, SHADOW, MOTION TOKENS
   Clean SaaS elevation: soft neutral shadows, no glow.
   Motion is quick and confident (tracking = decisive).
   ============================================================ */

:root {
  /* Shadows — neutral, low-spread, never colored */
  --shadow-xs: 0 1px 2px rgba(21, 24, 28, 0.06);
  --shadow-sm: 0 1px 3px rgba(21, 24, 28, 0.08), 0 1px 2px rgba(21, 24, 28, 0.04);
  --shadow-md: 0 4px 12px rgba(21, 24, 28, 0.08), 0 2px 4px rgba(21, 24, 28, 0.04);
  --shadow-lg: 0 12px 28px rgba(21, 24, 28, 0.12), 0 4px 8px rgba(21, 24, 28, 0.05);
  --shadow-xl: 0 24px 56px rgba(21, 24, 28, 0.16);

  /* Focus ring (accent-aware via --color-accent) */
  --ring-width: 3px;

  /* Motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --ease-snap:  cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* subtle overshoot for press-release */

  --dur-fast:   120ms;   /* @kind other */
  --dur-base:   200ms;   /* @kind other */
  --dur-slow:   320ms;   /* @kind other */

  /* Standard interaction transition */
  --transition-base: color var(--dur-fast) var(--ease-out),
                     background-color var(--dur-fast) var(--ease-out),
                     border-color var(--dur-fast) var(--ease-out),
                     box-shadow var(--dur-base) var(--ease-out),
                     transform var(--dur-fast) var(--ease-out);
}

/* ============================================================
   TRAKKABLES — component interaction states
   Static appearance lives inline in the JSX (so it survives
   bundling); this layer adds hover / active / focus behaviour
   that inline styles can't express. Class hooks: tk-btn, etc.
   ============================================================ */

/* —— Buttons —————————————————————————————————————— */
.tk-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ring-width) var(--focus-ring);
}
.tk-btn:not(:disabled):active { transform: translateY(1px) scale(0.985); }

.tk-btn--primary:not(:disabled):hover,
.tk-btn--danger:not(:disabled):hover {
  filter: brightness(0.93);
  box-shadow: var(--shadow-md);
}
.tk-btn--secondary:not(:disabled):hover { border-color: var(--color-accent); color: var(--color-accent); }
.tk-btn--ghost:not(:disabled):hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.tk-btn--inverse:not(:disabled):hover { filter: brightness(1.25); }

/* —— Inputs ——————————————————————————————————————— */
.tk-input:focus,
.tk-textarea:focus,
.tk-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 var(--ring-width) var(--focus-ring);
}
.tk-input::placeholder, .tk-textarea::placeholder { color: var(--text-faint); }

/* —— Cards ———————————————————————————————————————— */
.tk-card--interactive { transition: var(--transition-base); cursor: pointer; }
.tk-card--interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* —— Tabs ————————————————————————————————————————— */
.tk-tab { transition: var(--transition-base); }
.tk-tab:hover:not([data-active="true"]) { color: var(--text-strong); }

/* —— Switch ——————————————————————————————————————— */
.tk-switch:focus-visible { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--focus-ring); }

/* —— Generic link ————————————————————————————————— */
.tk-link { color: var(--color-accent); text-decoration: none; transition: var(--transition-base); }
.tk-link:hover { text-decoration: underline; }