/* Neutral Material-inspired roles. Brand values are provisional for Yuli. */
:root {
  --md-sys-color-primary: #40576c;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e0e8ef;
  --md-sys-color-on-primary-container: #263d51;
  --md-sys-color-secondary: #52616f;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-surface-container-low: #f7f8fa;
  --md-sys-color-surface-container: #eef1f4;
  --md-sys-color-surface-container-high: #e5e9ee;
  --md-sys-color-on-surface: #1b2026;
  --md-sys-color-on-surface-variant: #535e69;
  --md-sys-color-outline: #7b8793;
  --md-sys-color-outline-variant: #d5dce3;
  --md-sys-color-scrim: #000000;
  --md-sys-color-disabled: #67727d;
  --md-sys-color-disabled-container: #edf0f3;
  --state-success: #216345;
  --state-success-container: #e8f3ec;
  --state-warning: #80511b;
  --state-warning-container: #fff4df;
  --state-error: #a02f2a;
  --state-error-container: #ffedea;
  --state-info: #315579;
  --state-info-container: #e8eff8;
  --state-hover: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
  --state-pressed: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
  --state-focus: var(--md-sys-color-primary);
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --md-sys-typescale-headline: 1.625rem;
  --md-sys-typescale-title: 1.0625rem;
  --md-sys-typescale-body: 0.875rem;
  --md-sys-typescale-label: 0.8125rem;
  --md-sys-typescale-small: 0.75rem;
  --line-height-body: 1.55;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 20px;
  --radius-full: 999px;
  --elevation-flat: none;
  --elevation-low: 0 1px 3px color-mix(in srgb, var(--md-sys-color-scrim) 8%, transparent);
  --elevation-overlay: 0 8px 28px color-mix(in srgb, var(--md-sys-color-scrim) 18%, transparent);
  --control-height: 40px;
  --control-touch-target: 48px;
  --control-icon: 20px;
  --table-row-height: 44px;
  --navigation-width: 236px;
  --layout-max: 1320px;
  --motion-short: 120ms;
  --chart-primary: #40576c;
  --chart-secondary: #98661f;
  --chart-series-1: #40576c;
  --chart-series-2: #377d91;
  --chart-series-3: #ad7730;
  --chart-series-4: #40825f;
  --chart-series-5: #b1544a;
  --chart-series-6: #7866a0;
  --chart-series-7: #657281;
  --chart-series-8: #a1658a;
}