@melodicdev/components 1.0.1 → 1.0.3

package/assets/melodic-components.css

@@ -0,0 +1,671 @@
+/* @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;
+	}
+}