/*
 * mud-tokens.css — GENERATED, DO NOT EDIT BY HAND.
 * Source: MUD design system KB foundations per-area tokens.css (colors, spacing, radius, border-width, elevation, typography, iconography),
 *         pinned at KB version v1.0.0-194-g8340158.
 * Regenerate: dotnet run --project tools/MudTokenGen -- --kb <kb-path> --out <file> --version <v>
 * Sheets are concatenated verbatim; a responsive .text-<role> layer is derived (MIS-018).
 */
/* ===== colors ===== */
:root {
  --color-background-base-inverse-on-color: #ffffff;
  --color-background-transparent-black: #12121233;
  --color-background-transparent-brand: #7e37f933;
  --color-background-transparent-white-on-color: #ffffffb2;
  --color-border-focus: #3379db;
  --color-palette-black-1000: #121212;
  --color-palette-white-1000: #ffffff;
  --color-palette-blue-sky-100: #e8f0fb;
  --color-palette-blue-sky-150: #d6e5f8;
  --color-palette-blue-sky-200: #ccdef6;
  --color-palette-blue-sky-300: #99bced;
  --color-palette-blue-sky-400: #669be4;
  --color-palette-blue-sky-500: #3379db;
  --color-palette-blue-sky-600: #0058d2;
  --color-palette-blue-sky-700: #0046a8;
  --color-palette-blue-sky-800: #00357e;
  --color-palette-blue-sky-900: #00295a;
  --color-palette-lavender-100: #efeafc;
  --color-palette-lavender-200: #ddd2fa;
  --color-palette-lavender-300: #bba5f5;
  --color-palette-lavender-400: #9a79ef;
  --color-palette-lavender-500: #784cea;
  --color-palette-lavender-600: #561fe5;
  --color-palette-lavender-700: #4519b7;
  --color-palette-lavender-800: #341389;
  --color-palette-lavender-900: #240c66;
  --color-palette-purple-100: #efeafc;
  --color-palette-purple-200: #ddd2fa;
  --color-palette-purple-300: #cbaffd;
  --color-palette-purple-400: #b287fb;
  --color-palette-purple-500: #985ffa;
  --color-palette-purple-600: #7e37f9;
  --color-palette-purple-700: #652cc7;
  --color-palette-purple-800: #4c2195;
  --color-palette-purple-900: #36166a;
  --color-palette-magenta-100: #f7eafa;
  --color-palette-magenta-200: #eed1f5;
  --color-palette-magenta-300: #dda3eb;
  --color-palette-magenta-400: #cc74e2;
  --color-palette-magenta-500: #bb46d8;
  --color-palette-magenta-600: #aa18ce;
  --color-palette-magenta-700: #8813a5;
  --color-palette-magenta-800: #660e7c;
  --color-palette-magenta-900: #4a095a;
  --color-palette-forest-green-100: #e8f1f1;
  --color-palette-forest-green-150: #d6e6e7;
  --color-palette-forest-green-200: #cce0e1;
  --color-palette-forest-green-300: #99c1c3;
  --color-palette-forest-green-400: #66a1a5;
  --color-palette-forest-green-500: #338287;
  --color-palette-forest-green-600: #006369;
  --color-palette-forest-green-700: #004f54;
  --color-palette-forest-green-800: #003b3f;
  --color-palette-forest-green-900: #00292c;
  --color-palette-gray-100: #f5f5f5;
  --color-palette-gray-200: #f1f1f1;
  --color-palette-gray-250: #d9d9d9;
  --color-palette-gray-300: #b2b2b2;
  --color-palette-gray-400: #757575;
  --color-palette-gray-500: #616161;
  --color-palette-gray-600: #444444;
  --color-palette-gray-700: #383838;
  --color-palette-gray-800: #2c2c2c;
  --color-palette-gray-900: #1e1e1e;
  --color-palette-green-50: #ebf7f1;
  --color-palette-green-100: #e6f5ee;
  --color-palette-green-200: #cdeadd;
  --color-palette-green-300: #9ad6bb;
  --color-palette-green-400: #68c199;
  --color-palette-green-500: #35ad77;
  --color-palette-green-600: #039855;
  --color-palette-green-700: #027948;
  --color-palette-green-800: #05603a;
  --color-palette-green-900: #054f31;
  --color-palette-apricot-50: #fef5dd;
  --color-palette-apricot-100: #feefc6;
  --color-palette-apricot-200: #fedf89;
  --color-palette-apricot-300: #fec84b;
  --color-palette-apricot-400: #fdb022;
  --color-palette-apricot-500: #f79009;
  --color-palette-apricot-600: #dc6803;
  --color-palette-apricot-700: #b54708;
  --color-palette-apricot-800: #93370d;
  --color-palette-apricot-900: #792e0d;
  --color-palette-red-50: #feefee;
  --color-palette-red-100: #fee4e2;
  --color-palette-red-200: #fecdc9;
  --color-palette-red-300: #fda19b;
  --color-palette-red-400: #f97066;
  --color-palette-red-500: #f04438;
  --color-palette-red-600: #d92d20;
  --color-palette-red-700: #b32318;
  --color-palette-red-800: #912018;
  --color-palette-red-900: #7a271a;
  --color-palette-alpha-black-100: #1212120d;
  --color-palette-alpha-black-200: #1212121a;
  --color-palette-alpha-black-300: #12121233;
  --color-palette-alpha-black-400: #12121266;
  --color-palette-alpha-black-500: #12121299;
  --color-palette-alpha-white-100: #ffffff0d;
  --color-palette-alpha-white-200: #ffffff1a;
  --color-palette-alpha-white-300: #ffffff33;
  --color-palette-alpha-white-400: #ffffff66;
  --color-palette-alpha-white-500: #ffffff99;
  --color-palette-alpha-gray-100: #44444408;
  --color-palette-alpha-gray-200: #4444441a;
  --color-palette-alpha-gray-300: #44444433;
  --color-palette-alpha-gray-400: #44444466;
  --color-palette-alpha-gray-500: #44444499;
}

