/** * Melodic Design System — generated from design-system/tokens/*.tokens.json (DTCG). * Do not edit by hand: run `npm run tokens:build`. * Do not edit directly, this file was auto-generated. */ /* light theme — opt in with (or .ml-light on any subtree); data-theme="auto" follows the OS preference. */ :root[data-theme="light"], .ml-light { color-scheme: light; --ml-color-bg: var(--ml-color-white); /** Page background */ --ml-color-bg-alt: var(--ml-color-gray-50); /** Alternating section bands, footer */ --ml-color-surface: var(--ml-color-white); /** Cards, inputs, raised panels */ --ml-color-surface-raised: var(--ml-color-gray-100); /** Chips, hover fills, nested surfaces */ --ml-color-surface-hover: var(--ml-color-gray-200); /** Strongest hover fill */ --ml-color-border: var(--ml-color-gray-200); --ml-color-border-strong: var(--ml-color-gray-300); --ml-color-text: var(--ml-color-gray-900); /** Primary text */ --ml-color-text-muted: var(--ml-color-gray-600); /** Secondary text */ --ml-color-text-faint: var(--ml-color-gray-500); /** Meta, least important */ --ml-color-primary-light: var(--ml-color-magenta-600); /** Eyebrows and icons need the accessible magenta on light surfaces */ --ml-color-footer-bg: var(--ml-color-gray-900); --ml-color-footer-border: var(--ml-color-gray-800); --ml-color-footer-muted: var(--ml-color-gray-500); --ml-color-glass-header: var(--ml-color-alpha-white-80); /** Sticky header backdrop */ --ml-color-status-success: var(--ml-color-green-600); --ml-color-status-danger: var(--ml-color-red-600); --ml-color-status-danger-bg: var(--ml-color-red-50); --ml-shadow-card-hover: 0px 14px 34px -16px var(--ml-color-alpha-black-25); /** Card lift on night surfaces */ } @media (prefers-color-scheme: light) { :root[data-theme="auto"] { color-scheme: light; --ml-color-bg: var(--ml-color-white); /** Page background */ --ml-color-bg-alt: var(--ml-color-gray-50); /** Alternating section bands, footer */ --ml-color-surface: var(--ml-color-white); /** Cards, inputs, raised panels */ --ml-color-surface-raised: var(--ml-color-gray-100); /** Chips, hover fills, nested surfaces */ --ml-color-surface-hover: var(--ml-color-gray-200); /** Strongest hover fill */ --ml-color-border: var(--ml-color-gray-200); --ml-color-border-strong: var(--ml-color-gray-300); --ml-color-text: var(--ml-color-gray-900); /** Primary text */ --ml-color-text-muted: var(--ml-color-gray-600); /** Secondary text */ --ml-color-text-faint: var(--ml-color-gray-500); /** Meta, least important */ --ml-color-primary-light: var(--ml-color-magenta-600); /** Eyebrows and icons need the accessible magenta on light surfaces */ --ml-color-footer-bg: var(--ml-color-gray-900); --ml-color-footer-border: var(--ml-color-gray-800); --ml-color-footer-muted: var(--ml-color-gray-500); --ml-color-glass-header: var(--ml-color-alpha-white-80); /** Sticky header backdrop */ --ml-color-status-success: var(--ml-color-green-600); --ml-color-status-danger: var(--ml-color-red-600); --ml-color-status-danger-bg: var(--ml-color-red-50); --ml-shadow-card-hover: 0px 14px 34px -16px var(--ml-color-alpha-black-25); /** Card lift on night surfaces */ } }