/* EvoCommerce design tokens. MudBlazor owns the selected light/dark palette; these semantic roles are the single bridge from that palette to application layout and components. */ :root { --evo-color-primary: var(--mud-palette-primary); --evo-color-on-navigation-gradient: #fff; --evo-color-primary-strong: var(--mud-palette-primary-darken); --evo-color-primary-soft: var(--mud-palette-primary-lighten); --evo-color-on-primary: var(--mud-palette-primary-text); --evo-color-primary-container: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-background)); --evo-color-on-primary-container: var(--mud-palette-text-primary); --evo-color-secondary: var(--mud-palette-secondary); --evo-color-on-secondary: var(--mud-palette-secondary-text); --evo-color-secondary-container: color-mix(in srgb, var(--mud-palette-secondary) 14%, var(--mud-palette-background)); --evo-color-on-secondary-container: var(--mud-palette-text-primary); --evo-color-tertiary: var(--mud-palette-tertiary); --evo-color-on-tertiary: var(--mud-palette-tertiary-text); --evo-color-tertiary-container: color-mix(in srgb, var(--mud-palette-tertiary) 14%, var(--mud-palette-background)); --evo-color-on-tertiary-container: var(--mud-palette-text-primary); --evo-color-surface: var(--mud-palette-background); --evo-color-on-surface: var(--mud-palette-text-primary); --evo-color-on-surface-variant: var(--mud-palette-text-secondary); --evo-color-on-surface-disabled: var(--mud-palette-text-disabled); --evo-color-surface-container-lowest: var(--mud-palette-background); --evo-color-surface-container-low: color-mix(in srgb, var(--mud-palette-background) 72%, var(--mud-palette-surface)); --evo-color-surface-container: var(--mud-palette-surface); --evo-color-surface-container-high: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-primary)); --evo-color-surface-container-highest: color-mix(in srgb, var(--mud-palette-surface) 88%, var(--mud-palette-primary)); --evo-color-outline: var(--mud-palette-lines-inputs); --evo-color-outline-variant: var(--mud-palette-lines-default); --evo-color-divider: var(--mud-palette-divider); --evo-color-table-divider: var(--mud-palette-table-lines); --evo-color-error-hover: var(--mud-palette-error-hover); --evo-color-action-hover: var(--mud-palette-action-default-hover); --evo-color-state-hover: color-mix(in srgb, var(--evo-color-on-surface) 8%, transparent); --evo-color-error: var(--mud-palette-error); --evo-color-on-error: var(--mud-palette-error-text); --evo-color-error-container: color-mix(in srgb, var(--mud-palette-error) 14%, var(--mud-palette-background)); --evo-color-on-error-container: var(--evo-color-on-surface); --evo-color-success: var(--mud-palette-success); --evo-color-on-success: var(--mud-palette-success-text); --evo-color-success-container: color-mix(in srgb, var(--mud-palette-success) 14%, var(--mud-palette-background)); --evo-color-on-success-container: var(--evo-color-on-surface); --evo-color-warning: var(--mud-palette-warning); --evo-color-on-warning: var(--mud-palette-warning-text); --evo-color-warning-container: color-mix(in srgb, var(--mud-palette-warning) 14%, var(--mud-palette-background)); --evo-color-info: var(--mud-palette-info); --evo-color-on-info: var(--mud-palette-info-text); --evo-color-info-container: color-mix(in srgb, var(--mud-palette-info) 14%, var(--mud-palette-background)); /* Data visualization roles, shared by every chart. Not status indicators. */ --evo-chart-sales: var(--evo-color-primary); --evo-chart-revenue: var(--evo-color-primary); --evo-chart-expenses: var(--evo-color-tertiary); --evo-chart-grid: var(--evo-color-outline-variant); --evo-chart-label: var(--evo-color-on-surface-variant); --evo-chart-height: 17.5rem; /* One 4px rhythm, with a compact desktop ERP density. */ --evo-space-1: 0.25rem; --evo-space-2: 0.5rem; --evo-space-3: 0.75rem; --evo-space-4: 1rem; --evo-space-5: 1.25rem; --evo-space-6: 1.5rem; --evo-space-8: 2rem; --evo-space-12: 3rem; --evo-page-gutter: var(--evo-space-6); --evo-pane-gap: var(--evo-space-4); --evo-panel-padding: var(--evo-space-6); --evo-shape-xs: 0.25rem; --evo-shape-sm: 0.5rem; --evo-shape-md: 0.75rem; --evo-shape-lg: 1rem; --evo-shape-xl: 1.5rem; --evo-shape-full: 999px; /* Material 3 button scale. Small Mud buttons use the extra-small step in dense ERP tables; the unqualified button is the 40px default. */ --evo-button-height-xs: 2rem; --evo-button-height-sm: 2.5rem; --evo-button-height-compact: 2.25rem; --evo-button-height-md: 3rem; --evo-button-height-lg: 3.5rem; --evo-button-height-xl: 4rem; --evo-button-padding-inline-xs: var(--evo-space-3); --evo-button-padding-inline-compact: var(--evo-space-3); --evo-button-padding-inline: var(--evo-space-4); --evo-button-shape-round: var(--evo-shape-full); --evo-button-shape-square: var(--evo-shape-md); --evo-button-tonal-container: var(--evo-color-secondary-container); --evo-button-on-tonal-container: var(--evo-color-on-secondary-container); /* Shared controls stay compact on desktop; coarse pointers receive a larger hit area without inflating data-dense table rows visually. */ --evo-icon-button-size: 2.5rem; --evo-icon-button-size-small: 2rem; --evo-touch-target-size: 3rem; --evo-field-helper-gap: var(--evo-space-1); --evo-dialog-inline-gutter: var(--evo-space-4); --evo-nav-rail-width: 5.5rem; --evo-nav-rail-indicator-width: 3.5rem; /* Tonal levels are surface roles, not six increasingly heavy shadows. */ --evo-elevation-0: var(--evo-color-surface); --evo-elevation-1: var(--evo-color-surface-container-low); --evo-elevation-2: var(--evo-color-surface-container); --evo-elevation-3: var(--evo-color-surface-container-high); --evo-elevation-4: var(--evo-color-surface-container-highest); --evo-shadow-none: none; --evo-shadow-button: 0 1px 3px color-mix(in srgb, var(--evo-color-on-surface) 18%, transparent); --evo-shadow-floating: 0 8px 24px color-mix(in srgb, var(--evo-color-on-surface) 16%, transparent); --evo-shadow-dialog: 0 16px 48px color-mix(in srgb, var(--evo-color-on-surface) 22%, transparent); /* Typography stays owned by AppTheme, including the selected bilingual font. These aliases give custom UI the same semantic scale as Mud components. */ --evo-type-title-size: var(--mud-typography-h6-size); --evo-type-title-weight: var(--mud-typography-h6-weight); --evo-type-body-size: var(--mud-typography-body1-size); --evo-type-body-small-size: var(--mud-typography-body2-size); --evo-type-label-size: var(--mud-typography-button-size); --evo-type-label-weight: var(--mud-typography-button-weight); --evo-type-caption-size: var(--mud-typography-caption-size); --evo-motion-fast: 120ms; --evo-motion-standard: 200ms; --evo-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --evo-focus-ring: 2px solid var(--evo-color-primary); --evo-typeface-ui: var(--mud-typography-default-family); } /* In dark palettes, on-surface is white. Deriving elevation shadows from it makes dialogs glow; a quiet edge and dark ambient shadow separate them. */ :root[data-evo-color-scheme="dark"] { --evo-shadow-button: 0 1px 3px rgba(0, 0, 0, 0.24); --evo-shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.32); --evo-shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--evo-color-on-surface) 10%, transparent), 0 18px 48px rgba(0, 0, 0, 0.42); } /* The hand-tuned Orange accent containers stay the same in either surface style. */ :root[data-evo-theme="Orange"] { --evo-color-primary-container: #FFE0CC; --evo-color-on-primary-container: #3A1200; --evo-color-secondary-container: #D6E3F7; --evo-color-on-secondary-container: #0B1F36; --evo-color-tertiary-container: #B3ECEE; --evo-color-on-tertiary-container: #002022; --evo-color-error-container: #F9DEDC; --evo-color-on-error-container: #410E0B; --evo-color-inverse-surface: #2B2F35; --evo-color-on-inverse-surface: #EFF1F4; --evo-color-inverse-primary: #FFB694; --evo-color-surface-tint: #E65100; } :root[data-evo-theme="Orange"][data-evo-color-scheme="dark"] { --evo-color-primary-container: #243044; --evo-color-on-primary-container: #FFDCCB; --evo-color-secondary-container: #2D486D; --evo-color-on-secondary-container: #D5E3FF; --evo-color-tertiary-container: #004F53; --evo-color-on-tertiary-container: #B3ECEE; --evo-color-error-container: #8C1D18; --evo-color-on-error-container: #F9DEDC; --evo-color-inverse-surface: #E2E5E9; --evo-color-on-inverse-surface: #2B2F35; --evo-color-inverse-primary: #A83900; --evo-color-surface-tint: transparent; } /* Neutral means no primary-color interpolation in structural surfaces. Accent/semantic containers (selection, alerts, chips) intentionally stay colored. The legacy Orange selector preserves its appearance before preferences load. */ :root[data-evo-surface-style="neutral"], :root[data-evo-theme="Orange"]:not([data-evo-surface-style]) { --evo-color-surface-dim: #DEE1E5; --evo-color-surface-bright: #FAFBFC; --evo-color-surface-container-lowest: #FFFFFF; --evo-color-surface-container-low: #F4F6F8; --evo-color-surface-container: #EEF0F3; --evo-color-surface-container-high: #E8EBEE; --evo-color-surface-container-highest: #E2E5E9; --evo-color-surface-tint: transparent; } :root[data-evo-surface-style="neutral"][data-evo-color-scheme="dark"], :root[data-evo-theme="Orange"][data-evo-color-scheme="dark"]:not([data-evo-surface-style]) { --evo-color-surface-dim: #10151D; --evo-color-surface-bright: #3B495C; --evo-color-surface-container-lowest: #0C1017; --evo-color-surface-container-low: #1B232E; --evo-color-surface-container: #222C39; --evo-color-surface-container-high: #2B3645; --evo-color-surface-container-highest: #354253; --evo-color-surface-tint: transparent; } @media (max-width: 600px) { :root { --evo-page-gutter: var(--evo-space-4); --evo-panel-padding: var(--evo-space-4); --evo-pane-gap: var(--evo-space-3); } } @media (prefers-reduced-motion: reduce) { :root { --evo-motion-fast: 0ms; --evo-motion-standard: 0ms; } }