:root {
    --font-family: inherit;
    --color-black: #111111;
    --color-white: #FFFFFF;
    --color-red-50: #FFE5E5;
    --color-red-100: #FFC3C4;
    --color-red-200: #FFABAD;
    --color-red-300: #FF7975;
    --color-red-400: #FF4E4A;
    --color-red-500: #EE0005;
    --color-red-600: #D30005;
    --color-red-700: #A70E00;
    --color-red-800: #780700;
    --color-red-900: #530300;
    --color-orange-50: #FFE2D6;
    --color-orange-100: #FFC5AD;
    --color-orange-200: #FFA584;
    --color-orange-300: #FF8255;
    --color-orange-400: #FF5000;
    --color-orange-500: #D33918;
    --color-orange-600: #9F290F;
    --color-orange-700: #7E200D;
    --color-orange-800: #5D180C;
    --color-orange-900: #3E1009;
    --color-yellow-50: #FEF087;
    --color-yellow-100: #FEEA55;
    --color-yellow-200: #FEDF35;
    --color-yellow-300: #FFD11B;
    --color-yellow-400: #FDC400;
    --color-yellow-500: #FCA600;
    --color-yellow-600: #F08E0A;
    --color-yellow-700: #E57A09;
    --color-yellow-800: #CD6006;
    --color-yellow-900: #99470A;
    --color-green-50: #DFFFB9;
    --color-green-100: #BDFB72;
    --color-green-200: #83F13B;
    --color-green-300: #5FE63F;
    --color-green-400: #3CCD49;
    --color-green-500: #1EAA52;
    --color-green-600: #007D48;
    --color-green-700: #00643E;
    --color-green-800: #005034;
    --color-green-900: #003C2A;
    --color-blue-50: #D6EEFF;
    --color-blue-100: #B9E2FF;
    --color-blue-200: #87CEFF;
    --color-blue-300: #4CABFF;
    --color-blue-400: #1190FF;
    --color-blue-500: #1151FF;
    --color-blue-600: #0034E3;
    --color-blue-700: #061DBB;
    --color-blue-800: #02068E;
    --color-blue-900: #020664;
    --color-teal-50: #D4FFFB;
    --color-teal-100: #9CFFF7;
    --color-teal-200: #69EEE7;
    --color-teal-300: #31CBCB;
    --color-teal-400: #1CB2B6;
    --color-teal-500: #008E98;
    --color-teal-600: #0A7281;
    --color-teal-700: #005C68;
    --color-teal-800: #004856;
    --color-teal-900: #043441;
    --color-purple-50: #E4E1FC;
    --color-purple-100: #D6D1FF;
    --color-purple-200: #BEAFFD;
    --color-purple-300: #A082FF;
    --color-purple-400: #8755FF;
    --color-purple-500: #6E0FF6;
    --color-purple-600: #5400CC;
    --color-purple-700: #4400A9;
    --color-purple-800: #300080;
    --color-purple-900: #1C0060;
    --color-pink-50: #FFE1F3;
    --color-pink-100: #FFCDEA;
    --color-pink-200: #FFB0DD;
    --color-pink-300: #FE90CC;
    --color-pink-400: #FC5DBB;
    --color-pink-500: #ED1AA0;
    --color-pink-600: #D00B84;
    --color-pink-700: #A50767;
    --color-pink-800: #770349;
    --color-pink-900: #4C012D;
    --color-grey-50: #FAFAFA;
    --color-grey-100: #F5F5F5;
    --color-grey-200: #E5E5E5;
    --color-grey-300: #CACACB;
    --color-grey-400: #9E9EA0;
    --color-grey-500: #707072;
    --color-grey-600: #4B4B4D;
    --color-grey-700: #39393B;
    --color-grey-800: #28282A;
    --color-grey-900: #1F1F21;
    --color-brand-red: #EE0005;
    --color-brand-orange: #FF5000;
    --color-gradient-brand-orange: linear-gradient(113.7deg, #FF0015 3.64%, #FF5000 50.92%, #FF6A00 97.26%);
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F5F5F5;
    --color-bg-active: #F5F5F5;
    --color-bg-hover: #E5E5E5;
    --color-bg-warning: #FEDF35;
    --color-bg-critical: #D30005;
    --color-bg-success: #007D48;
    --color-bg-disabled: #E5E5E5;
    --color-bg-primary-inverse: #111111;
    --color-bg-secondary-inverse: #1F1F21;
    --color-bg-active-inverse: #28282A;
    --color-bg-hover-inverse: #28282A;
    --color-bg-warning-inverse: #FEEA55;
    --color-bg-critical-inverse: #FF4E4A;
    --color-bg-success-inverse: #1EAA52;
    --color-bg-disabled-inverse: #39393B;
    --color-bg-always-dark: #111111;
    --color-bg-always-light: #FFFFFF;
    --color-text-primary: #111111;
    --color-text-secondary: #707072;
    --color-text-hover: #707072;
    --color-text-disabled: #CACACB;
    --color-text-critical: #D30005;
    --color-text-success: #007D48;
    --color-text-link: #1151FF;
    --color-text-primary-inverse: #FFFFFF;
    --color-text-secondary-inverse: #9E9EA0;
    --color-text-hover-inverse: #9E9EA0;
    --color-text-disabled-inverse: #4B4B4D;
    --color-text-critical-inverse: #FF4E4A;
    --color-text-success-inverse: #1EAA52;
    --color-text-link-inverse: #1190FF;
    --color-border-tertiary: #e5e5e5;
    --color-border-primary: #707072;
    --color-border-active: #111111;
    --color-border-critical: #D30005;
    --color-border-success: #007D48;
    --color-border-disabled: #CACACB;
    --color-border-focus: #1151FF;
    --color-border-focus-inverse: #1190FF;
    --color-border-disabled-inverse: #39393B;
    --color-border-success-inverse: #1EAA52;
    --color-border-critical-inverse: #FF4E4A;
    --color-border-active-inverse: #FFFFFF;
    --color-border-primary-inverse: #9E9EA0;
    --color-critical: #D30005;
    --color-critical-inverse: #FF4E4A;
    --color-success: #007D48;
    --color-success-inverse: #1EAA52;
    --color-info: #1151FF;
    --color-info-inverse: #1190FF;
    --color-warning: #FEDF35;
    --color-warning-inverse: #FEEA55;
    --color-focus-ring: #F5F5F5;
    --color-box-focus-ring: rgba(39, 93, 197, 1);
    --button-border-radius: 30px;
    --button-border-width: 1.5px;
    --button-box-shadow-width: 0;
    --button-box-shadow-hover-width: 0;
    --button-text-decoration-line: underline;
    --button-padding-top-s: 6px;
    --button-padding-top-m: 12px;
    --button-padding-top-l: 18px;
    --button-padding-bottom-s: 6px;
    --button-padding-bottom-m: 12px;
    --button-padding-bottom-l: 18px;
    --button-padding-sides-s: 20px;
    --button-padding-sides-m: 24px;
    --button-padding-sides-l: 24px;
    --button-padding-underline: 0;
    --button-height-s: 34px;
    --button-height-m: 46px;
    --button-height-l: 58px;
    --button-color-bg-primary: #111111;
    --button-color-bg-primary-inverse: #FFFFFF;
    --button-color-bg-primary-hover: #707072;
    --button-color-bg-primary-hover-inverse: #9E9EA0;
    --button-color-bg-primary-disabled: #E5E5E5;
    --button-color-bg-primary-disabled-inverse: #707072;
    --button-color-bg-secondary: transparent;
    --button-color-bg-secondary-inverse: transparent;
    --button-color-text-primary-disabled: #9E9EA0;
    --button-color-text-primary-disabled-inverse: #4B4B4D;
    --button-color-border-primary: #111111;
    --button-color-border-primary-inverse: #FFFFFF;
    --button-color-border-primary-hover: #707072;
    --button-color-border-primary-hover-inverse: #9E9EA0;
    --button-color-border-primary-disabled: #E5E5E5;
    --button-color-border-primary-disabled-inverse: #707072;
    --button-color-border-secondary: #CACACB;
    --button-color-border-secondary-inverse: #707072;
    --button-color-border-secondary-hover: #111111;
    --button-color-border-secondary-hover-inverse: #FFFFFF;
    --button-color-border-secondary-disabled: #CACACB;
    --button-color-border-secondary-disabled-inverse: #4B4B4D;
    --dialog-bg-blur: 4px;
    --input-color-disabled: #707072;
    --elevation-10: 10;
    --elevation-20: 20;
    --elevation-30: 30;
    --elevation-40: 40;
    --elevation-50: 50;
    --elevation-60: 60;
    --elevation-70: 70;
    --elevation-80: 80;
    --elevation-90: 90;
    --elevation-100: 100;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-size-xxs: 12px;
    --font-size-xs: 14px;
    --font-size-s: 16px;
    --font-size-m: 20px;
    --font-size-l: 24px;
    --font-size-xl: 28px;
    --font-size-xxl: 32px;
    --font-size-xxxl: 40px;
    --font-size-xxxxl: 48px;
    --font-size-xxxxxl: 72px;
    --font-style-normal: normal;
    --shadow-10: 0px 1px 2px rgba(17, 17, 17, 0.04),0px 2px 6px rgba(17, 17, 17, 0.08);
    --shadow-20: 0px 2px 3px rgba(17, 17, 17, 0.04),0px 4px 12px rgba(17, 17, 17, 0.08);
    --shadow-30: 0px 4px 8px rgba(17, 17, 17, 0.04),0px 8px 24px rgba(17, 17, 17, 0.08);
    --shadow-40: 0px 8px 16px rgba(17, 17, 17, 0.04),0px 16px 48px rgba(17, 17, 17, 0.08);
    --size-spacing-xs: 4px;
    --size-spacing-s: 8px;
    --size-spacing-m: 12px;
    --size-spacing-l: 24px;
    --size-spacing-xl: 36px;
    --size-spacing-xxl: 60px;
    --size-spacing-xxxl: 84px;
    --size-spacing-xxxxl: 120px;
    --size-spacing-grid-gutter: 16px;
    --size-spacing-grid-gutter-l: 12px;
    --size-spacing-grid-exterior-gutter-s: 24px;
    --size-spacing-grid-exterior-gutter-l: 48px;
    --size-border-radius-s: 4px;
    --size-border-radius-m: 8px;
    --size-border-radius-l: 12px;
    --size-border-radius-xl: 24px;
    --size-border-width-s: 1px;
    --size-border-width-m: 1.5px;
    --size-border-width-l: 2px;
    --size-icon-s: 16px;
    --size-icon-m: 24px;
    --size-icon-l: 48px;
    --size-form-input-container-height: 84px;
    --size-form-input-field-height: 56px;
    --transition-timing-function-ease: cubic-bezier(.25, .1, .25, 1);
    --transition-duration-fast: 150ms;
    --transition-duration-normal: 250ms;
    --breakpoint-xs: 320px;
    --breakpoint-s: 600px;
    --breakpoint-m: 960px;
    --breakpoint-l: 1440px;
    --breakpoint-xl: 1920px;
    --form-shadow-focus: 0 0 0 12px #F5F5F5;
    /* Typography: Trade Gothic + Helvetica stacks */
    --font-family-heading: "Trade Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-family-body: "Trade Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-family-body-alt: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* New indirection variable so we can swap body font per scope */
    --font-family-body-current: var(--font-family-body);
    --font-family: var(--font-family-body);
    --font-family-hero: 'Hildera', 'hilderaregular', "Trade Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Hildera font (hero display) */
@font-face {
  font-family: 'Hildera';
  src: url('../../fonts/hildera-webfont.woff2') format('woff2'),
       url('../../fonts/hildera-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Apply hero font to main hero title */
#hero-main-title, .font-hero {
  font-family: var(--font-family-hero);
  font-weight: 400;
  letter-spacing: .5px;
}

/* Optional @font-face declarations (Provide licensed files yourself) */
/*
@font-face {
  font-family: 'Trade Gothic';
  src: url('/static/fonts/trade-gothic/TradeGothicLTPro.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Trade Gothic';
  src: url('/static/fonts/trade-gothic/TradeGothicLTPro-Bd.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

/* Headings use Trade Gothic stack */
html, body { font-family: var(--font-family-body-current); }

h1, h2, h3, h4, h5, h6,
.font-heading,
.heading-font {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium);
  letter-spacing: .5px;
}

/* Alternate body copy (pure Helvetica stack) */
.font-body-alt, .body-alt { font-family: var(--font-family-body-alt); }

/* Explicit utility classes */
.font-trade { font-family: var(--font-family-heading) !important; }
.font-helvetica { font-family: var(--font-family-body-alt) !important; }
/* New explicit body utility for consistency */
.font-body { font-family: var(--font-family-body) !important; }

/* Scoped body copy swap: apply Helvetica (alt body) to typical text elements while preserving heading font */
.body-alt-scope {
  --font-family-body-current: var(--font-family-body-alt);
}
/* Ensure headings inside scope still use Trade Gothic */
.body-alt-scope h1,
.body-alt-scope h2,
.body-alt-scope h3,
.body-alt-scope h4,
.body-alt-scope h5,
.body-alt-scope h6 { font-family: var(--font-family-heading); }

/* Optional: element-level reset for semantic text containers */
.body-alt-scope p,
.body-alt-scope li,
.body-alt-scope span,
.body-alt-scope a,
.body-alt-scope label,
.body-alt-scope input,
.body-alt-scope textarea,
.body-alt-scope button { font-family: var(--font-family-body-alt); }

/* Fine‑tuning for readability */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Heading scale adjustments (optional; only if not elsewhere controlled) */
.h1-like { font-size: var(--font-size-xxl); line-height: 1.15; }
.h2-like { font-size: var(--font-size-xl); line-height: 1.2; }
.h3-like { font-size: var(--font-size-l); line-height: 1.25; }

/* Utility: tighten tracking for all‑caps Trade Gothic labels */
.tg-caps { letter-spacing: .08em; text-transform: uppercase; font-weight: var(--font-weight-medium); }

/* Usage documentation (can remove in production):
   Default: Trade Gothic everywhere (headings + body)
   To force Helvetica for a block of body copy while keeping headings Trade Gothic:
       <section class="body-alt-scope">
         <h2>Headline stays Trade Gothic</h2>
         <p>Paragraph switches to Helvetica stack.</p>
       </section>
   To force Helvetica on a single element: add class="font-helvetica".
   To revert explicitly to Trade Gothic body inside a swapped scope: class="font-body".
*/