@font-face {
  font-family: 'MiSans';
  font-display: swap;
  src: url('MiSans-Normal.ttf') format('truetype');
}

:root {

  --mxos-indigo-50: #EEF2FF;
  --mxos-indigo-100: #E0E7FF;
  --mxos-indigo-200: #C7D2FE;
  --mxos-indigo-300: #A5B4FC;
  --mxos-indigo-400: #818CF8;
  --mxos-indigo-500: #6366F1;
  --mxos-indigo-600: #4F46E5;
  --mxos-indigo-700: #4338CA;
  --mxos-indigo-800: #3730A3;
  --mxos-indigo-900: #312E81;

  --mxos-orange-50: #FFF7ED;
  --mxos-orange-100: #FFEDD5;
  --mxos-orange-200: #FED7AA;
  --mxos-orange-300: #FDBA74;
  --mxos-orange-400: #FB923C;
  --mxos-orange-500: #F97316;
  --mxos-orange-600: #EA580C;
  --mxos-orange-700: #C2410C;
  --mxos-orange-800: #9A3412;
  --mxos-orange-900: #7C2D12;

  --mxos-gray-50: #FAFAFA;
  --mxos-gray-100: #F4F4F5;
  --mxos-gray-200: #E4E4E7;
  --mxos-gray-300: #D4D4D8;
  --mxos-gray-400: #A1A1AA;
  --mxos-gray-500: #71717A;
  --mxos-gray-600: #52525B;
  --mxos-gray-700: #3F3F46;
  --mxos-gray-800: #27272A;
  --mxos-gray-900: #0A0A0A;

  --mxos-green-50: #ECFDF5;
  --mxos-green-100: #D1FAE5;
  --mxos-green-200: #A7F3D0;
  --mxos-green-300: #6EE7B7;
  --mxos-green-400: #34D399;
  --mxos-green-500: #10B981;
  --mxos-green-600: #059669;
  --mxos-green-700: #047857;
  --mxos-green-800: #065F46;
  --mxos-green-900: #064E3B;

  --mxos-amber-50: #FFFBEB;
  --mxos-amber-100: #FEF3C7;
  --mxos-amber-200: #FDE68A;
  --mxos-amber-300: #FCD34D;
  --mxos-amber-400: #FBBF24;
  --mxos-amber-500: #F59E0B;
  --mxos-amber-600: #D97706;
  --mxos-amber-700: #B45309;
  --mxos-amber-800: #92400E;
  --mxos-amber-900: #78350F;

  --mxos-rose-50: #FFF1F2;
  --mxos-rose-100: #FFE4E6;
  --mxos-rose-200: #FECDD3;
  --mxos-rose-300: #FDA4AF;
  --mxos-rose-400: #FB7185;
  --mxos-rose-500: #F43F5E;
  --mxos-rose-600: #E11D48;
  --mxos-rose-700: #BE123C;
  --mxos-rose-800: #9F1239;
  --mxos-rose-900: #881337;

  --mxos-purple-50: #F5F3FF;
  --mxos-purple-100: #EDE9FE;
  --mxos-purple-200: #DDD6FE;
  --mxos-purple-300: #C4B5FD;
  --mxos-purple-400: #A78BFA;
  --mxos-purple-500: #8B5CF6;
  --mxos-purple-600: #7C3AED;
  --mxos-purple-700: #6D28D9;
  --mxos-purple-800: #5B21B6;
  --mxos-purple-900: #4C1D95;

  --mxos-cyan-50: #ECFEFF;
  --mxos-cyan-100: #CFFAFE;
  --mxos-cyan-200: #A5F3FC;
  --mxos-cyan-300: #67E8F9;
  --mxos-cyan-400: #22D3EE;
  --mxos-cyan-500: #06B6D4;
  --mxos-cyan-600: #0891B2;
  --mxos-cyan-700: #0E7490;
  --mxos-cyan-800: #155E75;
  --mxos-cyan-900: #164E63;

  --primary: var(--mxos-indigo-600);
  --accent: var(--mxos-orange-500);
  --bg: #F8FAFC;
  --fg: #0F172A;
  --muted: var(--mxos-gray-500);
  --rule: var(--mxos-gray-200);
  --link: var(--mxos-cyan-600);
  --surface: #FFFFFF;
  --surface-container-low: var(--mxos-gray-50);
  --surface-container: var(--mxos-gray-100);
  --surface-container-high: var(--mxos-gray-200);

  --color-primary: var(--primary);
  --color-accent: var(--accent);
  --color-background: var(--bg);
  --color-foreground: var(--fg);
  --color-surface: var(--surface);
  --color-surface-container-low: var(--surface-container-low);
  --color-muted: var(--muted);
  --color-border: var(--rule);
  --color-link: var(--link);
  --color-success: var(--mxos-green-600);
  --color-warning: var(--mxos-amber-600);
  --color-error: var(--mxos-rose-600);
  --color-info: var(--mxos-purple-600);
  --font-display: 'MiSans', sans-serif;
  --font-body: 'MiSans', sans-serif;
  --font-mono: 'MiSans', sans-serif;
  --font-size-display: 48px;
  --font-size-h1: 36px;
  --font-size-h2: 28px;
  --font-size-h3: 22px;
  --font-size-h4: 18px;
  --font-size-body: 16px;
  --font-size-lead: 18px;
  --font-size-caption: 13px;
  --font-size-mono: 14px;
  --font-weight-display: 700;
  --font-weight-h1: 700;
  --font-weight-h2: 600;
  --font-weight-h3: 600;
  --font-weight-h4: 600;
  --font-weight-body: 400;
  --font-weight-lead: 400;
  --font-weight-caption: 400;
  --font-weight-mono: 400;
  --line-height-display: 1.1;
  --line-height-h1: 1.2;
  --line-height-h2: 1.25;
  --line-height-h3: 1.3;
  --line-height-h4: 1.4;
  --line-height-body: 1.6;
  --line-height-lead: 1.7;
  --line-height-caption: 1.5;
  --line-height-mono: 1.6;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --size-button-sm: 32px;
  --size-button-md: 40px;
  --size-button-lg: 48px;
  --size-input-height: 36px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --shadow-1: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-2: 0 4px 6px rgba(15,23,42,0.08);
  --shadow-3: 0 8px 16px rgba(15,23,42,0.10);
  --shadow-4: 0 16px 32px rgba(15,23,42,0.14);
  --shadow-5: 0 24px 48px rgba(15,23,42,0.20);
}
.dark {
  --bg: #0F1117;
  --fg: #F1F5F9;
  --muted: #94A3B8;
  --rule: #334155;
  --surface: #1E293B;
  --surface-container-low: #1A1F2E;
  --surface-container: #1E293B;
  --surface-container-high: #262D3D;
  --color-background: var(--bg);
  --color-foreground: var(--fg);
  --color-surface: var(--surface);
  --color-surface-container-low: var(--surface-container-low);
  --color-muted: var(--muted);
  --color-border: var(--rule);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-2: 0 4px 6px rgba(0,0,0,0.35);
  --shadow-3: 0 8px 16px rgba(0,0,0,0.40);
  --shadow-4: 0 16px 32px rgba(0,0,0,0.45);
  --shadow-5: 0 24px 48px rgba(0,0,0,0.50);
}
.mxos-display { font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: var(--line-height-display); letter-spacing: -0.02em; } .mxos-h1 { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; line-height: var(--line-height-h1); } .mxos-h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: var(--line-height-h2); }
.mxos-h3 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; line-height: var(--line-height-h3); } .mxos-h4 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: var(--line-height-h4); } .mxos-body { font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: var(--line-height-body); }
.mxos-lead { font-family: var(--font-body); font-size: 1.125rem; font-weight: 400; line-height: var(--line-height-lead); } .mxos-caption { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; line-height: var(--line-height-caption); } .mxos-mono { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 400; line-height: var(--line-height-mono); }