/**
 * Orbit Design System — Design Tokens (CSS Variables)
 * Single source of truth exported from Figma. Used by @imj_media/ui and other apps.
 * Usage: import "@imj_media/orbit-tokens/css/tokens.css"
 */

/* Generated CSS Variables - Dynamic Mode Switching Architecture */
/* Auto-generated from Figma variable collections */
/* Usage: Set data-theme attribute on container element to switch modes */

/* ========================================= */
/* FALLBACK VALUES (:root) */
/* These are default values when no theme is active */
/* Theme-specific selectors below will override these */
/* ========================================= */

:root {
  --ui-color-white: rgb(255, 255, 255);
  --ui-color-black: rgb(0, 0, 0);
  --ui-color-red-50: rgb(255, 242, 242);
  --ui-color-red-100: rgb(252, 227, 227);
  --ui-color-red-200: rgb(250, 189, 189);
  --ui-color-red-300: rgb(245, 148, 148);
  --ui-color-red-400: rgb(242, 107, 107);
  --ui-color-red-500: rgb(240, 69, 69);
  --ui-color-red-600: rgb(212, 61, 61);
  --ui-color-red-700: rgb(184, 51, 51);
  --ui-color-red-800: rgb(156, 43, 43);
  --ui-color-red-900: rgb(128, 36, 36);
  --ui-color-orange-50: rgb(255, 247, 242);
  --ui-color-orange-100: rgb(252, 237, 227);
  --ui-color-orange-200: rgb(252, 209, 176);
  --ui-color-orange-300: rgb(250, 176, 125);
  --ui-color-orange-400: rgb(250, 145, 74);
  --ui-color-orange-500: rgb(250, 115, 23);
  --ui-color-orange-600: rgb(219, 102, 20);
  --ui-color-orange-700: rgb(189, 87, 18);
  --ui-color-orange-800: rgb(158, 74, 13);
  --ui-color-orange-900: rgb(128, 59, 10);
  --ui-color-yellow-50: rgb(255, 250, 242);
  --ui-color-yellow-100: rgb(252, 245, 227);
  --ui-color-yellow-200: rgb(247, 230, 173);
  --ui-color-yellow-300: rgb(242, 214, 117);
  --ui-color-yellow-400: rgb(240, 196, 64);
  --ui-color-yellow-500: rgb(235, 179, 8);
  --ui-color-yellow-600: rgb(209, 158, 8);
  --ui-color-yellow-700: rgb(181, 140, 5);
  --ui-color-yellow-800: rgb(156, 120, 5);
  --ui-color-yellow-900: rgb(128, 97, 5);
  --ui-color-lime-50: rgb(250, 255, 242);
  --ui-color-lime-100: rgb(242, 252, 227);
  --ui-color-lime-200: rgb(214, 240, 176);
  --ui-color-lime-300: rgb(186, 227, 125);
  --ui-color-lime-400: rgb(161, 217, 74);
  --ui-color-lime-500: rgb(133, 204, 23);
  --ui-color-lime-600: rgb(120, 186, 20);
  --ui-color-lime-700: rgb(107, 166, 18);
  --ui-color-lime-800: rgb(97, 148, 15);
  --ui-color-lime-900: rgb(84, 128, 13);
  --ui-color-green-50: rgb(242, 255, 245);
  --ui-color-green-100: rgb(227, 252, 237);
  --ui-color-green-200: rgb(179, 240, 201);
  --ui-color-green-300: rgb(130, 224, 166);
  --ui-color-green-400: rgb(84, 212, 130);
  --ui-color-green-500: rgb(33, 196, 94);
  --ui-color-green-600: rgb(31, 181, 87);
  --ui-color-green-700: rgb(28, 163, 79);
  --ui-color-green-800: rgb(26, 145, 69);
  --ui-color-green-900: rgb(23, 128, 61);
  --ui-color-cyan-50: rgb(242, 252, 255);
  --ui-color-cyan-100: rgb(227, 250, 252);
  --ui-color-cyan-200: rgb(171, 232, 242);
  --ui-color-cyan-300: rgb(117, 217, 232);
  --ui-color-cyan-400: rgb(61, 199, 222);
  --ui-color-cyan-500: rgb(5, 181, 212);
  --ui-color-cyan-600: rgb(5, 163, 191);
  --ui-color-cyan-700: rgb(5, 145, 171);
  --ui-color-cyan-800: rgb(5, 128, 148);
  --ui-color-cyan-900: rgb(5, 110, 128);
  --ui-color-azure-50: rgb(242, 250, 255);
  --ui-color-azure-100: rgb(227, 245, 252);
  --ui-color-azure-200: rgb(173, 224, 247);
  --ui-color-azure-300: rgb(120, 204, 242);
  --ui-color-azure-400: rgb(69, 186, 237);
  --ui-color-azure-500: rgb(13, 166, 232);
  --ui-color-azure-600: rgb(13, 148, 207);
  --ui-color-azure-700: rgb(10, 128, 181);
  --ui-color-azure-800: rgb(10, 110, 156);
  --ui-color-azure-900: rgb(8, 89, 128);
  --ui-color-blue-50: rgb(242, 245, 255);
  --ui-color-blue-100: rgb(227, 232, 252);
  --ui-color-blue-200: rgb(184, 196, 237);
  --ui-color-blue-300: rgb(140, 161, 222);
  --ui-color-blue-400: rgb(97, 125, 209);
  --ui-color-blue-500: rgb(54, 89, 194);
  --ui-color-blue-600: rgb(51, 82, 176);
  --ui-color-blue-700: rgb(46, 74, 161);
  --ui-color-blue-800: rgb(41, 66, 145);
  --ui-color-blue-900: rgb(36, 59, 128);
  --ui-color-violet-50: rgb(245, 242, 255);
  --ui-color-violet-100: rgb(237, 227, 252);
  --ui-color-violet-200: rgb(209, 186, 250);
  --ui-color-violet-300: rgb(181, 143, 245);
  --ui-color-violet-400: rgb(153, 102, 242);
  --ui-color-violet-500: rgb(125, 59, 237);
  --ui-color-violet-600: rgb(110, 51, 209);
  --ui-color-violet-700: rgb(97, 46, 184);
  --ui-color-violet-800: rgb(82, 38, 156);
  --ui-color-violet-900: rgb(66, 31, 128);
  --ui-color-magenta-50: rgb(255, 242, 247);
  --ui-color-magenta-100: rgb(252, 227, 240);
  --ui-color-magenta-200: rgb(247, 184, 214);
  --ui-color-magenta-300: rgb(245, 140, 186);
  --ui-color-magenta-400: rgb(240, 94, 161);
  --ui-color-magenta-500: rgb(235, 51, 135);
  --ui-color-magenta-600: rgb(209, 46, 120);
  --ui-color-magenta-700: rgb(181, 41, 105);
  --ui-color-magenta-800: rgb(156, 33, 89);
  --ui-color-magenta-900: rgb(128, 28, 74);
  --ui-color-rose-50: rgb(255, 242, 245);
  --ui-color-rose-100: rgb(252, 227, 232);
  --ui-color-rose-200: rgb(245, 179, 194);
  --ui-color-rose-300: rgb(240, 128, 153);
  --ui-color-rose-400: rgb(232, 79, 112);
  --ui-color-rose-500: rgb(224, 28, 71);
  --ui-color-rose-600: rgb(201, 26, 64);
  --ui-color-rose-700: rgb(176, 23, 56);
  --ui-color-rose-800: rgb(153, 20, 48);
  --ui-color-rose-900: rgb(128, 15, 41);
  --ui-color-light-gray-50: rgb(247, 247, 250);
  --ui-color-light-gray-100: rgb(240, 242, 242);
  --ui-color-light-gray-200: rgb(224, 227, 230);
  --ui-color-light-gray-300: rgb(212, 214, 217);
  --ui-color-light-gray-400: rgb(199, 199, 204);
  --ui-color-light-gray-500: rgb(186, 189, 191);
  --ui-color-light-gray-600: rgb(171, 173, 179);
  --ui-color-light-gray-700: rgb(158, 163, 166);
  --ui-color-light-gray-800: rgb(145, 148, 153);
  --ui-color-light-gray-900: rgb(133, 135, 140);
  --ui-color-dark-gray-50: rgb(120, 122, 128);
  --ui-color-dark-gray-100: rgb(107, 110, 115);
  --ui-color-dark-gray-200: rgb(97, 99, 105);
  --ui-color-dark-gray-300: rgb(89, 89, 94);
  --ui-color-dark-gray-400: rgb(77, 79, 84);
  --ui-color-dark-gray-500: rgb(69, 69, 74);
  --ui-color-dark-gray-600: rgb(59, 61, 64);
  --ui-color-dark-gray-700: rgb(48, 51, 54);
  --ui-color-dark-gray-800: rgb(38, 41, 43);
  --ui-color-dark-gray-900: rgb(31, 31, 33);
  --ui-color-black-alpha-transparent: rgba(0, 0, 0, 0);
  --ui-color-black-alpha-5: rgba(0, 0, 0, 0.05);
  --ui-color-black-alpha-10: rgba(0, 0, 0, 0.1);
  --ui-color-black-alpha-20: rgba(0, 0, 0, 0.2);
  --ui-color-black-alpha-30: rgba(0, 0, 0, 0.3);
  --ui-color-black-alpha-40: rgba(0, 0, 0, 0.4);
  --ui-color-black-alpha-50: rgba(0, 0, 0, 0.5);
  --ui-color-black-alpha-60: rgba(0, 0, 0, 0.6);
  --ui-color-black-alpha-70: rgba(0, 0, 0, 0.7);
  --ui-color-black-alpha-80: rgba(0, 0, 0, 0.8);
  --ui-color-black-alpha-90: rgba(0, 0, 0, 0.9);
  --ui-positive-Value_0: 0;
  --ui-positive-Value_12: 0.66px;
  --ui-positive-Value_25: 1px;
  --ui-positive-Value_50: 2px;
  --ui-positive-Value_100: 4px;
  --ui-positive-Value_150: 6px;
  --ui-positive-Value_200: 8px;
  --ui-positive-Value_250: 10px;
  --ui-positive-Value_275: 11px;
  --ui-positive-Value_300: 12px;
  --ui-positive-Value_325: 13px;
  --ui-positive-Value_350: 14px;
  --ui-positive-Value_400: 16px;
  --ui-positive-Value_450: 18px;
  --ui-positive-Value_500: 20px;
  --ui-positive-Value_600: 24px;
  --ui-positive-Value_700: 28px;
  --ui-positive-Value_750: 30px;
  --ui-positive-Value_800: 32px;
  --ui-positive-Value_900: 36px;
  --ui-positive-Value_1000: 40px;
  --ui-positive-Value_1200: 48px;
  --ui-positive-Value_1400: 56px;
  --ui-positive-Value_1600: 64px;
  --ui-positive-Value_2000: 80px;
  --ui-positive-Value_2400: 96px;
  --ui-positive-Value_2800: 112px;
  --ui-positive-Value_3200: 128px;
  --ui-positive-Value_full: 9999px;
  --ui-negative-Value_0: 0;
  --ui-negative-Value_12: -0.66px;
  --ui-negative-Value_25: -1px;
  --ui-negative-Value_50: -2px;
  --ui-negative-Value_100: -4px;
  --ui-negative-Value_150: -6px;
  --ui-negative-Value_200: -8px;
  --ui-negative-Value_250: -10px;
  --ui-negative-Value_275: -11px;
  --ui-negative-Value_300: -12px;
  --ui-negative-Value_325: -13px;
  --ui-negative-Value_350: -14px;
  --ui-negative-Value_400: -16px;
  --ui-negative-Value_450: -18px;
  --ui-negative-Value_500: -20px;
  --ui-negative-Value_600: -24px;
  --ui-negative-Value_700: -28px;
  --ui-negative-Value_750: -30px;
  --ui-negative-Value_800: -32px;
  --ui-negative-Value_900: -36px;
  --ui-negative-Value_1000: -40px;
  --ui-negative-Value_1200: -48px;
  --ui-negative-Value_1400: -56px;
  --ui-negative-Value_1600: -64px;
  --ui-negative-Value_2000: -80px;
  --ui-negative-Value_2400: -96px;
  --ui-negative-Value_2800: -112px;
  --ui-negative-Value_3200: -128px;
  --ui-negative-Value_full: -9999px;
  /*
   * App-owned font stack (optional). Set on :root in consuming apps (e.g. product UI font).
   * When unset, resolves to Inter first, then system UI fonts — same as previous default.
   */
  --ui-font-family-ui: var(--app-font-family, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;
  --ui-font-family-mono: 'IBM Plex Mono';
  --ui-font-lh-10-tight: 12px;
  --ui-font-lh-10-snug: 12.5px;
  --ui-font-lh-10-normal: 14.5px;
  --ui-font-lh-10-relaxed: 16px;
  --ui-font-track-tight: 0.5px;
  --ui-font-track-normal: 0;
  --ui-font-track-wide: 2px;
  --ui-font-weight-regular: 400;
  --ui-font-weight-medium: 500;
  --ui-font-weight-semibold: 600;
  --ui-font-weight-bold: 700;
  --ui-font-lh-12-tight: 14.5px;
  --ui-font-lh-12-snug: 15px;
  --ui-font-lh-12-normal: 17.5px;
  --ui-font-lh-12-relaxed: 19px;
  --ui-font-lh-14-tight: 17px;
  --ui-font-lh-14-snug: 17.5px;
  --ui-font-lh-14-normal: 20.5px;
  --ui-font-lh-14-relaxed: 22.5px;
  --ui-font-lh-16-tight: 19.5px;
  --ui-font-lh-16-snug: 20px;
  --ui-font-lh-16-normal: 23px;
  --ui-font-lh-16-relaxed: 25.5px;
  --ui-font-lh-18-tight: 22px;
  --ui-font-lh-18-snug: 22.5px;
  --ui-font-lh-18-normal: 26px;
  --ui-font-lh-18-relaxed: 29px;
  --ui-font-lh-20-tight: 24px;
  --ui-font-lh-20-snug: 25px;
  --ui-font-lh-20-normal: 29px;
  --ui-font-lh-20-relaxed: 32px;
  --ui-font-lh-24-tight: 29px;
  --ui-font-lh-24-snug: 30px;
  --ui-font-lh-24-normal: 35px;
  --ui-font-lh-24-relaxed: 38.5px;
  --ui-font-lh-30-tight: 36.5px;
  --ui-font-lh-30-snug: 37.5px;
  --ui-font-lh-30-normal: 43.5px;
  --ui-font-lh-30-relaxed: 48px;
  --ui-font-lh-36-tight: 43.5px;
  --ui-font-lh-36-snug: 45px;
  --ui-font-lh-36-normal: 52px;
  --ui-font-lh-36-relaxed: 57.5px;
  --ui-font-lh-48-tight: 58px;
  --ui-font-lh-48-snug: 60px;
  --ui-font-lh-48-normal: 69.5px;
  --ui-font-lh-48-relaxed: 77px;
  --ui-style-solid: 'solid';
  --ui-style-dashed: 'dashed';
  --ui-shadow-none-x: 0;
  --ui-shadow-none-y: 0;
  --ui-shadow-none-blur: 0;
  --ui-shadow-none-Spread: 0;
  --ui-shadow-none-Color: rgba(0, 0, 0, 0);
  --ui-shadow-01-x: 0;
  --ui-shadow-01-y: 1px;
  --ui-shadow-01-blur: 2px;
  --ui-shadow-01-Spread: 0;
  --ui-shadow-02-x: 0;
  --ui-shadow-02-y: 2px;
  --ui-shadow-02-blur: 4px;
  --ui-shadow-02-Spread: -1px;
  --ui-shadow-03-x: 0;
  --ui-shadow-03-y: 4px;
  --ui-shadow-03-blur: 8px;
  --ui-shadow-03-Spread: -2px;
  --ui-shadow-04-x: 0;
  --ui-shadow-04-y: 8px;
  --ui-shadow-04-blur: 16px;
  --ui-shadow-04-Spread: -4px;
  --ui-shadow-05-x: 0;
  --ui-shadow-05-y: 16px;
  --ui-shadow-05-blur: 24px;
  --ui-shadow-05-Spread: -8px;
  --ui-shadow-x: 0;
  --ui-z-hide: -1px;
  --ui-z-base: 0;
  --ui-z-raised: 100px;
  --ui-z-sticky: 200px;
  --ui-z-shell: 300px;
  --ui-z-dropdown: 400px;
  --ui-z-popover: 500px;
  --ui-z-tooltip: 600px;
  --ui-z-modalBackdrop: 690px;
  --ui-z-modal: 700px;
  --ui-z-toast: 800px;
  --ui-z-overlay: 900px;
  --ui-z-max: 99999;
  --ui-font-size-2xs: var(--ui-positive-Value_250);
  --ui-font-size-xs: var(--ui-positive-Value_300);
  --ui-font-size-sm: var(--ui-positive-Value_350);
  --ui-font-size-md: var(--ui-positive-Value_400);
  --ui-font-size-lg: var(--ui-positive-Value_450);
  --ui-font-size-xl: var(--ui-positive-Value_500);
  --ui-font-size-2xl: var(--ui-positive-Value_600);
  --ui-font-size-3xl: var(--ui-positive-Value_750);
  --ui-font-size-4xl: var(--ui-positive-Value_900);
  --ui-font-size-5xl: var(--ui-positive-Value_1200);
  --ui-type-heading-h1-family: var(--ui-font-family-ui);
  --ui-type-heading-h1-size: var(--ui-font-size-4xl);
  --ui-type-heading-h1-weight: var(--ui-font-weight-semibold);
  --ui-type-heading-h1-ih: var(--ui-font-lh-36-snug);
  --ui-type-heading-h1-tracking: var(--ui-font-track-tight);
  --ui-type-heading-h2-family: var(--ui-font-family-ui);
  --ui-type-heading-h2-size: var(--ui-font-size-3xl);
  --ui-type-heading-h2-weight: var(--ui-font-weight-semibold);
  --ui-type-heading-h2-ih: var(--ui-font-lh-30-snug);
  --ui-type-heading-h2-tracking: var(--ui-font-track-tight);
  --ui-type-heading-h3-family: var(--ui-font-family-ui);
  --ui-type-heading-h3-size: var(--ui-font-size-xl);
  --ui-type-heading-h3-weight: var(--ui-font-weight-semibold);
  --ui-type-heading-h3-ih: var(--ui-font-lh-20-snug);
  --ui-type-heading-h3-tracking: var(--ui-font-track-normal);
  --ui-type-body-lg-Regular-family: var(--ui-font-family-ui);
  --ui-type-caption-xs-family: var(--ui-font-family-ui);
  --ui-type-caption-xs-size: var(--ui-font-size-2xs);
  --ui-type-caption-xs-weight: var(--ui-font-weight-regular);
  --ui-type-caption-xs-ih: var(--ui-font-lh-10-normal);
  --ui-type-caption-xs-tracking: var(--ui-font-track-wide);
  --ui-type-caption-md-family: var(--ui-font-family-ui);
  --ui-type-caption-md-size: var(--ui-font-size-xs);
  --ui-type-caption-md-weight: var(--ui-font-weight-regular);
  --ui-type-caption-md-ih: var(--ui-font-lh-12-normal);
  --ui-type-caption-md-tracking: var(--ui-font-track-wide);
  --ui-type-body-lg-Regular-size: var(--ui-font-size-lg);
  --ui-type-body-lg-Regular-weight: var(--ui-font-weight-regular);
  --ui-type-body-lg-Regular-ih: var(--ui-font-lh-18-normal);
  --ui-type-body-lg-Regular-tracking: var(--ui-font-track-tight);
  --ui-type-body-md-Regular-family: var(--ui-font-family-ui);
  --ui-type-body-md-Regular-size: var(--ui-font-size-md);
  --ui-type-body-md-Regular-weight: var(--ui-font-weight-regular);
  --ui-type-body-md-Regular-ih: var(--ui-font-lh-16-normal);
  --ui-type-body-md-Regular-tracking: var(--ui-font-track-tight);
  --ui-type-body-sm-Regular-family: var(--ui-font-family-ui);
  --ui-type-body-sm-Regular-size: var(--ui-font-size-sm);
  --ui-type-body-sm-Regular-weight: var(--ui-font-weight-regular);
  --ui-type-body-sm-Regular-ih: var(--ui-font-lh-14-normal);
  --ui-type-body-sm-Regular-tracking: var(--ui-font-track-tight);
  --ui-type-label-md-Regular-family: var(--ui-font-family-ui);
  --ui-type-label-md-Regular-size: var(--ui-font-size-sm);
  --ui-type-label-md-Regular-weight: var(--ui-font-weight-regular);
  --ui-type-label-md-Regular-ih: var(--ui-font-lh-14-normal);
  --ui-type-label-md-Regular-tracking: var(--ui-font-track-tight);
  --ui-type-code-md-family: var(--ui-font-family-mono);
  --ui-type-code-md-size: var(--ui-font-size-sm);
  --ui-type-code-md-weight: var(--ui-font-weight-regular);
  --ui-type-code-md-ih: var(--ui-font-lh-10-normal);
  --ui-type-code-md-tracking: var(--ui-font-track-normal);
  --ui-type-heading-h4-family: var(--ui-font-family-ui);
  --ui-type-heading-h4-size: var(--ui-font-size-lg);
  --ui-type-heading-h4-weight: var(--ui-font-weight-semibold);
  --ui-type-heading-h4-ih: var(--ui-font-lh-20-snug);
  --ui-type-heading-h4-tracking: var(--ui-font-track-normal);
  --ui-type-heading-h5-family: var(--ui-font-family-ui);
  --ui-type-heading-h5-size: var(--ui-font-size-md);
  --ui-type-heading-h5-weight: var(--ui-font-weight-semibold);
  --ui-type-heading-h5-ih: var(--ui-font-lh-20-snug);
  --ui-type-heading-h5-tracking: var(--ui-font-track-normal);
  --ui-type-heading-h6-family: var(--ui-font-family-ui);
  --ui-type-heading-h6-size: var(--ui-font-size-sm);
  --ui-type-heading-h6-weight: var(--ui-font-weight-semibold);
  --ui-type-heading-h6-ih: var(--ui-font-lh-20-snug);
  --ui-type-heading-h6-tracking: var(--ui-font-track-normal);
  --ui-type-body-lg-Medium-family: var(--ui-font-family-ui);
  --ui-type-body-lg-Medium-size: var(--ui-font-size-lg);
  --ui-type-body-lg-Medium-weight: var(--ui-font-weight-medium);
  --ui-type-body-lg-Medium-ih: var(--ui-font-lh-18-normal);
  --ui-type-body-lg-Medium-tracking: var(--ui-font-track-tight);
  --ui-type-body-lg-Semibold-family: var(--ui-font-family-ui);
  --ui-type-body-lg-Semibold-size: var(--ui-font-size-lg);
  --ui-type-body-lg-Semibold-weight: var(--ui-font-weight-semibold);
  --ui-type-body-lg-Semibold-ih: var(--ui-font-lh-18-normal);
  --ui-type-body-lg-Semibold-tracking: var(--ui-font-track-tight);
  --ui-type-body-lg-Bold-family: var(--ui-font-family-ui);
  --ui-type-body-lg-Bold-size: var(--ui-font-size-lg);
  --ui-type-body-lg-Bold-weight: var(--ui-font-weight-bold);
  --ui-type-body-lg-Bold-ih: var(--ui-font-lh-18-normal);
  --ui-type-body-lg-Bold-tracking: var(--ui-font-track-tight);
  --ui-type-body-md-Medium-family: var(--ui-font-family-ui);
  --ui-type-body-md-Medium-size: var(--ui-font-size-md);
  --ui-type-body-md-Medium-weight: var(--ui-font-weight-medium);
  --ui-type-body-md-Medium-ih: var(--ui-font-lh-16-normal);
  --ui-type-body-md-Medium-tracking: var(--ui-font-track-tight);
  --ui-type-body-md-Semibold-family: var(--ui-font-family-ui);
  --ui-type-body-md-Semibold-size: var(--ui-font-size-md);
  --ui-type-body-md-Semibold-weight: var(--ui-font-weight-semibold);
  --ui-type-body-md-Semibold-ih: var(--ui-font-lh-16-normal);
  --ui-type-body-md-Semibold-tracking: var(--ui-font-track-tight);
  --ui-type-body-sm-Medium-family: var(--ui-font-family-ui);
  --ui-type-body-sm-Medium-size: var(--ui-font-size-sm);
  --ui-type-body-sm-Medium-weight: var(--ui-font-weight-medium);
  --ui-type-body-sm-Medium-ih: var(--ui-font-lh-14-normal);
  --ui-type-body-sm-Medium-tracking: var(--ui-font-track-tight);
  --ui-type-body-sm-Semibold-family: var(--ui-font-family-ui);
  --ui-type-body-sm-Semibold-size: var(--ui-font-size-sm);
  --ui-type-body-sm-Semibold-weight: var(--ui-font-weight-semibold);
  --ui-type-body-sm-Semibold-ih: var(--ui-font-lh-14-normal);
  --ui-type-body-sm-Semibold-tracking: var(--ui-font-track-tight);
  --ui-type-body-sm-Bold-family: var(--ui-font-family-ui);
  --ui-type-body-sm-Bold-size: var(--ui-font-size-sm);
  --ui-type-body-sm-Bold-weight: var(--ui-font-weight-bold);
  --ui-type-body-sm-Bold-ih: var(--ui-font-lh-14-normal);
  --ui-type-body-sm-Bold-tracking: var(--ui-font-track-tight);
  --ui-type-label-md-Medium-family: var(--ui-font-family-ui);
  --ui-type-label-md-Medium-size: var(--ui-font-size-sm);
  --ui-type-label-md-Medium-weight: var(--ui-font-weight-medium);
  --ui-type-label-md-Medium-ih: var(--ui-font-lh-14-normal);
  --ui-type-label-md-Medium-tracking: var(--ui-font-track-tight);
  --ui-type-label-md-Semibold-family: var(--ui-font-family-ui);
  --ui-type-label-md-Semibold-size: var(--ui-font-size-sm);
  --ui-type-label-md-Semibold-weight: var(--ui-font-weight-semibold);
  --ui-type-label-md-Semibold-ih: var(--ui-font-lh-14-normal);
  --ui-type-label-md-Semibold-tracking: var(--ui-font-track-tight);
  --ui-type-label-md-Bold-family: var(--ui-font-family-ui);
  --ui-type-label-md-Bold-size: var(--ui-font-size-sm);
  --ui-type-label-md-Bold-weight: var(--ui-font-weight-bold);
  --ui-type-label-md-Bold-ih: var(--ui-font-lh-14-normal);
  --ui-type-label-md-Bold-tracking: var(--ui-font-track-tight);
  --ui-type-body-md-Bold-family: var(--ui-font-family-ui);
  --ui-type-body-md-Bold-size: var(--ui-font-size-md);
  --ui-type-body-md-Bold-weight: var(--ui-font-weight-bold);
  --ui-type-body-md-Bold-ih: var(--ui-font-lh-16-normal);
  --ui-type-body-md-Bold-tracking: var(--ui-font-track-tight);
  --ui-type-body-xs-Regular-family: var(--ui-font-family-ui);
  --ui-type-body-xs-Regular-size: var(--ui-font-size-xs);
  --ui-type-body-xs-Regular-weight: var(--ui-font-weight-regular);
  --ui-type-body-xs-Regular-ih: var(--ui-font-lh-12-normal);
  --ui-type-body-xs-Regular-tracking: var(--ui-font-track-tight);
  --ui-type-body-xs-Medium-family: var(--ui-font-family-ui);
  --ui-type-body-xs-Medium-size: var(--ui-font-size-xs);
  --ui-type-body-xs-Medium-weight: var(--ui-font-weight-medium);
  --ui-type-body-xs-Medium-ih: var(--ui-font-lh-12-normal);
  --ui-type-body-xs-Medium-tracking: var(--ui-font-track-tight);
  --ui-type-body-xs-Semibold-family: var(--ui-font-family-ui);
  --ui-type-body-xs-Semibold-size: var(--ui-font-size-xs);
  --ui-type-body-xs-Semibold-weight: var(--ui-font-weight-semibold);
  --ui-type-body-xs-Semibold-ih: var(--ui-font-lh-12-normal);
  --ui-type-body-xs-Semibold-tracking: var(--ui-font-track-tight);
  --ui-type-body-xs-Bold-family: var(--ui-font-family-ui);
  --ui-type-body-xs-Bold-size: var(--ui-font-size-xs);
  --ui-type-body-xs-Bold-weight: var(--ui-font-weight-bold);
  --ui-type-body-xs-Bold-ih: var(--ui-font-lh-12-normal);
  --ui-type-body-xs-Bold-tracking: var(--ui-font-track-tight);
  --ui-color-bg-canvas-default: var(--ui-color-light-gray-50);
  --ui-color-bg-canvas-inverse: var(--ui-color-dark-gray-900);
  --ui-color-bg-overlay-default: var(--ui-color-black-alpha-40);
  --ui-color-bg-overlay-darker: var(--ui-color-black-alpha-70);
  --ui-color-text-primary: var(--ui-color-dark-gray-700);
  --ui-color-text-secondary: var(--ui-color-dark-gray-300);
  --ui-color-icon-default: var(--ui-color-dark-gray-400);
  --ui-color-text-tertiary: var(--ui-color-dark-gray-100);
  --ui-color-icon-hover: var(--ui-color-dark-gray-600);
  --ui-color-icon-pressed: var(--ui-color-dark-gray-800);
  --ui-color-text-disabled: var(--ui-color-light-gray-500);
  --ui-color-icon-selected: var(--ui-color-blue-600);
  --ui-color-icon-secondary-default: var(--ui-color-dark-gray-200);
  --ui-color-icon-secondary-hover: var(--ui-color-dark-gray-300);
  --ui-color-icon-secondary-pressed: var(--ui-color-dark-gray-500);
  --ui-color-icon-secondary-selected: var(--ui-color-dark-gray-400);
  --ui-color-icon-tertiary-default: var(--ui-color-light-gray-800);
  --ui-color-icon-tertiary-hover: var(--ui-color-light-gray-900);
  --ui-color-icon-tertiary-pressed: var(--ui-color-dark-gray-100);
  --ui-color-icon-tertiary-selected: var(--ui-color-dark-gray-50);
  --ui-color-icon-brand-default: var(--ui-color-blue-400);
  --ui-color-icon-brand-hover: var(--ui-color-blue-500);
  --ui-color-icon-brand-pressed: var(--ui-color-blue-600);
  --ui-color-icon-brand-selected: var(--ui-color-blue-600);
  --ui-color-icon-success-default: var(--ui-color-green-700);
  --ui-color-icon-success-hover: var(--ui-color-green-800);
  --ui-color-icon-success-pressed: var(--ui-color-green-900);
  --ui-color-icon-success-selected: var(--ui-color-green-900);
  --ui-color-icon-warning-default: var(--ui-color-yellow-700);
  --ui-color-icon-warning-hover: var(--ui-color-yellow-800);
  --ui-color-icon-warning-pressed: var(--ui-color-yellow-900);
  --ui-color-icon-warning-selected: var(--ui-color-yellow-900);
  --ui-color-icon-danger-default: var(--ui-color-red-700);
  --ui-color-icon-danger-hover: var(--ui-color-red-800);
  --ui-color-icon-danger-pressed: var(--ui-color-red-900);
  --ui-color-icon-danger-selected: var(--ui-color-red-900);
  --ui-color-icon-info-default: var(--ui-color-cyan-700);
  --ui-color-icon-all-colors-red: var(--ui-color-red-500);
  --ui-color-icon-all-colors-orange: var(--ui-color-orange-500);
  --ui-color-icon-all-colors-yellow: var(--ui-color-yellow-500);
  --ui-color-icon-all-colors-lime: var(--ui-color-lime-500);
  --ui-color-icon-all-colors-green: var(--ui-color-green-500);
  --ui-color-icon-all-colors-cyan: var(--ui-color-cyan-500);
  --ui-color-icon-all-colors-azure: var(--ui-color-azure-500);
  --ui-color-icon-all-colors-blue: var(--ui-color-blue-500);
  --ui-color-icon-all-colors-violet: var(--ui-color-violet-500);
  --ui-color-icon-all-colors-magenta: var(--ui-color-magenta-500);
  --ui-color-icon-all-colors-rose: var(--ui-color-rose-500);
  --ui-color-icon-info-hover: var(--ui-color-cyan-800);
  --ui-color-icon-info-pressed: var(--ui-color-cyan-900);
  --ui-color-icon-info-selected: var(--ui-color-cyan-900);
  --ui-color-icon-disabled: var(--ui-color-light-gray-500);
  --ui-color-icon-on-color: var(--ui-color-white);
  --ui-color-border-default: var(--ui-color-light-gray-400);
  --ui-color-border-hover: var(--ui-color-light-gray-900);
  --ui-color-border-pressed: var(--ui-color-dark-gray-500);
  --ui-color-border-focus: var(--ui-color-blue-400);
  --ui-color-border-disabled: var(--ui-color-light-gray-300);
  --ui-color-border-subtle: var(--ui-color-light-gray-300);
  --ui-color-border-on-color: var(--ui-color-white);
  --ui-color-border-strong: var(--ui-color-dark-gray-400);
  --ui-color-border-brand: var(--ui-color-blue-500);
  --ui-color-border-success: var(--ui-color-green-500);
  --ui-color-border-warning: var(--ui-color-yellow-500);
  --ui-color-border-danger: var(--ui-color-red-500);
  --ui-color-border-info: var(--ui-color-cyan-500);
  --ui-color-text-text-on-color: var(--ui-color-white);
  --ui-color-bg-surface-default: var(--ui-color-white);
  --ui-color-bg-surface-hover: var(--ui-color-light-gray-50);
  --ui-color-bg-surface-pressed: var(--ui-color-light-gray-200);
  --ui-color-bg-surface-selected: var(--ui-color-light-gray-100);
  --ui-color-bg-surface-dissabled: var(--ui-color-light-gray-50);
  --ui-color-bg-surface-secondary-default: var(--ui-color-light-gray-50);
  --ui-color-bg-surface-secondary-hover: var(--ui-color-light-gray-100);
  --ui-color-bg-surface-secondary-pressed: var(--ui-color-light-gray-400);
  --ui-color-bg-surface-secondary-selected: var(--ui-color-light-gray-300);
  --ui-color-bg-surface-tertiary-default: var(--ui-color-light-gray-200);
  --ui-color-bg-surface-tertiary-hover: var(--ui-color-light-gray-300);
  --ui-color-bg-surface-tertiary-pressed: var(--ui-color-light-gray-500);
  --ui-color-bg-surface-tertiary-selected: var(--ui-color-light-gray-400);
  --ui-color-bg-surface-brand-default: var(--ui-color-blue-50);
  --ui-color-bg-surface-brand-hover: var(--ui-color-blue-100);
  --ui-color-bg-surface-brand-pressed: var(--ui-color-blue-300);
  --ui-color-bg-surface-brand-selected: var(--ui-color-blue-200);
  --ui-color-bg-surface-brand-disabled: var(--ui-color-blue-50);
  --ui-color-bg-surface-success-default: var(--ui-color-green-50);
  --ui-color-bg-surface-success-hover: var(--ui-color-green-100);
  --ui-color-bg-surface-success-pressed: var(--ui-color-green-300);
  --ui-color-bg-surface-success-selected: var(--ui-color-green-200);
  --ui-color-bg-surface-success-disabled: var(--ui-color-green-50);
  --ui-color-bg-surface-warning-default: var(--ui-color-yellow-50);
  --ui-color-bg-surface-warning-hover: var(--ui-color-yellow-100);
  --ui-color-bg-surface-warning-pressed: var(--ui-color-yellow-300);
  --ui-color-bg-surface-warning-selected: var(--ui-color-yellow-200);
  --ui-color-bg-surface-warning-disabled: var(--ui-color-yellow-50);
  --ui-color-bg-surface-danger-default: var(--ui-color-red-50);
  --ui-color-bg-surface-danger-hover: var(--ui-color-red-100);
  --ui-color-bg-surface-danger-pressed: var(--ui-color-red-300);
  --ui-color-bg-surface-danger-selected: var(--ui-color-red-200);
  --ui-color-bg-surface-danger-disabled: var(--ui-color-red-50);
  --ui-color-bg-fill-default: var(--ui-color-white);
  --ui-color-bg-fill-hover: var(--ui-color-light-gray-100);
  --ui-color-bg-fill-pressed: var(--ui-color-light-gray-400);
  --ui-color-bg-fill-selected: var(--ui-color-light-gray-200);
  --ui-color-bg-fill-dissabled: var(--ui-color-light-gray-50);
  --ui-color-bg-fill-secondary-default: var(--ui-color-light-gray-50);
  --ui-color-bg-fill-secondary-hover: var(--ui-color-light-gray-200);
  --ui-color-bg-fill-secondary-pressed: var(--ui-color-light-gray-500);
  --ui-color-bg-fill-secondary-selected: var(--ui-color-light-gray-300);
  --ui-color-bg-fill-tertiary-default: var(--ui-color-light-gray-100);
  --ui-color-bg-fill-tertiary-hover: var(--ui-color-light-gray-300);
  --ui-color-bg-fill-tertiary-pressed: var(--ui-color-light-gray-600);
  --ui-color-bg-fill-tertiary-selected: var(--ui-color-light-gray-400);
  --ui-color-bg-fill-brand-default: var(--ui-color-blue-500);
  --ui-color-bg-fill-brand-hover: var(--ui-color-blue-600);
  --ui-color-bg-fill-brand-pressed: var(--ui-color-blue-700);
  --ui-color-bg-fill-brand-selected: var(--ui-color-blue-400);
  --ui-color-bg-fill-brand-disabled: var(--ui-color-blue-200);
  --ui-color-bg-fill-success-default: var(--ui-color-green-500);
  --ui-color-bg-fill-success-hover: var(--ui-color-green-600);
  --ui-color-bg-fill-success-pressed: var(--ui-color-green-700);
  --ui-color-bg-fill-success-selected: var(--ui-color-green-400);
  --ui-color-bg-fill-success-disabled: var(--ui-color-green-200);
  --ui-color-bg-fill-warning-default: var(--ui-color-yellow-500);
  --ui-color-bg-fill-warning-hover: var(--ui-color-yellow-600);
  --ui-color-bg-fill-warning-pressed: var(--ui-color-yellow-700);
  --ui-color-bg-fill-warning-selected: var(--ui-color-yellow-400);
  --ui-color-bg-fill-warning-disabled: var(--ui-color-yellow-200);
  --ui-color-bg-fill-danger-default: var(--ui-color-red-500);
  --ui-color-bg-fill-danger-hover: var(--ui-color-red-600);
  --ui-color-bg-fill-danger-pressed: var(--ui-color-red-700);
  --ui-color-bg-fill-danger-selected: var(--ui-color-red-400);
  --ui-color-bg-fill-danger-pressed-2: var(--ui-color-red-200);
  --ui-color-bg-fill-info-default: var(--ui-color-cyan-500);
  --ui-color-bg-fill-info-hover: var(--ui-color-cyan-600);
  --ui-color-bg-fill-info-pressed: var(--ui-color-cyan-700);
  --ui-color-bg-fill-info-selected: var(--ui-color-cyan-400);
  --ui-color-bg-fill-info-pressed-2: var(--ui-color-cyan-200);
  --ui-color-text-on-canvas-Inverse: var(--ui-color-white);
  --ui-color-text-brand-default: var(--ui-color-blue-700);
  --ui-color-text-brand-hover: var(--ui-color-blue-800);
  --ui-color-text-brand-pressed: var(--ui-color-blue-900);
  --ui-color-text-brand-selected: var(--ui-color-blue-900);
  --ui-color-bg-surface-info-default: var(--ui-color-cyan-50);
  --ui-color-bg-surface-info-hover: var(--ui-color-cyan-100);
  --ui-color-bg-surface-info-pressed: var(--ui-color-cyan-300);
  --ui-color-bg-surface-info-selected: var(--ui-color-cyan-200);
  --ui-color-bg-surface-info-disabled: var(--ui-color-cyan-50);
  --ui-color-text-success-default: var(--ui-color-green-700);
  --ui-color-text-success-hover: var(--ui-color-green-800);
  --ui-color-text-success-pressed: var(--ui-color-green-900);
  --ui-color-text-success-selected: var(--ui-color-green-900);
  --ui-color-text-warning-default: var(--ui-color-yellow-700);
  --ui-color-text-warning-hover: var(--ui-color-yellow-800);
  --ui-color-text-warning-pressed: var(--ui-color-yellow-900);
  --ui-color-text-warning-selected: var(--ui-color-yellow-900);
  --ui-color-text-danger-default: var(--ui-color-red-700);
  --ui-color-text-danger-hover: var(--ui-color-red-800);
  --ui-color-text-danger-pressed: var(--ui-color-red-900);
  --ui-color-text-danger-selected: var(--ui-color-red-900);
  --ui-color-text-info-default: var(--ui-color-cyan-700);
  --ui-color-text-link-default: var(--ui-color-blue-600);
  --ui-color-text-all-colors-red: var(--ui-color-red-700);
  --ui-color-text-all-colors-orange: var(--ui-color-orange-700);
  --ui-color-text-all-colors-yellow: var(--ui-color-yellow-700);
  --ui-color-text-all-colors-lime: var(--ui-color-lime-700);
  --ui-color-text-all-colors-green: var(--ui-color-green-700);
  --ui-color-text-all-colors-cyan: var(--ui-color-cyan-700);
  --ui-color-text-all-colors-azure: var(--ui-color-azure-700);
  --ui-color-text-all-colors-blue: var(--ui-color-blue-700);
  --ui-color-text-all-colors-violet: var(--ui-color-violet-700);
  --ui-color-text-all-colors-magenta: var(--ui-color-magenta-700);
  --ui-color-text-all-colors-rose: var(--ui-color-rose-700);
  --ui-color-text-link-hover: var(--ui-color-blue-700);
  --ui-color-text-link-pressed: var(--ui-color-blue-800);
  --ui-color-text-link-visited: var(--ui-color-violet-700);
  --ui-color-text-info-hover: var(--ui-color-cyan-800);
  --ui-color-text-info-pressed: var(--ui-color-cyan-900);
  --ui-color-text-info-selected: var(--ui-color-cyan-900);
  --ui-color-bg-fill-all-colors-red: var(--ui-color-red-500);
  --ui-color-bg-fill-all-colors-orange: var(--ui-color-orange-500);
  --ui-color-bg-fill-all-colors-yellow: var(--ui-color-yellow-500);
  --ui-color-bg-fill-all-colors-lime: var(--ui-color-lime-500);
  --ui-color-bg-surface-all-colors-red: var(--ui-color-red-100);
  --ui-color-bg-surface-all-colors-orange: var(--ui-color-orange-100);
  --ui-color-bg-fill-all-colors-green: var(--ui-color-green-500);
  --ui-color-bg-surface-all-colors-yellow: var(--ui-color-yellow-100);
  --ui-color-bg-fill-all-colors-cyan: var(--ui-color-cyan-500);
  --ui-color-bg-surface-all-colors-lime: var(--ui-color-lime-100);
  --ui-color-bg-fill-all-colors-azure: var(--ui-color-azure-500);
  --ui-color-bg-surface-all-colors-green: var(--ui-color-green-100);
  --ui-color-bg-fill-all-colors-blue: var(--ui-color-blue-500);
  --ui-color-bg-fill-all-colors-violet: var(--ui-color-violet-500);
  --ui-color-bg-surface-all-colors-cyan: var(--ui-color-cyan-100);
  --ui-color-bg-fill-all-colors-magenta: var(--ui-color-magenta-500);
  --ui-color-bg-fill-all-colors-rose: var(--ui-color-rose-500);
  --ui-color-bg-surface-all-colors-azure: var(--ui-color-azure-100);
  --ui-color-bg-surface-all-colors-blue: var(--ui-color-blue-100);
  --ui-color-bg-surface-all-colors-violet: var(--ui-color-violet-100);
  --ui-color-bg-surface-all-colors-magenta: var(--ui-color-magenta-100);
  --ui-color-bg-surface-all-colors-rose: var(--ui-color-rose-100);
  --ui-color-border-all-colors-red: var(--ui-color-red-400);
  --ui-color-border-all-colors-orange: var(--ui-color-orange-400);
  --ui-color-border-all-colors-yellow: var(--ui-color-yellow-400);
  --ui-color-border-all-colors-lime: var(--ui-color-lime-400);
  --ui-color-border-all-colors-green: var(--ui-color-green-400);
  --ui-color-border-all-colors-cyan: var(--ui-color-cyan-400);
  --ui-color-border-all-colors-azure: var(--ui-color-azure-400);
  --ui-color-border-all-colors-blue: var(--ui-color-blue-400);
  --ui-color-border-all-colors-violet: var(--ui-color-violet-400);
  --ui-color-border-all-colors-magenta: var(--ui-color-magenta-400);
  --ui-color-border-all-colors-rose: var(--ui-color-rose-400);
  --ui-Positive-space_0: var(--ui-positive-Value_0);
  --ui-Positive-space_2: var(--ui-positive-Value_50);
  --ui-Positive-space_4: var(--ui-positive-Value_100);
  --ui-Positive-space_6: var(--ui-positive-Value_150);
  --ui-Positive-space_8: var(--ui-positive-Value_200);
  --ui-Positive-space_10: var(--ui-positive-Value_250);
  --ui-Positive-space_12: var(--ui-positive-Value_300);
  --ui-Positive-space_16: var(--ui-positive-Value_400);
  --ui-Positive-space_20: var(--ui-positive-Value_500);
  --ui-Positive-space_24: var(--ui-positive-Value_600);
  --ui-Positive-space_28: var(--ui-positive-Value_700);
  --ui-Positive-space_32: var(--ui-positive-Value_800);
  --ui-Positive-space_40: var(--ui-positive-Value_1000);
  --ui-Positive-space_48: var(--ui-positive-Value_1200);
  --ui-Positive-space_56: var(--ui-positive-Value_1400);
  --ui-Positive-space_64: var(--ui-positive-Value_1600);
  --ui-Positive-space_80: var(--ui-positive-Value_2000);
  --ui-Positive-space_96: var(--ui-positive-Value_2400);
  --ui-Negative-space_0: var(--ui-negative-Value_0);
  --ui-Negative-space_2: var(--ui-negative-Value_50);
  --ui-Negative-space_4: var(--ui-negative-Value_100);
  --ui-Negative-space_6: var(--ui-negative-Value_150);
  --ui-Negative-space_8: var(--ui-negative-Value_200);
  --ui-Negative-space_10: var(--ui-negative-Value_250);
  --ui-Negative-space_12: var(--ui-negative-Value_300);
  --ui-Negative-space_16: var(--ui-negative-Value_400);
  --ui-Negative-space_20: var(--ui-negative-Value_500);
  --ui-Negative-space_24: var(--ui-negative-Value_600);
  --ui-Negative-space_28: var(--ui-negative-Value_700);
  --ui-Negative-space_32: var(--ui-negative-Value_800);
  --ui-Negative-space_40: var(--ui-negative-Value_1000);
  --ui-Negative-space_48: var(--ui-negative-Value_1200);
  --ui-Negative-space_56: var(--ui-negative-Value_1400);
  --ui-Negative-space_64: var(--ui-negative-Value_1600);
  --ui-Negative-space_80: var(--ui-negative-Value_2000);
  --ui-Negative-space_96: var(--ui-negative-Value_2400);
  --ui-size-control-xxs: var(--ui-positive-Value_500);
  --ui-size-control-xs: var(--ui-positive-Value_800);
  --ui-size-control-sm: var(--ui-positive-Value_900);
  --ui-size-control-md: var(--ui-positive-Value_1000);
  --ui-size-control-lg: var(--ui-positive-Value_1200);
  --ui-size-Icon-xs: var(--ui-positive-Value_250);
  --ui-size-Icon-sm: var(--ui-positive-Value_400);
  --ui-size-Icon-md: var(--ui-positive-Value_500);
  --ui-size-Icon-lg: var(--ui-positive-Value_600);
  --ui-size-Icon-xl: var(--ui-positive-Value_800);
  --ui-size-avatar-xxs: var(--ui-positive-Value_400);
  --ui-size-avatar-xs: var(--ui-positive-Value_600);
  --ui-size-row-regular: var(--ui-positive-Value_800);
  --ui-size-row-compact: var(--ui-positive-Value_1000);
  --ui-size-avatar-sm: var(--ui-positive-Value_800);
  --ui-size-avatar-md: var(--ui-positive-Value_1000);
  --ui-size-avatar-lg: var(--ui-positive-Value_1200);
  --ui-size-avatar-xl: var(--ui-positive-Value_1600);
  --ui-size-Image-xs: var(--ui-positive-Value_600);
  --ui-size-Image-sm: var(--ui-positive-Value_1000);
  --ui-size-Image-md: var(--ui-positive-Value_1600);
  --ui-size-Image-lg: var(--ui-positive-Value_3200);
  --ui-size-Image-full: var(--ui-positive-Value_full);
  --ui-width-0: var(--ui-positive-Value_0);
  --ui-width-1: var(--ui-positive-Value_25);
  --ui-width-2: var(--ui-positive-Value_50);
  --ui-radius_0: var(--ui-positive-Value_0);
  --ui-radius_2: var(--ui-positive-Value_50);
  --ui-radius_4: var(--ui-positive-Value_100);
  --ui-radius_6: var(--ui-positive-Value_150);
  --ui-radius_8: var(--ui-positive-Value_200);
  --ui-radius_10: var(--ui-positive-Value_250);
  --ui-radius_12: var(--ui-positive-Value_300);
  --ui-radius_16: var(--ui-positive-Value_400);
  --ui-radius_24: var(--ui-positive-Value_600);
  --ui-radius_full: var(--ui-positive-Value_full);
  --ui-radius-control-na: var(--ui-positive-Value_0);
  --ui-radius-control-xs: var(--ui-radius_6);
  --ui-radius-control-sm: var(--ui-radius_8);
  --ui-radius-control-md: var(--ui-radius_8);
  --ui-radius-control-lg: var(--ui-radius_10);
  --ui-radius-control-pill: var(--ui-radius_full);
  --ui-radius-surface-cuadrado: var(--ui-positive-Value_0);
  --ui-radius-surface-forms: var(--ui-radius_2);
  --ui-radius-surface-card: var(--ui-radius_12);
  --ui-radius-surface-modal: var(--ui-radius_16);
  --ui-radius-surface-sheet: var(--ui-radius_16);
  --ui-radius-surface-popover: var(--ui-radius_8);
  --ui-radius-surface-tooltip: var(--ui-radius_6);
  --ui-radius-image-na: var(--ui-positive-Value_0);
  --ui-radius-image-sm: var(--ui-radius_8);
  --ui-radius-image-md: var(--ui-radius_16);
  --ui-radius-image-pill: var(--ui-radius_full);
  --ui-shadow-01-Color: var(--ui-color-black-alpha-10);
  --ui-shadow-02-Color: var(--ui-color-black-alpha-20);
  --ui-shadow-03-Color: var(--ui-color-black-alpha-20);
  --ui-shadow-04-Color: var(--ui-color-black-alpha-30);
  --ui-shadow-05-Color: var(--ui-color-black-alpha-30);
  --ui-Layer-App-header: var(--ui-z-shell);
  --ui-Layer-nav-dropdown: var(--ui-z-dropdown);
  --ui-Layer-surface-popover: var(--ui-z-popover);
  --ui-Layer-surface-tooltip: var(--ui-z-tooltip);
  --ui-Layer-dialog-backdrop: var(--ui-z-modalBackdrop);
  --ui-Layer-dialog-modal: var(--ui-z-modal);
  --ui-Layer-feedback-toast: var(--ui-z-toast);
  --ui-Layer-system-overlay: var(--ui-z-overlay);

  /* ========================================= */
  /* VARIABLES LEGACY */
  /* Variables CSS del sistema anterior */
  /* Se mantienen para compatibilidad con código existente */
  /* ========================================= */

  /* Colores Legacy - Azul */
  --ui-color-blue-50-legacy: #ebeef9;
  --ui-color-blue-100-legacy: #c1cbec;
  --ui-color-blue-200-legacy: #a3b2e2;
  --ui-color-blue-300-legacy: #788fd5;
  --ui-color-blue-400-legacy: #5e79cd;
  --ui-color-blue-500-legacy: #3658c1;
  --ui-color-blue-600-legacy: #3150b0;
  --ui-color-blue-700-legacy: #263e89;
  --ui-color-blue-800-legacy: #1e306a;
  --ui-color-blue-900-legacy: #172551;

  /* Colores Legacy - Verde */
  --ui-color-green-50-legacy: #f0f9f0;
  --ui-color-green-100-legacy: #b1e0cc;
  --ui-color-green-200-legacy: #8bd1b3;
  --ui-color-green-300-legacy: #56bc90;
  --ui-color-green-400-legacy: #35af7a;
  --ui-color-green-500-legacy: #039b59;
  --ui-color-green-600-legacy: #038d51;
  --ui-color-green-700-legacy: #026e3f;
  --ui-color-green-800-legacy: #025531;
  --ui-color-green-900-legacy: #014125;

  /* Colores Legacy - Neutral */
  --ui-color-neutral-50-legacy: #f0f0f0;
  --ui-color-neutral-100-legacy: #d1d1d1;
  --ui-color-neutral-200-legacy: #bbbbbb;
  --ui-color-neutral-300-legacy: #9c9c9c;
  --ui-color-neutral-400-legacy: #898989;
  --ui-color-neutral-500-legacy: #6b6b6b;
  --ui-color-neutral-600-legacy: #616161;
  --ui-color-neutral-700-legacy: #4c4c4c;
  --ui-color-neutral-800-legacy: #3b3b3b;
  --ui-color-neutral-900-legacy: #2d2d2d;

  /* Colores Legacy - Rojo */
  --ui-color-red-50-legacy: #f9eae9;
  --ui-color-red-100-legacy: #edbeba;
  --ui-color-red-200-legacy: #e59f98;
  --ui-color-red-300-legacy: #d97369;
  --ui-color-red-400-legacy: #d1584c;
  --ui-color-red-500-legacy: #c62e1f;
  --ui-color-red-600-legacy: #b42a1c;
  --ui-color-red-700-legacy: #8d2116;
  --ui-color-red-800-legacy: #6d1911;
  --ui-color-red-900-legacy: #53130d;

  /* Colores Legacy - Naranja */
  --ui-color-orange-50-legacy: #fcf3e9;
  --ui-color-orange-100-legacy: #f4daba;
  --ui-color-orange-200-legacy: #efc999;
  --ui-color-orange-300-legacy: #e8b06a;
  --ui-color-orange-400-legacy: #e3a14d;
  --ui-color-orange-500-legacy: #dc8921;
  --ui-color-orange-600-legacy: #c87d1e;
  --ui-color-orange-700-legacy: #9c6117;
  --ui-color-orange-800-legacy: #794b12;
  --ui-color-orange-900-legacy: #5c3a0e;

  /* Colores Legacy - Amarillo */
  --ui-color-yellow-50-legacy: #fcfbec;
  --ui-color-yellow-100-legacy: #f6f2c3;
  --ui-color-yellow-200-legacy: #f1eca6;
  --ui-color-yellow-300-legacy: #ebe47d;
  --ui-color-yellow-400-legacy: #e7de64;
  --ui-color-yellow-500-legacy: #e1d63d;
  --ui-color-yellow-600-legacy: #cdc338;
  --ui-color-yellow-700-legacy: #a0982b;
  --ui-color-yellow-800-legacy: #7c7622;
  --ui-color-yellow-900-legacy: #5f5a1a;

  /* Colores Legacy - Azul Oscuro */
  --ui-color-blue-dark-50-legacy: #e8f0f5;
  --ui-color-blue-dark-100-legacy: #b8d0df;
  --ui-color-blue-dark-200-legacy: #96b9d0;
  --ui-color-blue-dark-300-legacy: #6698ba;
  --ui-color-blue-dark-400-legacy: #4985ad;
  --ui-color-blue-dark-500-legacy: #1b6698;
  --ui-color-blue-dark-600-legacy: #195d8a;
  --ui-color-blue-dark-700-legacy: #13486c;
  --ui-color-blue-dark-800-legacy: #0f3854;
  --ui-color-blue-dark-900-legacy: #0b2b40;

  /* Colores Legacy - Azul Claro */
  --ui-color-blue-light-50-legacy: #e7f6fd;
  --ui-color-blue-light-100-legacy: #b4e3f8;
  --ui-color-blue-light-200-legacy: #90d6f5;
  --ui-color-blue-light-300-legacy: #5ec3f0;
  --ui-color-blue-light-400-legacy: #3eb7ed;
  --ui-color-blue-light-500-legacy: #0ea5e9;
  --ui-color-blue-light-600-legacy: #0d96d4;
  --ui-color-blue-light-700-legacy: #0a75a5;
  --ui-color-blue-light-800-legacy: #085b80;
  --ui-color-blue-light-900-legacy: #064562;

  /* Colores Legacy - Gris */
  --ui-color-gray-50-legacy: #f9fafb;
  --ui-color-gray-100-legacy: #f3f4f6;
  --ui-color-gray-200-legacy: #e5e7eb;
  --ui-color-gray-300-legacy: #d1d5db;
  --ui-color-gray-400-legacy: #9ca3af;
  --ui-color-gray-500-legacy: #6b7280;
  --ui-color-gray-600-legacy: #4b5563;
  --ui-color-gray-700-legacy: #374151;
  --ui-color-gray-800-legacy: #1f2937;
  --ui-color-gray-900-legacy: #111827;

  /* === CUSTOM ALERT BACKGROUND COLORS === */
  /* Variables personalizadas para fondos de alertas según especificación */
  --ui-color-alert-info-bg: #f1f4fe;
  --ui-color-alert-info-border: #627dd0;
  --ui-color-alert-info-text: #2d49a1;
  --ui-color-alert-info-icon: #2d49a1;

  --ui-color-alert-success-bg: #f1fef6;
  --ui-color-alert-success-border: #53d382;
  --ui-color-alert-success-text: #1ca34e;
  --ui-color-alert-success-icon: #1ca34e;

  --ui-color-alert-danger-bg: #fff3f1;
  --ui-color-alert-danger-border: #fc3d38;
  --ui-color-alert-danger-text: #da3430;
  --ui-color-alert-danger-icon: #da3430;

  --ui-color-alert-warning-bg: #fefbf1;
  --ui-color-alert-warning-border: #efc43f;
  --ui-color-alert-warning-text: #b58b06;
  --ui-color-alert-warning-icon: #b58b06;
}