/* MloaderDigital tokens, web export.
   Generated from tokens.json by the design system, then the @font-face block
   was removed for this export: two of its faces resolved only inside the
   artifact, and Roboto Condensed Bold (every headline) was one of them.
   Load Roboto and Roboto Condensed from Google Fonts in <head> instead. */
:root, [data-theme="light"] {
  --ink-900: #1d262b; /* Deepest page ground. Use behind full-bleed sections so raised surfaces read as lifted. */
  --background: #2a373f; /* Default page background and the ground every text pair is checked against. */
  --surface-600: #35454e; /* Card and tile fill on background. One step up, no border needed. */
  --surface-500: #41535d; /* Hover fill for cards and list rows, and the fill of nested tiles inside a card. */
  --hairline: #fdfdfd24; /* 1px dividers and card edges. Borders instead of shadows inside a card. */
  --Gold: #bdb74d; /* Primary accent. Solid button fill with black label, active states, progress fill. 6.1:1 as text on background. */
  --gold-700: #a8a244; /* Hover and pressed fill for the gold solid button only. Not for text. */
  --Button_Lable: #8dc6de; /* Secondary accent. Link text, outline button border and label, data highlights. 6.8:1 on background. */
  --sky-700: #6fb0cb; /* Hover and pressed fill for the sky solid button only. Not for text. */
  --sky-tint: #8dc6de1f; /* Hover wash inside an outline button or a selected row. Backgrounds only, never a fill behind body copy. */
  --white: #fdfdfd; /* Primary text and headlines on background and surface-600. */
  --text-muted: #c3ced4; /* Body copy under a headline, card descriptions. 7.9:1 on background. */
  --text-dim: #93a3ab; /* Captions, legal lines, inactive step labels. 4.9:1 on background. Never below 14px on surface-500. */
  --black: #050505; /* Label on a Gold or Button_Lable fill, and text on white surfaces in print. */
  --shadow-card: 0 10px 26px 0 #00000066; /* Resting card and promo link. */
  --shadow-lift: 0 24px 60px 0 #00000080; /* The same card on hover, paired with a 4px rise. */
  --shadow-glow: inset 0 0 22px 2px #8dc6de5c; /* Inner glow on a stat tile ring when its value is live. Decorative only. */
}
:root {
  --space-1: 4px; /* Icon to label, chip inset. */
  --space-2: 8px; /* Gap in a button, badge padding. */
  --space-3: 12px; /* Headline to the line under it. */
  --space-4: 16px; /* Card padding on small cards, gap between tiles. */
  --space-5: 24px; /* Card padding, carousel slide gap. */
  --space-6: 32px; /* Gap between blocks inside a section. */
  --space-7: 48px; /* Heading block to the content it introduces. */
  --space-8: 64px; /* Section padding on narrow screens. */
  --space-9: 96px; /* Section padding on wide screens. */
  --Base-Radius: 4px; /* The system's corner. Buttons, badges and cards all take it. */
  --radius-md: 10px; /* Inputs, menu rows, small tiles, logo tiles. */
  --radius-lg: 16px; /* Nested panels inside a card, image crops. */
  --radius-xl: 24px; /* Promo links, stat tiles and media frames. Not cards. */
  --radius-pill: 999px; /* Round controls only: carousel arrows, dots, progress tracks, the stat ring. */
  --font-display: Roboto Condensed, Roboto, Arial Narrow, sans-serif;
  --font-sans: Roboto, system-ui, Helvetica Neue, Arial, sans-serif;
  --font-condensed: Roboto Condensed, Roboto, Arial Narrow, sans-serif;
  --text-display-xl: 700 72px/68px var(--font-display);
  --text-display-lg: 700 56px/54px var(--font-display);
  --text-display-md: 700 40px/42px var(--font-display);
  --text-headline-lg: 500 30px/36px var(--font-sans);
  --text-headline-md: 500 24px/30px var(--font-sans);
  --text-headline-sm: 500 20px/26px var(--font-sans);
  --text-lead: 500 18px/26px var(--font-sans);
  --text-body: 400 17px/27px var(--font-sans);
  --text-body-sm: 400 15px/24px var(--font-sans);
  --text-caption: 400 13px/18px var(--font-sans);
  --text-label: 700 13px/16px var(--font-condensed);
  --text-label-sm: 700 11px/14px var(--font-condensed);
}
.display-xl {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 68px;
  font-weight: 700;
  letter-spacing: -1px;
}
.display-lg {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 54px;
  font-weight: 700;
  letter-spacing: -0.8px;
}
.display-md {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 42px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.headline-lg {
  font-family: var(--font-sans);
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.6px;
}
.headline-md {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.4px;
}
.headline-sm {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -0.2px;
}
.lead {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 27px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-condensed);
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}
.label-sm {
  font-family: var(--font-condensed);
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.8px;
}