/* @melodicdev/components — melodic.css
 * Includes: Phosphor icon fonts, design tokens, light theme, dark theme.
 * Source: https://github.com/MelodicDevelopment/melodic
 */

/* ─── Phosphor Icon Fonts ─────────────────────────────────────────────────── */

@font-face {
	font-family: 'Phosphor-Bold';
	src:
		url('./fonts/phosphor/Phosphor-Bold.woff2') format('woff2'),
		url('./fonts/phosphor/Phosphor-Bold.woff') format('woff'),
		url('./fonts/phosphor/Phosphor-Bold.ttf') format('truetype'),
		url('./fonts/phosphor/Phosphor-Bold.svg#Phosphor-Bold') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: 'Phosphor-Fill';
	src:
		url('./fonts/phosphor/Phosphor-Fill.woff2') format('woff2'),
		url('./fonts/phosphor/Phosphor-Fill.woff') format('woff'),
		url('./fonts/phosphor/Phosphor-Fill.ttf') format('truetype'),
		url('./fonts/phosphor/Phosphor-Fill.svg#Phosphor-Fill') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: 'Phosphor-Light';
	src:
		url('./fonts/phosphor/Phosphor-Light.woff2') format('woff2'),
		url('./fonts/phosphor/Phosphor-Light.woff') format('woff'),
		url('./fonts/phosphor/Phosphor-Light.ttf') format('truetype'),
		url('./fonts/phosphor/Phosphor-Light.svg#Phosphor-Light') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: 'Phosphor';
	src:
		url('./fonts/phosphor/Phosphor.woff2') format('woff2'),
		url('./fonts/phosphor/Phosphor.woff') format('woff'),
		url('./fonts/phosphor/Phosphor.ttf') format('truetype'),
		url('./fonts/phosphor/Phosphor.svg#Phosphor') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: 'Phosphor-Thin';
	src:
		url('./fonts/phosphor/Phosphor-Thin.woff2') format('woff2'),
		url('./fonts/phosphor/Phosphor-Thin.woff') format('woff'),
		url('./fonts/phosphor/Phosphor-Thin.ttf') format('truetype'),
		url('./fonts/phosphor/Phosphor-Thin.svg#Phosphor-Thin') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

.ph-bold {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'Phosphor-Bold' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Enable Ligatures ================ */
	letter-spacing: 0;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga=1';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga' 1;
	font-feature-settings: 'liga';
	-webkit-font-variant-ligatures: discretionary-ligatures;
	font-variant-ligatures: discretionary-ligatures;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ph-fill {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'Phosphor-Fill' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Enable Ligatures ================ */
	letter-spacing: 0;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga=1';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga' 1;
	font-feature-settings: 'liga';
	-webkit-font-variant-ligatures: discretionary-ligatures;
	font-variant-ligatures: discretionary-ligatures;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ph-light {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'Phosphor-Light' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Enable Ligatures ================ */
	letter-spacing: 0;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga=1';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga' 1;
	font-feature-settings: 'liga';
	-webkit-font-variant-ligatures: discretionary-ligatures;
	font-variant-ligatures: discretionary-ligatures;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ph {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'Phosphor' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Enable Ligatures ================ */
	letter-spacing: 0;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga=1';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga' 1;
	font-feature-settings: 'liga';
	-webkit-font-variant-ligatures: discretionary-ligatures;
	font-variant-ligatures: discretionary-ligatures;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ph-thin {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'Phosphor-Thin' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Enable Ligatures ================ */
	letter-spacing: 0;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga=1';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga' 1;
	font-feature-settings: 'liga';
	-webkit-font-variant-ligatures: discretionary-ligatures;
	font-variant-ligatures: discretionary-ligatures;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ─── Base Design Tokens ──────────────────────────────────────────────────── */

:root {
	--ml-white: #ffffff;
	--ml-black: #000000;
	--ml-gray-25: #fcfcfd;
	--ml-gray-50: #f9fafb;
	--ml-gray-100: #f2f4f7;
	--ml-gray-200: #eaecf0;
	--ml-gray-300: #d0d5dd;
	--ml-gray-400: #98a2b3;
	--ml-gray-500: #667085;
	--ml-gray-600: #475467;
	--ml-gray-700: #344054;
	--ml-gray-800: #182230;
	--ml-gray-900: #101828;
	--ml-gray-950: #0c111d;
	--ml-blue-25: #f5f8ff;
	--ml-blue-50: #eff4ff;
	--ml-blue-100: #d1e0ff;
	--ml-blue-200: #b2ccff;
	--ml-blue-300: #84adff;
	--ml-blue-400: #528bff;
	--ml-blue-500: #2970ff;
	--ml-blue-600: #155eef;
	--ml-blue-700: #004eeb;
	--ml-blue-800: #0040c1;
	--ml-blue-900: #00359e;
	--ml-blue-950: #002266;
	--ml-green-25: #f6fef9;
	--ml-green-50: #ecfdf3;
	--ml-green-100: #dcfae6;
	--ml-green-200: #abefc6;
	--ml-green-300: #75e0a7;
	--ml-green-400: #47cd89;
	--ml-green-500: #17b26a;
	--ml-green-600: #079455;
	--ml-green-700: #067647;
	--ml-green-800: #085d3a;
	--ml-green-900: #074d31;
	--ml-green-950: #053321;
	--ml-red-25: #fffbfa;
	--ml-red-50: #fef3f2;
	--ml-red-100: #fee4e2;
	--ml-red-200: #fecdca;
	--ml-red-300: #fda29b;
	--ml-red-400: #f97066;
	--ml-red-500: #f04438;
	--ml-red-600: #d92d20;
	--ml-red-700: #b42318;
	--ml-red-800: #912018;
	--ml-red-900: #7a271a;
	--ml-red-950: #55160c;
	--ml-amber-25: #fffcf5;
	--ml-amber-50: #fffaeb;
	--ml-amber-100: #fef0c7;
	--ml-amber-200: #fedf89;
	--ml-amber-300: #fec84b;
	--ml-amber-400: #fdb022;
	--ml-amber-500: #f79009;
	--ml-amber-600: #dc6803;
	--ml-amber-700: #b54708;
	--ml-amber-800: #93370d;
	--ml-amber-900: #7a2e0e;
	--ml-amber-950: #4e1d09;
	--ml-cyan-25: #f5feff;
	--ml-cyan-50: #ecfdff;
	--ml-cyan-100: #cff9fe;
	--ml-cyan-200: #a5f0fc;
	--ml-cyan-300: #67e3f9;
	--ml-cyan-400: #22ccee;
	--ml-cyan-500: #06aed4;
	--ml-cyan-600: #088ab2;
	--ml-cyan-700: #0e7090;
	--ml-cyan-800: #155b75;
	--ml-cyan-900: #164c63;
	--ml-cyan-950: #0d2d3a;
	--ml-purple-25: #fcfaff;
	--ml-purple-50: #f9f5ff;
	--ml-purple-100: #f4ebff;
	--ml-purple-200: #e9d7fe;
	--ml-purple-300: #d6bbfb;
	--ml-purple-400: #b692f6;
	--ml-purple-500: #9e77ed;
	--ml-purple-600: #7f56d9;
	--ml-purple-700: #6941c6;
	--ml-purple-800: #53389e;
	--ml-purple-900: #42307d;
	--ml-purple-950: #2c1c5f;
	--ml-color-primary: var(--ml-blue-600);
	--ml-color-primary-hover: var(--ml-blue-700);
	--ml-color-primary-active: var(--ml-blue-800);
	--ml-color-primary-subtle: var(--ml-blue-50);
	--ml-color-secondary: var(--ml-gray-600);
	--ml-color-secondary-hover: var(--ml-gray-700);
	--ml-color-secondary-active: var(--ml-gray-800);
	--ml-color-secondary-subtle: var(--ml-gray-100);
	--ml-color-success: var(--ml-green-600);
	--ml-color-success-hover: var(--ml-green-700);
	--ml-color-success-subtle: var(--ml-green-50);
	--ml-color-warning: var(--ml-amber-500);
	--ml-color-warning-hover: var(--ml-amber-600);
	--ml-color-warning-subtle: var(--ml-amber-50);
	--ml-color-danger: var(--ml-red-600);
	--ml-color-danger-hover: var(--ml-red-700);
	--ml-color-danger-subtle: var(--ml-red-50);
	--ml-color-info: var(--ml-cyan-600);
	--ml-color-info-hover: var(--ml-cyan-700);
	--ml-color-info-subtle: var(--ml-cyan-50);
	--ml-color-background: var(--ml-white);
	--ml-color-surface: var(--ml-white);
	--ml-color-surface-raised: var(--ml-gray-50);
	--ml-color-surface-overlay: var(--ml-white);
	--ml-color-surface-sunken: var(--ml-gray-100);
	--ml-color-text: var(--ml-gray-900);
	--ml-color-text-secondary: var(--ml-gray-700);
	--ml-color-text-muted: var(--ml-gray-500);
	--ml-color-text-subtle: var(--ml-gray-400);
	--ml-color-text-inverse: var(--ml-white);
	--ml-color-text-link: var(--ml-blue-600);
	--ml-color-text-link-hover: var(--ml-blue-700);
	--ml-color-border: var(--ml-gray-200);
	--ml-color-border-strong: var(--ml-gray-300);
	--ml-color-border-muted: var(--ml-gray-100);
	--ml-color-border-focus: var(--ml-blue-500);
	--ml-color-focus-ring: var(--ml-blue-500);
	--ml-focus-ring-width: 4px;
	--ml-focus-ring-offset: 1px;
	--ml-color-toggle-off: var(--ml-gray-200);
	--ml-color-toggle-off-hover: var(--ml-gray-300);
	--ml-color-input-bg: var(--ml-white);
	--ml-color-input-disabled-bg: var(--ml-gray-50);
	--ml-badge-default-bg: var(--ml-gray-100);
	--ml-badge-default-border: var(--ml-gray-200);
	--ml-badge-default-text: var(--ml-gray-700);
	--ml-badge-primary-bg: var(--ml-blue-50);
	--ml-badge-primary-border: var(--ml-blue-200);
	--ml-badge-primary-text: var(--ml-blue-700);
	--ml-badge-success-bg: var(--ml-green-50);
	--ml-badge-success-border: var(--ml-green-200);
	--ml-badge-success-text: var(--ml-green-700);
	--ml-badge-warning-bg: var(--ml-amber-50);
	--ml-badge-warning-border: var(--ml-amber-200);
	--ml-badge-warning-text: var(--ml-amber-700);
	--ml-badge-error-bg: var(--ml-red-50);
	--ml-badge-error-border: var(--ml-red-200);
	--ml-badge-error-text: var(--ml-red-700);
	--ml-alert-info-bg: var(--ml-blue-50);
	--ml-alert-info-border: var(--ml-blue-200);
	--ml-alert-info-text: var(--ml-blue-700);
	--ml-alert-info-icon: var(--ml-blue-600);
	--ml-alert-success-bg: var(--ml-green-50);
	--ml-alert-success-border: var(--ml-green-200);
	--ml-alert-success-text: var(--ml-green-700);
	--ml-alert-success-icon: var(--ml-green-600);
	--ml-alert-warning-bg: var(--ml-amber-50);
	--ml-alert-warning-border: var(--ml-amber-200);
	--ml-alert-warning-text: var(--ml-amber-700);
	--ml-alert-warning-icon: var(--ml-amber-600);
	--ml-alert-error-bg: var(--ml-red-50);
	--ml-alert-error-border: var(--ml-red-200);
	--ml-alert-error-text: var(--ml-red-700);
	--ml-alert-error-icon: var(--ml-red-600);
	--ml-tooltip-bg: var(--ml-gray-900);
	--ml-tooltip-text: var(--ml-white);
	--ml-card-footer-bg: var(--ml-gray-50);
	--ml-space-0: 0;
	--ml-space-px: 1px;
	--ml-space-0-5: 0.125rem;
	--ml-space-1: 0.25rem;
	--ml-space-1-5: 0.375rem;
	--ml-space-2: 0.5rem;
	--ml-space-2-5: 0.625rem;
	--ml-space-3: 0.75rem;
	--ml-space-3-5: 0.875rem;
	--ml-space-4: 1rem;
	--ml-space-5: 1.25rem;
	--ml-space-6: 1.5rem;
	--ml-space-7: 1.75rem;
	--ml-space-8: 2rem;
	--ml-space-9: 2.25rem;
	--ml-space-10: 2.5rem;
	--ml-space-11: 2.75rem;
	--ml-space-12: 3rem;
	--ml-space-14: 3.5rem;
	--ml-space-16: 4rem;
	--ml-space-20: 5rem;
	--ml-space-24: 6rem;
	--ml-space-28: 7rem;
	--ml-space-32: 8rem;
	--ml-space-36: 9rem;
	--ml-space-40: 10rem;
	--ml-space-44: 11rem;
	--ml-space-48: 12rem;
	--ml-space-52: 13rem;
	--ml-space-56: 14rem;
	--ml-space-60: 15rem;
	--ml-space-64: 16rem;
	--ml-space-72: 18rem;
	--ml-space-80: 20rem;
	--ml-space-96: 24rem;
	--ml-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	--ml-font-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
	--ml-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
	--ml-text-xs: 0.75rem;
	--ml-text-sm: 0.875rem;
	--ml-text-base: 1rem;
	--ml-text-lg: 1.125rem;
	--ml-text-xl: 1.25rem;
	--ml-text-2xl: 1.5rem;
	--ml-text-3xl: 1.875rem;
	--ml-text-4xl: 2.25rem;
	--ml-text-5xl: 3rem;
	--ml-text-6xl: 3.75rem;
	--ml-text-7xl: 4.5rem;
	--ml-text-8xl: 6rem;
	--ml-text-9xl: 8rem;
	--ml-font-thin: 100;
	--ml-font-extralight: 200;
	--ml-font-light: 300;
	--ml-font-normal: 400;
	--ml-font-medium: 500;
	--ml-font-semibold: 600;
	--ml-font-bold: 700;
	--ml-font-extrabold: 800;
	--ml-font-black: 900;
	--ml-leading-none: 1;
	--ml-leading-tight: 1.25;
	--ml-leading-snug: 1.375;
	--ml-leading-normal: 1.5;
	--ml-leading-relaxed: 1.625;
	--ml-leading-loose: 2;
	--ml-tracking-tighter: -0.05em;
	--ml-tracking-tight: -0.025em;
	--ml-tracking-normal: 0em;
	--ml-tracking-wide: 0.025em;
	--ml-tracking-wider: 0.05em;
	--ml-tracking-widest: 0.1em;
	--ml-shadow-none: none;
	--ml-shadow-xs: 0 1px 2px 0 rgb(16 24 40 / 0.05);
	--ml-shadow-sm: 0 1px 2px 0 rgb(16 24 40 / 0.06), 0 1px 3px 0 rgb(16 24 40 / 0.1);
	--ml-shadow: 0 1px 2px 0 rgb(16 24 40 / 0.06), 0 1px 3px 0 rgb(16 24 40 / 0.1);
	--ml-shadow-md: 0 2px 4px -2px rgb(16 24 40 / 0.06), 0 4px 8px -2px rgb(16 24 40 / 0.1);
	--ml-shadow-lg: 0 4px 6px -2px rgb(16 24 40 / 0.03), 0 12px 16px -4px rgb(16 24 40 / 0.08);
	--ml-shadow-xl: 0 8px 8px -4px rgb(16 24 40 / 0.03), 0 20px 24px -4px rgb(16 24 40 / 0.08);
	--ml-shadow-2xl: 0 24px 48px -12px rgb(16 24 40 / 0.18);
	--ml-shadow-3xl: 0 32px 64px -12px rgb(16 24 40 / 0.14);
	--ml-shadow-inner: inset 0 2px 4px 0 rgb(16 24 40 / 0.05);
	--ml-shadow-ring-color: var(--ml-blue-100);
	--ml-shadow-ring-error-color: var(--ml-red-100);
	--ml-shadow-ring-success-color: var(--ml-green-100);
	--ml-shadow-ring-warning-color: var(--ml-amber-100);
	--ml-shadow-ring-gray-color: var(--ml-gray-100);
	--ml-shadow-ring: 0 0 0 4px var(--ml-shadow-ring-color);
	--ml-shadow-ring-error: 0 0 0 4px var(--ml-shadow-ring-error-color);
	--ml-shadow-ring-success: 0 0 0 4px var(--ml-shadow-ring-success-color);
	--ml-shadow-ring-warning: 0 0 0 4px var(--ml-shadow-ring-warning-color);
	--ml-shadow-ring-gray: 0 0 0 4px var(--ml-shadow-ring-gray-color);
	--ml-shadow-focus-ring: 0 1px 2px 0 rgb(16 24 40 / 0.05), 0 0 0 4px var(--ml-shadow-ring-color);
	--ml-shadow-primary: 0 1px 2px 0 rgb(21 94 239 / 0.05);
	--ml-shadow-success: 0 1px 2px 0 rgb(7 148 85 / 0.05);
	--ml-shadow-danger: 0 1px 2px 0 rgb(217 45 32 / 0.05);
	--ml-radius-none: 0;
	--ml-radius-xxs: 0.125rem;
	--ml-radius-xs: 0.25rem;
	--ml-radius-sm: 0.375rem;
	--ml-radius: 0.5rem;
	--ml-radius-md: 0.5rem;
	--ml-radius-lg: 0.75rem;
	--ml-radius-xl: 1rem;
	--ml-radius-2xl: 1.25rem;
	--ml-radius-3xl: 1.5rem;
	--ml-radius-4xl: 2rem;
	--ml-radius-full: 9999px;
	--ml-border-0: 0;
	--ml-border: 1px;
	--ml-border-2: 2px;
	--ml-border-4: 4px;
	--ml-border-8: 8px;
	--ml-duration-0: 0ms;
	--ml-duration-75: 75ms;
	--ml-duration-100: 100ms;
	--ml-duration-150: 150ms;
	--ml-duration-200: 200ms;
	--ml-duration-300: 300ms;
	--ml-duration-500: 500ms;
	--ml-duration-700: 700ms;
	--ml-duration-1000: 1000ms;
	--ml-ease-linear: linear;
	--ml-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ml-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ml-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ml-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	--ml-transition-none: none;
	--ml-transition-all: all var(--ml-duration-150) var(--ml-ease-in-out);
	--ml-transition-colors: color var(--ml-duration-150) var(--ml-ease-in-out), background-color var(--ml-duration-150) var(--ml-ease-in-out), border-color var(--ml-duration-150) var(--ml-ease-in-out);
	--ml-transition-opacity: opacity var(--ml-duration-150) var(--ml-ease-in-out);
	--ml-transition-shadow: box-shadow var(--ml-duration-150) var(--ml-ease-in-out);
	--ml-transition-transform: transform var(--ml-duration-150) var(--ml-ease-in-out);
	--ml-screen-xs: 320px;
	--ml-screen-sm: 640px;
	--ml-screen-md: 768px;
	--ml-screen-lg: 1024px;
	--ml-screen-xl: 1280px;
	--ml-screen-2xl: 1536px;

	/* Default to light color scheme */
	color-scheme: light;
}

/* ─── Light Theme ─────────────────────────────────────────────────────────── */

:root, [data-theme="light"] {
	--ml-color-background: var(--ml-white);
	--ml-color-surface: var(--ml-white);
	--ml-color-surface-raised: var(--ml-gray-50);
	--ml-color-surface-overlay: var(--ml-white);
	--ml-color-surface-sunken: var(--ml-gray-100);
	--ml-color-text: var(--ml-gray-900);
	--ml-color-text-secondary: var(--ml-gray-700);
	--ml-color-text-muted: var(--ml-gray-500);
	--ml-color-text-subtle: var(--ml-gray-400);
	--ml-color-text-inverse: var(--ml-white);
	--ml-color-border: var(--ml-gray-200);
	--ml-color-border-strong: var(--ml-gray-300);
	--ml-color-border-muted: var(--ml-gray-100);

	color-scheme: light;
}

/* ─── Dark Theme ──────────────────────────────────────────────────────────── */

[data-theme="dark"] {
	--ml-color-background: var(--ml-gray-950);
	--ml-color-surface: var(--ml-gray-900);
	--ml-color-surface-raised: var(--ml-gray-800);
	--ml-color-surface-overlay: var(--ml-gray-800);
	--ml-color-surface-sunken: var(--ml-gray-950);
	--ml-color-text: var(--ml-gray-50);
	--ml-color-text-secondary: var(--ml-gray-300);
	--ml-color-text-muted: var(--ml-gray-400);
	--ml-color-text-subtle: var(--ml-gray-500);
	--ml-color-text-inverse: var(--ml-gray-900);
	--ml-color-border: var(--ml-gray-700);
	--ml-color-border-strong: var(--ml-gray-600);
	--ml-color-border-muted: var(--ml-gray-800);
	--ml-color-primary: var(--ml-blue-500);
	--ml-color-primary-hover: var(--ml-blue-400);
	--ml-color-primary-active: var(--ml-blue-300);
	--ml-color-primary-subtle: var(--ml-blue-950);
	--ml-color-success: var(--ml-green-500);
	--ml-color-success-subtle: var(--ml-green-950);
	--ml-color-warning: var(--ml-amber-400);
	--ml-color-warning-subtle: var(--ml-amber-950);
	--ml-color-danger: var(--ml-red-500);
	--ml-color-danger-subtle: var(--ml-red-950);
	--ml-color-info: var(--ml-cyan-400);
	--ml-color-info-subtle: var(--ml-cyan-950);
	--ml-color-input-bg: var(--ml-gray-900);
	--ml-color-input-disabled-bg: var(--ml-gray-800);
	--ml-color-toggle-off: var(--ml-gray-600);
	--ml-color-toggle-off-hover: var(--ml-gray-500);
	--ml-shadow-ring-color: rgb(59 130 246 / 0.25);
	--ml-shadow-ring-error-color: rgb(239 68 68 / 0.25);
	--ml-shadow-ring-success-color: rgb(34 197 94 / 0.25);
	--ml-shadow-ring-warning-color: rgb(245 158 11 / 0.25);
	--ml-shadow-ring-gray-color: rgb(107 114 128 / 0.25);
	--ml-badge-default-bg: var(--ml-gray-800);
	--ml-badge-default-border: var(--ml-gray-700);
	--ml-badge-default-text: var(--ml-gray-300);
	--ml-badge-primary-bg: rgb(59 130 246 / 0.15);
	--ml-badge-primary-border: rgb(59 130 246 / 0.3);
	--ml-badge-primary-text: var(--ml-blue-400);
	--ml-badge-success-bg: rgb(34 197 94 / 0.15);
	--ml-badge-success-border: rgb(34 197 94 / 0.3);
	--ml-badge-success-text: var(--ml-green-400);
	--ml-badge-warning-bg: rgb(245 158 11 / 0.15);
	--ml-badge-warning-border: rgb(245 158 11 / 0.3);
	--ml-badge-warning-text: var(--ml-amber-400);
	--ml-badge-error-bg: rgb(239 68 68 / 0.15);
	--ml-badge-error-border: rgb(239 68 68 / 0.3);
	--ml-badge-error-text: var(--ml-red-400);
	--ml-alert-info-bg: rgb(59 130 246 / 0.1);
	--ml-alert-info-border: rgb(59 130 246 / 0.2);
	--ml-alert-info-text: var(--ml-blue-300);
	--ml-alert-info-icon: var(--ml-blue-400);
	--ml-alert-success-bg: rgb(34 197 94 / 0.1);
	--ml-alert-success-border: rgb(34 197 94 / 0.2);
	--ml-alert-success-text: var(--ml-green-300);
	--ml-alert-success-icon: var(--ml-green-400);
	--ml-alert-warning-bg: rgb(245 158 11 / 0.1);
	--ml-alert-warning-border: rgb(245 158 11 / 0.2);
	--ml-alert-warning-text: var(--ml-amber-300);
	--ml-alert-warning-icon: var(--ml-amber-400);
	--ml-alert-error-bg: rgb(239 68 68 / 0.1);
	--ml-alert-error-border: rgb(239 68 68 / 0.2);
	--ml-alert-error-text: var(--ml-red-300);
	--ml-alert-error-icon: var(--ml-red-400);
	--ml-tooltip-bg: var(--ml-gray-100);
	--ml-tooltip-text: var(--ml-gray-900);
	--ml-card-footer-bg: var(--ml-gray-800);

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ml-color-background: var(--ml-gray-950);
		--ml-color-surface: var(--ml-gray-900);
		--ml-color-surface-raised: var(--ml-gray-800);
		--ml-color-surface-overlay: var(--ml-gray-800);
		--ml-color-surface-sunken: var(--ml-gray-950);
		--ml-color-text: var(--ml-gray-50);
		--ml-color-text-secondary: var(--ml-gray-300);
		--ml-color-text-muted: var(--ml-gray-400);
		--ml-color-text-subtle: var(--ml-gray-500);
		--ml-color-text-inverse: var(--ml-gray-900);
		--ml-color-border: var(--ml-gray-700);
		--ml-color-border-strong: var(--ml-gray-600);
		--ml-color-border-muted: var(--ml-gray-800);
		--ml-color-primary: var(--ml-blue-500);
		--ml-color-primary-hover: var(--ml-blue-400);
		--ml-color-primary-active: var(--ml-blue-300);
		--ml-color-primary-subtle: var(--ml-blue-950);
		--ml-color-success: var(--ml-green-500);
		--ml-color-success-subtle: var(--ml-green-950);
		--ml-color-warning: var(--ml-amber-400);
		--ml-color-warning-subtle: var(--ml-amber-950);
		--ml-color-danger: var(--ml-red-500);
		--ml-color-danger-subtle: var(--ml-red-950);
		--ml-color-info: var(--ml-cyan-400);
		--ml-color-info-subtle: var(--ml-cyan-950);
		--ml-color-input-bg: var(--ml-gray-900);
		--ml-color-input-disabled-bg: var(--ml-gray-800);
		--ml-color-toggle-off: var(--ml-gray-600);
		--ml-color-toggle-off-hover: var(--ml-gray-500);
		--ml-shadow-ring-color: rgb(59 130 246 / 0.25);
		--ml-shadow-ring-error-color: rgb(239 68 68 / 0.25);
		--ml-shadow-ring-success-color: rgb(34 197 94 / 0.25);
		--ml-shadow-ring-warning-color: rgb(245 158 11 / 0.25);
		--ml-shadow-ring-gray-color: rgb(107 114 128 / 0.25);
		--ml-badge-default-bg: var(--ml-gray-800);
		--ml-badge-default-border: var(--ml-gray-700);
		--ml-badge-default-text: var(--ml-gray-300);
		--ml-badge-primary-bg: rgb(59 130 246 / 0.15);
		--ml-badge-primary-border: rgb(59 130 246 / 0.3);
		--ml-badge-primary-text: var(--ml-blue-400);
		--ml-badge-success-bg: rgb(34 197 94 / 0.15);
		--ml-badge-success-border: rgb(34 197 94 / 0.3);
		--ml-badge-success-text: var(--ml-green-400);
		--ml-badge-warning-bg: rgb(245 158 11 / 0.15);
		--ml-badge-warning-border: rgb(245 158 11 / 0.3);
		--ml-badge-warning-text: var(--ml-amber-400);
		--ml-badge-error-bg: rgb(239 68 68 / 0.15);
		--ml-badge-error-border: rgb(239 68 68 / 0.3);
		--ml-badge-error-text: var(--ml-red-400);
		--ml-alert-info-bg: rgb(59 130 246 / 0.1);
		--ml-alert-info-border: rgb(59 130 246 / 0.2);
		--ml-alert-info-text: var(--ml-blue-300);
		--ml-alert-info-icon: var(--ml-blue-400);
		--ml-alert-success-bg: rgb(34 197 94 / 0.1);
		--ml-alert-success-border: rgb(34 197 94 / 0.2);
		--ml-alert-success-text: var(--ml-green-300);
		--ml-alert-success-icon: var(--ml-green-400);
		--ml-alert-warning-bg: rgb(245 158 11 / 0.1);
		--ml-alert-warning-border: rgb(245 158 11 / 0.2);
		--ml-alert-warning-text: var(--ml-amber-300);
		--ml-alert-warning-icon: var(--ml-amber-400);
		--ml-alert-error-bg: rgb(239 68 68 / 0.1);
		--ml-alert-error-border: rgb(239 68 68 / 0.2);
		--ml-alert-error-text: var(--ml-red-300);
		--ml-alert-error-icon: var(--ml-red-400);
		--ml-tooltip-bg: var(--ml-gray-100);
		--ml-tooltip-text: var(--ml-gray-900);
		--ml-card-footer-bg: var(--ml-gray-800);

		color-scheme: dark;
	}
}