/* * Material 3 Design Tokens — Default CMS Theme * * These CSS custom properties provide the theme contract that MFEs consume. * Shell applies [data-theme="light"] (default) or [data-theme="dark"] on . * * Reference: Material 3 color tokens simplified for CMS use. */ :root, [data-theme="light"] { /* Primary */ --md-sys-color-primary: #6750A4; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #EADDFF; --md-sys-color-on-primary-container: #21005D; /* Secondary */ --md-sys-color-secondary: #625B71; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #E8DEF8; --md-sys-color-on-secondary-container: #1D192B; /* Tertiary */ --md-sys-color-tertiary: #7D5260; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #FFD8E4; --md-sys-color-on-tertiary-container: #31111D; /* Surface */ --md-sys-color-surface: #FFFBFE; --md-sys-color-on-surface: #1C1B1F; --md-sys-color-surface-variant: #E7E0EC; --md-sys-color-on-surface-variant: #49454F; /* Background */ --md-sys-color-background: #FFFBFE; --md-sys-color-on-background: #1C1B1F; /* Outline */ --md-sys-color-outline: #79747E; --md-sys-color-outline-variant: #CAC4D0; /* Error */ --md-sys-color-error: #B3261E; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #F9DEDC; --md-sys-color-on-error-container: #410E0B; /* Elevation / Shadow */ --md-sys-elevation-level0: none; --md-sys-elevation-level1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15); --md-sys-elevation-level2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15); /* Typography scale */ --md-sys-typescale-body-large-font: 400 1rem/1.5 'Roboto', sans-serif; --md-sys-typescale-title-large-font: 400 1.375rem/1.75rem 'Roboto', sans-serif; --md-sys-typescale-headline-small-font: 400 1.5rem/2rem 'Roboto', sans-serif; /* Shape */ --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; } [data-theme="dark"] { --md-sys-color-primary: #D0BCFF; --md-sys-color-on-primary: #381E72; --md-sys-color-primary-container: #4F378B; --md-sys-color-on-primary-container: #EADDFF; --md-sys-color-secondary: #CCC2DC; --md-sys-color-on-secondary: #332D41; --md-sys-color-secondary-container: #4A4458; --md-sys-color-on-secondary-container: #E8DEF8; --md-sys-color-tertiary: #EFB8C8; --md-sys-color-on-tertiary: #492532; --md-sys-color-tertiary-container: #633B48; --md-sys-color-on-tertiary-container: #FFD8E4; --md-sys-color-surface: #1C1B1F; --md-sys-color-on-surface: #E6E1E5; --md-sys-color-surface-variant: #49454F; --md-sys-color-on-surface-variant: #CAC4D0; --md-sys-color-background: #1C1B1F; --md-sys-color-on-background: #E6E1E5; --md-sys-color-outline: #938F99; --md-sys-color-outline-variant: #49454F; --md-sys-color-error: #F2B8B5; --md-sys-color-on-error: #601410; --md-sys-color-error-container: #8C1D18; --md-sys-color-on-error-container: #F9DEDC; }