/* ===== spacing ===== */
:root {
}

/* ===== radius ===== */
:root {
  --border-radius-full: 999px !important;
}

/* ===== border-width ===== */
:root {
}

/* ===== elevation ===== */
:root {
  --shadow-100: 0 0 0.5px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.15);
  --shadow-100-inverse: 0 0 0.5px rgba(0,0,0,0.3), 0 -1px 3px rgba(0,0,0,0.15);
  --shadow-200: 0 0 0.5px rgba(0,0,0,0.18), 0 3px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.08);
  --shadow-300: 0 0 0.5px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.08), 0 5px 12px rgba(0,0,0,0.08);
  --shadow-400: 0 0 0.5px rgba(0,0,0,0.12), 0 10px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.08);
  --shadow-500: 0 3px 12px rgba(0,0,0,0.05), 0 0 0.5px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.12), 0 2px 5px rgba(0,0,0,0.1);
  --shadow-600: 0 3px 12px rgba(0,0,0,0.05), 0 0 0.5px rgba(0,0,0,0.08), 0 16px 48px rgba(0,0,0,0.14), 0 6px 12px rgba(0,0,0,0.1);
}

/* ===== typography ===== */
:root {
  --font-family-primary: "Onest", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  --font-family-documentation: "JetBrains Mono", "SF Mono", Consolas, monospace;
}

