microui-wc 0.1.0

package/src/styles/tokens.css

@@ -0,0 +1,675 @@
+/**
+ * microUI Design Token Definitions - Material Design 3
+ * 
+ * Implements the official Material Design 3 (Material You) token system.
+ * Reference: https://m3.material.io/styles/color
+ * 
+ * Token hierarchy:
+ * - Reference tokens (--md-ref-*): Raw palette values
+ * - System tokens (--md-sys-*): Semantic color roles
+ * - Component tokens: Applied via components.css
+ */
+
+/* Fonts: Load Roboto async via HTML preload for better performance */
+
+:root {
+  /* ========================================================================
+   * MD3 REFERENCE PALETTE - Primary (Purple-based baseline)
+   * ======================================================================== */
+  --md-ref-palette-primary0: #000000;
+  --md-ref-palette-primary10: #21005D;
+  --md-ref-palette-primary20: #381E72;
+  --md-ref-palette-primary30: #4F378B;
+  --md-ref-palette-primary40: #6750A4;
+  --md-ref-palette-primary50: #7F67BE;
+  --md-ref-palette-primary60: #9A82DB;
+  --md-ref-palette-primary70: #B69DF8;
+  --md-ref-palette-primary80: #D0BCFF;
+  --md-ref-palette-primary90: #EADDFF;
+  --md-ref-palette-primary95: #F6EDFF;
+  --md-ref-palette-primary99: #FFFBFE;
+  --md-ref-palette-primary100: #FFFFFF;
+
+  /* MD3 REFERENCE PALETTE - Secondary (Purple-gray) */
+  --md-ref-palette-secondary0: #000000;
+  --md-ref-palette-secondary10: #1D192B;
+  --md-ref-palette-secondary20: #332D41;
+  --md-ref-palette-secondary30: #4A4458;
+  --md-ref-palette-secondary40: #625B71;
+  --md-ref-palette-secondary50: #7A7289;
+  --md-ref-palette-secondary60: #958DA5;
+  --md-ref-palette-secondary70: #B0A7C0;
+  --md-ref-palette-secondary80: #CCC2DC;
+  --md-ref-palette-secondary90: #E8DEF8;
+  --md-ref-palette-secondary95: #F6EDFF;
+  --md-ref-palette-secondary99: #FFFBFE;
+  --md-ref-palette-secondary100: #FFFFFF;
+
+  /* MD3 REFERENCE PALETTE - Tertiary (Pink) */
+  --md-ref-palette-tertiary0: #000000;
+  --md-ref-palette-tertiary10: #31111D;
+  --md-ref-palette-tertiary20: #492532;
+  --md-ref-palette-tertiary30: #633B48;
+  --md-ref-palette-tertiary40: #7D5260;
+  --md-ref-palette-tertiary50: #986977;
+  --md-ref-palette-tertiary60: #B58392;
+  --md-ref-palette-tertiary70: #D29DAC;
+  --md-ref-palette-tertiary80: #EFB8C8;
+  --md-ref-palette-tertiary90: #FFD8E4;
+  --md-ref-palette-tertiary95: #FFECF1;
+  --md-ref-palette-tertiary99: #FFFBFA;
+  --md-ref-palette-tertiary100: #FFFFFF;
+
+  /* MD3 REFERENCE PALETTE - Error (Red) */
+  --md-ref-palette-error0: #000000;
+  --md-ref-palette-error10: #410E0B;
+  --md-ref-palette-error20: #601410;
+  --md-ref-palette-error30: #8C1D18;
+  --md-ref-palette-error40: #B3261E;
+  --md-ref-palette-error50: #DC362E;
+  --md-ref-palette-error60: #E46962;
+  --md-ref-palette-error70: #EC928E;
+  --md-ref-palette-error80: #F2B8B5;
+  --md-ref-palette-error90: #F9DEDC;
+  --md-ref-palette-error95: #FCEEEE;
+  --md-ref-palette-error99: #FFFBF9;
+  --md-ref-palette-error100: #FFFFFF;
+
+  /* MD3 REFERENCE PALETTE - Neutral (Gray) */
+  --md-ref-palette-neutral0: #000000;
+  --md-ref-palette-neutral10: #1D1B20;
+  --md-ref-palette-neutral20: #322F35;
+  --md-ref-palette-neutral30: #48464C;
+  --md-ref-palette-neutral40: #605D64;
+  --md-ref-palette-neutral50: #79767D;
+  --md-ref-palette-neutral60: #938F96;
+  --md-ref-palette-neutral70: #AEA9B1;
+  --md-ref-palette-neutral80: #CAC5CD;
+  --md-ref-palette-neutral90: #E6E0E9;
+  --md-ref-palette-neutral95: #F5EFF7;
+  --md-ref-palette-neutral99: #FFFBFE;
+  --md-ref-palette-neutral100: #FFFFFF;
+
+  /* MD3 REFERENCE PALETTE - Neutral Variant */
+  --md-ref-palette-neutral-variant0: #000000;
+  --md-ref-palette-neutral-variant10: #1D1A22;
+  --md-ref-palette-neutral-variant20: #322F37;
+  --md-ref-palette-neutral-variant30: #49454F;
+  --md-ref-palette-neutral-variant40: #605D66;
+  --md-ref-palette-neutral-variant50: #79747E;
+  --md-ref-palette-neutral-variant60: #938F99;
+  --md-ref-palette-neutral-variant70: #AEA9B4;
+  --md-ref-palette-neutral-variant80: #CAC4D0;
+  --md-ref-palette-neutral-variant90: #E7E0EC;
+  --md-ref-palette-neutral-variant95: #F5EEFA;
+  --md-ref-palette-neutral-variant99: #FFFBFE;
+  --md-ref-palette-neutral-variant100: #FFFFFF;
+
+  /* ========================================================================
+   * MD3 SYSTEM COLOR ROLES - Light Theme
+   * ======================================================================== */
+
+  /* Primary */
+  --md-sys-color-primary: var(--md-ref-palette-primary40);
+  --md-sys-color-on-primary: var(--md-ref-palette-primary100);
+  --md-sys-color-primary-container: var(--md-ref-palette-primary90);
+  --md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
+
+  /* Secondary */
+  --md-sys-color-secondary: var(--md-ref-palette-secondary40);
+  --md-sys-color-on-secondary: var(--md-ref-palette-secondary100);
+  --md-sys-color-secondary-container: var(--md-ref-palette-secondary90);
+  --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10);
+
+  /* Tertiary */
+  --md-sys-color-tertiary: var(--md-ref-palette-tertiary40);
+  --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100);
+  --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90);
+  --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10);
+
+  /* Error */
+  --md-sys-color-error: var(--md-ref-palette-error40);
+  --md-sys-color-on-error: var(--md-ref-palette-error100);
+  --md-sys-color-error-container: var(--md-ref-palette-error90);
+  --md-sys-color-on-error-container: var(--md-ref-palette-error10);
+
+  /* Surface */
+  --md-sys-color-surface: var(--md-ref-palette-neutral99);
+  --md-sys-color-on-surface: var(--md-ref-palette-neutral10);
+  --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90);
+  --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30);
+
+  /* Surface Containers (MD3 elevation) */
+  --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral100);
+  --md-sys-color-surface-container-low: var(--md-ref-palette-neutral96, #F7F2FA);
+  --md-sys-color-surface-container: var(--md-ref-palette-neutral94, #F3EDF7);
+  --md-sys-color-surface-container-high: var(--md-ref-palette-neutral92, #ECE6F0);
+  --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90);
+
+  /* Outline */
+  --md-sys-color-outline: var(--md-ref-palette-neutral-variant50);
+  --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80);
+
+  /* Background */
+  --md-sys-color-background: var(--md-ref-palette-neutral99);
+  --md-sys-color-on-background: var(--md-ref-palette-neutral10);
+
+  /* Inverse */
+  --md-sys-color-inverse-surface: var(--md-ref-palette-neutral20);
+  --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95);
+  --md-sys-color-inverse-primary: var(--md-ref-palette-primary80);
+
+  /* Scrim */
+  --md-sys-color-scrim: var(--md-ref-palette-neutral0);
+
+  /* Shadow */
+  --md-sys-color-shadow: var(--md-ref-palette-neutral0);
+
+  /* ========================================================================
+   * CUSTOM SEMANTIC COLORS (Warning/Success - not in base MD3)
+   * ======================================================================== */
+
+  /* Warning (Orange) - based on amber palette */
+  --md-sys-color-warning: #E65100;
+  --md-sys-color-on-warning: #FFFFFF;
+  --md-sys-color-warning-container: #FFE0B2;
+  --md-sys-color-on-warning-container: #5D4037;
+
+  /* Success (Green) - using tertiary-like green palette */
+  --md-sys-color-success: #2E7D32;
+  --md-sys-color-on-success: #FFFFFF;
+  --md-sys-color-success-container: #C8E6C9;
+  --md-sys-color-on-success-container: #1B5E20;
+
+  /* ========================================================================
+   * LEGACY ALIASES (for backward compatibility)
+   * ======================================================================== */
+  --mu-color-primary: var(--md-sys-color-primary);
+  --mu-color-primary-light: var(--md-sys-color-primary-container);
+  --mu-color-primary-dark: var(--md-ref-palette-primary30);
+  --mu-color-secondary: var(--md-sys-color-secondary);
+  --mu-color-error: var(--md-sys-color-error);
+  --mu-color-success: #1B5E20;
+  --mu-color-warning: #E65100;
+  --mu-color-info: #01579B;
+
+  --mu-surface-background: var(--md-sys-color-background);
+  --mu-surface-foreground: var(--md-sys-color-on-background);
+  --mu-surface-card: var(--md-sys-color-surface-container-low);
+  --mu-surface-elevated: var(--md-sys-color-surface-container);
+  --mu-surface-muted: var(--md-sys-color-surface-variant);
+  --mu-surface-border: var(--md-sys-color-outline-variant);
+
+  /* ========================================================================
+   * MD3 TYPOGRAPHY SCALE
+   * ======================================================================== */
+
+  /* Font Family */
+  --md-sys-typescale-font: 'Roboto', system-ui, -apple-system, sans-serif;
+
+  /* Display */
+  --md-sys-typescale-display-large-size: 57px;
+  --md-sys-typescale-display-large-line-height: 64px;
+  --md-sys-typescale-display-large-weight: 400;
+  --md-sys-typescale-display-medium-size: 45px;
+  --md-sys-typescale-display-medium-line-height: 52px;
+  --md-sys-typescale-display-small-size: 36px;
+  --md-sys-typescale-display-small-line-height: 44px;
+
+  /* Headline */
+  --md-sys-typescale-headline-large-size: 32px;
+  --md-sys-typescale-headline-large-line-height: 40px;
+  --md-sys-typescale-headline-medium-size: 28px;
+  --md-sys-typescale-headline-medium-line-height: 36px;
+  --md-sys-typescale-headline-small-size: 24px;
+  --md-sys-typescale-headline-small-line-height: 32px;
+
+  /* Title */
+  --md-sys-typescale-title-large-size: 22px;
+  --md-sys-typescale-title-large-line-height: 28px;
+  --md-sys-typescale-title-large-weight: 400;
+  --md-sys-typescale-title-medium-size: 16px;
+  --md-sys-typescale-title-medium-line-height: 24px;
+  --md-sys-typescale-title-medium-weight: 500;
+  --md-sys-typescale-title-small-size: 14px;
+  --md-sys-typescale-title-small-line-height: 20px;
+  --md-sys-typescale-title-small-weight: 500;
+
+  /* Body */
+  --md-sys-typescale-body-large-size: 16px;
+  --md-sys-typescale-body-large-line-height: 24px;
+  --md-sys-typescale-body-medium-size: 14px;
+  --md-sys-typescale-body-medium-line-height: 20px;
+  --md-sys-typescale-body-small-size: 12px;
+  --md-sys-typescale-body-small-line-height: 16px;
+
+  /* Label */
+  --md-sys-typescale-label-large-size: 14px;
+  --md-sys-typescale-label-large-line-height: 20px;
+  --md-sys-typescale-label-large-weight: 500;
+  --md-sys-typescale-label-medium-size: 12px;
+  --md-sys-typescale-label-medium-line-height: 16px;
+  --md-sys-typescale-label-medium-weight: 500;
+  --md-sys-typescale-label-small-size: 11px;
+  --md-sys-typescale-label-small-line-height: 16px;
+  --md-sys-typescale-label-small-weight: 500;
+
+  /* Legacy font tokens */
+  --mu-font-sans: var(--md-sys-typescale-font);
+  --mu-font-size-xs: 11px;
+  --mu-font-size-sm: 12px;
+  --mu-font-size-base: 14px;
+  --mu-font-size-lg: 16px;
+  --mu-font-size-xl: 22px;
+  --mu-font-weight-normal: 400;
+  --mu-font-weight-medium: 500;
+  --mu-font-weight-bold: 700;
+
+  /* ========================================================================
+   * MD3 SHAPE SCALE
+   * ======================================================================== */
+  --md-sys-shape-corner-none: 0;
+  --md-sys-shape-corner-extra-small: 4px;
+  --md-sys-shape-corner-small: 8px;
+  --md-sys-shape-corner-medium: 12px;
+  --md-sys-shape-corner-large: 16px;
+  --md-sys-shape-corner-extra-large: 28px;
+  --md-sys-shape-corner-full: 9999px;
+
+  /* Legacy radius tokens */
+  --mu-radius-none: var(--md-sys-shape-corner-none);
+  --mu-radius-sm: var(--md-sys-shape-corner-extra-small);
+  --mu-radius-md: var(--md-sys-shape-corner-small);
+  --mu-radius-lg: var(--md-sys-shape-corner-medium);
+  --mu-radius-xl: var(--md-sys-shape-corner-large);
+  --mu-radius-2xl: var(--md-sys-shape-corner-extra-large);
+  --mu-radius-full: var(--md-sys-shape-corner-full);
+
+  /* ========================================================================
+   * MD3 STATE LAYERS
+   * ======================================================================== */
+  --md-sys-state-hover-opacity: 0.08;
+  --md-sys-state-focus-opacity: 0.10;
+  --md-sys-state-pressed-opacity: 0.10;
+  --md-sys-state-dragged-opacity: 0.16;
+
+  /* ========================================================================
+   * MD3 ELEVATION (Shadow + Surface Tint)
+   * ======================================================================== */
+  --md-sys-elevation-level0: none;
+  --md-sys-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+  --md-sys-elevation-level2: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+  --md-sys-elevation-level3: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  --md-sys-elevation-level4: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
+  --md-sys-elevation-level5: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
+
+  /* Legacy shadow tokens */
+  --mu-shadow-none: var(--md-sys-elevation-level0);
+  --mu-shadow-sm: var(--md-sys-elevation-level1);
+  --mu-shadow-md: var(--md-sys-elevation-level2);
+  --mu-shadow-lg: var(--md-sys-elevation-level3);
+  --mu-shadow-xl: var(--md-sys-elevation-level4);
+  --mu-shadow-2xl: var(--md-sys-elevation-level5);
+
+  /* ========================================================================
+   * SPACING SCALE (4px base unit - MD3 compatible)
+   * ======================================================================== */
+  --mu-spacing-0: 0;
+  --mu-spacing-1: 4px;
+  --mu-spacing-2: 8px;
+  --mu-spacing-3: 12px;
+  --mu-spacing-4: 16px;
+  --mu-spacing-5: 20px;
+  --mu-spacing-6: 24px;
+  --mu-spacing-8: 32px;
+  --mu-spacing-10: 40px;
+  --mu-spacing-12: 48px;
+  --mu-spacing-16: 64px;
+
+  /* ========================================================================
+   * Z-INDEX SCALE
+   * ======================================================================== */
+  --mu-z-base: 0;
+  --mu-z-dropdown: 100;
+  --mu-z-sticky: 200;
+  --mu-z-fixed: 300;
+  --mu-z-backdrop: 400;
+  --mu-z-modal: 500;
+  --mu-z-popover: 600;
+  --mu-z-tooltip: 700;
+  --mu-z-toast: 800;
+
+  /* ========================================================================
+   * MD3 MOTION TOKENS (Official Spec)
+   * https://m3.material.io/styles/motion/easing-and-duration/tokens-specs
+   * ======================================================================== */
+
+  /* Duration: Short (50-200ms) - For simple, small changes */
+  --md-sys-motion-duration-short1: 50ms;
+  --md-sys-motion-duration-short2: 100ms;
+  --md-sys-motion-duration-short3: 150ms;
+  --md-sys-motion-duration-short4: 200ms;
+
+  /* Duration: Medium (250-400ms) - For moderate transitions */
+  --md-sys-motion-duration-medium1: 250ms;
+  --md-sys-motion-duration-medium2: 300ms;
+  --md-sys-motion-duration-medium3: 350ms;
+  --md-sys-motion-duration-medium4: 400ms;
+
+  /* Duration: Long (450-600ms) - For larger surface transitions */
+  --md-sys-motion-duration-long1: 450ms;
+  --md-sys-motion-duration-long2: 500ms;
+  --md-sys-motion-duration-long3: 550ms;
+  --md-sys-motion-duration-long4: 600ms;
+
+  /* Duration: Extra-Long (700-1000ms) - For complex animations */
+  --md-sys-motion-duration-extra-long1: 700ms;
+  --md-sys-motion-duration-extra-long2: 800ms;
+  --md-sys-motion-duration-extra-long3: 900ms;
+  --md-sys-motion-duration-extra-long4: 1000ms;
+
+  /* Easing: Standard - For in-screen movements */
+  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
+  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
+
+  /* Easing: Emphasized - For expressive, attention-drawing motion */
+  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /* CSS fallback */
+  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
+
+  /* Legacy animation tokens */
+  --mu-duration-fast: var(--md-sys-motion-duration-short2);
+  --mu-duration-normal: var(--md-sys-motion-duration-short4);
+  --mu-duration-slow: var(--md-sys-motion-duration-medium2);
+  --mu-ease-in-out: var(--md-sys-motion-easing-standard);
+
+  /* ========================================================================
+   * MD3 RESPONSIVE LAYOUT TOKENS
+   * Based on Material Design 3 Window Size Classes
+   * https://m3.material.io/foundations/layout/applying-layout/window-size-classes
+   * ======================================================================== */
+
+  /* Breakpoints (matching MD3 Window Size Classes) */
+  --mu-breakpoint-compact: 600px;
+  /* 0-599px: Phones */
+  --mu-breakpoint-medium: 840px;
+  /* 600-839px: Tablets portrait */
+  --mu-breakpoint-expanded: 1200px;
+  /* 840-1199px: Tablets landscape, small desktop */
+  --mu-breakpoint-large: 1600px;
+  /* 1200+: Large desktop */
+
+  /* Navigation Drawer (MD3 Navigation Rail specs) */
+  --mu-drawer-rail-width: 80px;
+  /* MD3: 80dp for navigation rail */
+  --mu-drawer-expanded-width: 360px;
+  /* MD3: 360dp max for modal drawer */
+  --mu-drawer-standard-width: 256px;
+  /* MD3: 256dp for standard drawer */
+
+  /* Bottom Navigation (MD3 Navigation Bar specs) */
+  --mu-bottom-nav-height: 80px;
+  /* MD3: 80dp height */
+
+  /* Z-index for layout components */
+  --mu-z-drawer: 250;
+  --mu-z-drawer-scrim: 240;
+  --mu-z-bottom-nav: 150;
+}
+
+/* ==========================================================================
+ * DARK MODE - System Preference
+ * ========================================================================== */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    /* Primary */
+    --md-sys-color-primary: var(--md-ref-palette-primary80);
+    --md-sys-color-on-primary: var(--md-ref-palette-primary20);
+    --md-sys-color-primary-container: var(--md-ref-palette-primary30);
+    --md-sys-color-on-primary-container: var(--md-ref-palette-primary90);
+
+    /* Secondary */
+    --md-sys-color-secondary: var(--md-ref-palette-secondary80);
+    --md-sys-color-on-secondary: var(--md-ref-palette-secondary20);
+    --md-sys-color-secondary-container: var(--md-ref-palette-secondary30);
+    --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90);
+
+    /* Tertiary */
+    --md-sys-color-tertiary: var(--md-ref-palette-tertiary80);
+    --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary20);
+    --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary30);
+    --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90);
+
+    /* Error */
+    --md-sys-color-error: var(--md-ref-palette-error80);
+    --md-sys-color-on-error: var(--md-ref-palette-error20);
+    --md-sys-color-error-container: var(--md-ref-palette-error30);
+    --md-sys-color-on-error-container: var(--md-ref-palette-error90);
+
+    /* Surface */
+    --md-sys-color-surface: var(--md-ref-palette-neutral10);
+    --md-sys-color-on-surface: var(--md-ref-palette-neutral90);
+    --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30);
+    --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80);
+
+    /* Surface Containers (Dark) */
+    --md-sys-color-surface-container-lowest: #0F0D13;
+    --md-sys-color-surface-container-low: var(--md-ref-palette-neutral10);
+    --md-sys-color-surface-container: #211F26;
+    --md-sys-color-surface-container-high: #2B2930;
+    --md-sys-color-surface-container-highest: #36343B;
+
+    /* Outline */
+    --md-sys-color-outline: var(--md-ref-palette-neutral-variant60);
+    --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant30);
+
+    /* Background */
+    --md-sys-color-background: var(--md-ref-palette-neutral10);
+    --md-sys-color-on-background: var(--md-ref-palette-neutral90);
+
+    /* Inverse */
+    --md-sys-color-inverse-surface: var(--md-ref-palette-neutral90);
+    --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral20);
+    --md-sys-color-inverse-primary: var(--md-ref-palette-primary40);
+
+    /* Legacy aliases update */
+    --mu-color-primary: var(--md-sys-color-primary);
+    --mu-color-primary-light: var(--md-sys-color-primary-container);
+    --mu-surface-background: var(--md-sys-color-background);
+    --mu-surface-foreground: var(--md-sys-color-on-background);
+    --mu-surface-card: var(--md-sys-color-surface-container-low);
+    --mu-surface-elevated: var(--md-sys-color-surface-container);
+    --mu-surface-muted: var(--md-sys-color-surface-variant);
+    --mu-surface-border: var(--md-sys-color-outline-variant);
+  }
+}
+
+/* ==========================================================================
+ * DARK MODE - User Override
+ * ========================================================================== */
+[data-theme="dark"] {
+  /* Primary */
+  --md-sys-color-primary: var(--md-ref-palette-primary80);
+  --md-sys-color-on-primary: var(--md-ref-palette-primary20);
+  --md-sys-color-primary-container: var(--md-ref-palette-primary30);
+  --md-sys-color-on-primary-container: var(--md-ref-palette-primary90);
+
+  /* Secondary */
+  --md-sys-color-secondary: var(--md-ref-palette-secondary80);
+  --md-sys-color-on-secondary: var(--md-ref-palette-secondary20);
+  --md-sys-color-secondary-container: var(--md-ref-palette-secondary30);
+  --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90);
+
+  /* Tertiary */
+  --md-sys-color-tertiary: var(--md-ref-palette-tertiary80);
+  --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary20);
+  --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary30);
+  --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90);
+
+  /* Error */
+  --md-sys-color-error: var(--md-ref-palette-error80);
+  --md-sys-color-on-error: var(--md-ref-palette-error20);
+  --md-sys-color-error-container: var(--md-ref-palette-error30);
+  --md-sys-color-on-error-container: var(--md-ref-palette-error90);
+
+  /* Surface */
+  --md-sys-color-surface: var(--md-ref-palette-neutral10);
+  --md-sys-color-on-surface: var(--md-ref-palette-neutral90);
+  --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30);
+  --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80);
+
+  /* Surface Containers (Dark) */
+  --md-sys-color-surface-container-lowest: #0F0D13;
+  --md-sys-color-surface-container-low: var(--md-ref-palette-neutral10);
+  --md-sys-color-surface-container: #211F26;
+  --md-sys-color-surface-container-high: #2B2930;
+  --md-sys-color-surface-container-highest: #36343B;
+
+  /* Outline */
+  --md-sys-color-outline: var(--md-ref-palette-neutral-variant60);
+  --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant30);
+
+  /* Background */
+  --md-sys-color-background: var(--md-ref-palette-neutral10);
+  --md-sys-color-on-background: var(--md-ref-palette-neutral90);
+
+  /* Inverse */
+  --md-sys-color-inverse-surface: var(--md-ref-palette-neutral90);
+  --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral20);
+  --md-sys-color-inverse-primary: var(--md-ref-palette-primary40);
+
+  /* Legacy aliases update */
+  --mu-color-primary: var(--md-sys-color-primary);
+  --mu-color-primary-light: var(--md-sys-color-primary-container);
+  --mu-surface-background: var(--md-sys-color-background);
+  --mu-surface-foreground: var(--md-sys-color-on-background);
+  --mu-surface-card: var(--md-sys-color-surface-container-low);
+  --mu-surface-elevated: var(--md-sys-color-surface-container);
+  --mu-surface-muted: var(--md-sys-color-surface-variant);
+  --mu-surface-border: var(--md-sys-color-outline-variant);
+}
+
+[data-theme="light"] {
+  /* Explicit light theme uses default :root values */
+  --md-sys-color-primary: var(--md-ref-palette-primary40);
+  --md-sys-color-on-primary: var(--md-ref-palette-primary100);
+  --md-sys-color-primary-container: var(--md-ref-palette-primary90);
+  --md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
+  --md-sys-color-surface: var(--md-ref-palette-neutral99);
+  --md-sys-color-on-surface: var(--md-ref-palette-neutral10);
+  --md-sys-color-background: var(--md-ref-palette-neutral99);
+  --md-sys-color-on-background: var(--md-ref-palette-neutral10);
+}
+
+/* ==========================================================================
+ * MD3 TYPOGRAPHY UTILITY CLASSES
+ * ========================================================================== */
+
+/* Text Color Utilities - MD3 compliant */
+.mu-text-primary {
+  color: var(--md-sys-color-on-surface);
+}
+
+.mu-text-secondary {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.mu-text-disabled {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+}
+
+.mu-text-error {
+  color: var(--md-sys-color-error);
+}
+
+.mu-text-success {
+  color: var(--md-sys-color-success);
+}
+
+.mu-text-warning {
+  color: var(--md-sys-color-warning);
+}
+
+/* Text Size Utilities - MD3 typescale */
+.mu-text-display-large {
+  font-size: var(--md-sys-typescale-display-large-size);
+  line-height: var(--md-sys-typescale-display-large-line-height);
+}
+
+.mu-text-display-medium {
+  font-size: var(--md-sys-typescale-display-medium-size);
+  line-height: var(--md-sys-typescale-display-medium-line-height);
+}
+
+.mu-text-display-small {
+  font-size: var(--md-sys-typescale-display-small-size);
+  line-height: var(--md-sys-typescale-display-small-line-height);
+}
+
+.mu-text-headline-large {
+  font-size: var(--md-sys-typescale-headline-large-size);
+  line-height: var(--md-sys-typescale-headline-large-line-height);
+}
+
+.mu-text-headline-medium {
+  font-size: var(--md-sys-typescale-headline-medium-size);
+  line-height: var(--md-sys-typescale-headline-medium-line-height);
+}
+
+.mu-text-headline-small {
+  font-size: var(--md-sys-typescale-headline-small-size);
+  line-height: var(--md-sys-typescale-headline-small-line-height);
+}
+
+.mu-text-title-large {
+  font-size: var(--md-sys-typescale-title-large-size);
+  line-height: var(--md-sys-typescale-title-large-line-height);
+  font-weight: var(--md-sys-typescale-title-large-weight);
+}
+
+.mu-text-title-medium {
+  font-size: var(--md-sys-typescale-title-medium-size);
+  line-height: var(--md-sys-typescale-title-medium-line-height);
+  font-weight: var(--md-sys-typescale-title-medium-weight);
+}
+
+.mu-text-title-small {
+  font-size: var(--md-sys-typescale-title-small-size);
+  line-height: var(--md-sys-typescale-title-small-line-height);
+  font-weight: var(--md-sys-typescale-title-small-weight);
+}
+
+.mu-text-body-large {
+  font-size: var(--md-sys-typescale-body-large-size);
+  line-height: var(--md-sys-typescale-body-large-line-height);
+}
+
+.mu-text-body-medium {
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+}
+
+.mu-text-body-small {
+  font-size: var(--md-sys-typescale-body-small-size);
+  line-height: var(--md-sys-typescale-body-small-line-height);
+}
+
+.mu-text-label-large {
+  font-size: var(--md-sys-typescale-label-large-size);
+  line-height: var(--md-sys-typescale-label-large-line-height);
+  font-weight: var(--md-sys-typescale-label-large-weight);
+}
+
+.mu-text-label-medium {
+  font-size: var(--md-sys-typescale-label-medium-size);
+  line-height: var(--md-sys-typescale-label-medium-line-height);
+  font-weight: var(--md-sys-typescale-label-medium-weight);
+}
+
+.mu-text-label-small {
+  font-size: var(--md-sys-typescale-label-small-size);
+  line-height: var(--md-sys-typescale-label-small-line-height);
+  font-weight: var(--md-sys-typescale-label-small-weight);
+}