.text-desktop-display-large {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-56);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-64);
  letter-spacing: -0.02em;
}
.text-desktop-display-medium {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-56);
  letter-spacing: -0.02em;
}
.text-desktop-heading-h1 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-40);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-48);
  letter-spacing: -0.02em;
}
.text-desktop-heading-h2 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-40);
  letter-spacing: -0.02em;
}
.text-desktop-heading-h3 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-32);
  letter-spacing: -0.01em;
}
.text-desktop-heading-h4 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-28);
  letter-spacing: -0.01em;
}
.text-desktop-heading-h5 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-26);
  letter-spacing: -0.01em;
}
.text-desktop-body-large {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-28);
  letter-spacing: 0;
}
.text-desktop-body-large-500 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-28);
  letter-spacing: 0;
}
.text-desktop-body-default {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-24);
  letter-spacing: 0;
}
.text-desktop-body-default-500 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-24);
  letter-spacing: 0;
}
.text-desktop-body-small {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-20);
  letter-spacing: 0;
}
.text-desktop-body-small-500 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-20);
  letter-spacing: 0;
}
.text-desktop-caption-medium {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-16);
  letter-spacing: 0;
}
.text-desktop-caption-medium-500 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-16);
  letter-spacing: 0;
}
.text-desktop-caption-small {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-10);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-12);
  letter-spacing: 0;
}
.text-mobile-display-large {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-56);
  letter-spacing: -0.02em;
}
.text-mobile-display-medium {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-40);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-48);
  letter-spacing: -0.02em;
}
.text-mobile-heading-h1 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-40);
  letter-spacing: -0.02em;
}
.text-mobile-heading-h2 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-36);
  letter-spacing: -0.02em;
}
.text-mobile-heading-h3 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-30);
  letter-spacing: -0.01em;
}
.text-mobile-heading-h4 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-26);
  letter-spacing: -0.01em;
}
.text-mobile-heading-h5 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-24);
  letter-spacing: -0.01em;
}
.text-mobile-body-large {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-28);
  letter-spacing: 0;
}
.text-mobile-body-large-500 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-28);
  letter-spacing: 0;
}
.text-mobile-body-default {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-24);
  letter-spacing: 0;
}
.text-mobile-body-default-500 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-24);
  letter-spacing: 0;
}
.text-mobile-body-small {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-20);
  letter-spacing: 0;
}
.text-mobile-body-small-500 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-20);
  letter-spacing: 0;
}
.text-mobile-caption-medium {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-16);
  letter-spacing: 0;
}
.text-mobile-caption-medium-500 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-16);
  letter-spacing: 0;
}
.text-mobile-caption-small {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-10);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-12);
  letter-spacing: 0;
}
.text-documentation-small {
  font-family: var(--font-family-documentation);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-20);
  letter-spacing: -0.01em;
}
.text-documentation-medium {
  font-family: var(--font-family-documentation);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-24);
  letter-spacing: -0.01em;
}
.text-documentation-large {
  font-family: var(--font-family-documentation);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-28);
  letter-spacing: -0.01em;
}
.text-documentation-extra-large {
  font-family: var(--font-family-documentation);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-28);
  letter-spacing: -0.01em;
}

/* ===== iconography ===== */
:root {
  --icon-size-12: 12px;
  --icon-size-16: 16px;
  --icon-size-20: 20px;
  --icon-size-24: 24px;
  --icon-size-32: 32px;
  --icon-size-40: 40px;
}

/* ===== responsive typography (dual scale: mobile <768px / desktop >=768px) ===== */
.text-body-default {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-24);
  letter-spacing: 0;
}
.text-body-default-500 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-24);
  letter-spacing: 0;
}
.text-body-large {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-28);
  letter-spacing: 0;
}
.text-body-large-500 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-28);
  letter-spacing: 0;
}
.text-body-small {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-20);
  letter-spacing: 0;
}
.text-body-small-500 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-20);
  letter-spacing: 0;
}
.text-caption-medium {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-16);
  letter-spacing: 0;
}
.text-caption-medium-500 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-16);
  letter-spacing: 0;
}
.text-caption-small {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-10);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-12);
  letter-spacing: 0;
}
.text-display-large {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-56);
  letter-spacing: -0.02em;
}
.text-display-medium {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-40);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-48);
  letter-spacing: -0.02em;
}
.text-heading-h1 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-40);
  letter-spacing: -0.02em;
}
.text-heading-h2 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-36);
  letter-spacing: -0.02em;
}
.text-heading-h3 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-30);
  letter-spacing: -0.01em;
}
.text-heading-h4 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-26);
  letter-spacing: -0.01em;
}
.text-heading-h5 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-24);
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .text-body-default {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-24);
    letter-spacing: 0;
  }
  .text-body-default-500 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-24);
    letter-spacing: 0;
  }
  .text-body-large {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-28);
    letter-spacing: 0;
  }
  .text-body-large-500 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-28);
    letter-spacing: 0;
  }
  .text-body-small {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-20);
    letter-spacing: 0;
  }
  .text-body-small-500 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-20);
    letter-spacing: 0;
  }
  .text-caption-medium {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-16);
    letter-spacing: 0;
  }
  .text-caption-medium-500 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-16);
    letter-spacing: 0;
  }
  .text-caption-small {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-10);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-12);
    letter-spacing: 0;
  }
  .text-display-large {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-56);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-64);
    letter-spacing: -0.02em;
  }
  .text-display-medium {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-48);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-56);
    letter-spacing: -0.02em;
  }
  .text-heading-h1 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-40);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-48);
    letter-spacing: -0.02em;
  }
  .text-heading-h2 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-32);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-40);
    letter-spacing: -0.02em;
  }
  .text-heading-h3 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-32);
    letter-spacing: -0.01em;
  }
  .text-heading-h4 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-28);
    letter-spacing: -0.01em;
  }
  .text-heading-h5 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-26);
    letter-spacing: -0.01em;
  }
}