:root {
  --md-sys-color-primary-40: #6750A4;
  --md-sys-color-primary-80: #D0BCFF;
  --md-sys-color-primary-100: #FFFFFF;
  --md-sys-color-secondary-40: #625B71;
  --md-sys-color-secondary-80: #CCC2DC;
  --md-sys-color-secondary-100: #FFFFFF;
  --md-sys-color-tertiary-40: #7D5260;
  --md-sys-color-tertiary-80: #EFB8C8;
  --md-sys-color-tertiary-100: #FFFFFF;
  --md-sys-color-error-40: #B3261E;
  --md-sys-color-error-80: #F2B8B5;
  --md-sys-color-error-100: #FFFFFF;
  --md-sys-color-neutral-10: #1D1B20;
  --md-sys-color-neutral-20: #313033;
  --md-sys-color-neutral-90: #E6E1E5;
  --md-sys-color-neutral-95: #F4EFF4;
  --md-sys-color-neutral-99: #FFFBFE;
  --md-sys-color-neutral-100: #FFFFFF;
  --md-sys-color-neutralVariant-30: #49454F;
  --md-sys-color-neutralVariant-50: #79747E;
  --md-sys-color-neutralVariant-90: #E7E0EC;
  --md-sys-roles-primary: #6750A4;
  --md-sys-roles-on-primary: #FFFFFF;
  --md-sys-roles-primary-container: #D0BCFF;
  --md-sys-roles-on-primary-container: {color.primary.10};
  --md-sys-roles-secondary: #625B71;
  --md-sys-roles-on-secondary: #FFFFFF;
  --md-sys-roles-tertiary: #7D5260;
  --md-sys-roles-on-tertiary: #FFFFFF;
  --md-sys-roles-error: #B3261E;
  --md-sys-roles-on-error: #FFFFFF;
  --md-sys-roles-surface: #FFFBFE;
  --md-sys-roles-on-surface: #1D1B20;
  --md-sys-roles-surface-variant: #E7E0EC;
  --md-sys-roles-on-surface-variant: #49454F;
  --md-sys-roles-outline: #79747E;
  --md-sys-roles-outline-variant: #E7E0EC;
  --md-sys-typography-display-large-fontFamily: Roboto, system-ui, sans-serif;
  --md-sys-typography-display-large-size: 57px;
  --md-sys-typography-display-large-weight: 400;
  --md-sys-typography-display-large-lineHeight: 64px;
  --md-sys-typography-display-large-letterSpacing: -0.25px;
  --md-sys-typography-headline-medium-size: 28px;
  --md-sys-typography-headline-medium-weight: 400;
  --md-sys-typography-headline-medium-lineHeight: 36px;
  --md-sys-typography-title-medium-size: 16px;
  --md-sys-typography-title-medium-weight: 500;
  --md-sys-typography-title-medium-lineHeight: 24px;
  --md-sys-typography-title-medium-letterSpacing: 0.15px;
  --md-sys-typography-body-medium-size: 14px;
  --md-sys-typography-body-medium-weight: 400;
  --md-sys-typography-body-medium-lineHeight: 20px;
  --md-sys-typography-body-medium-letterSpacing: 0.25px;
  --md-sys-typography-label-medium-size: 12px;
  --md-sys-typography-label-medium-weight: 500;
  --md-sys-typography-label-medium-lineHeight: 16px;
  --md-sys-typography-label-medium-letterSpacing: 0.5px;
  --md-sys-shape-radius-xs: 4px;
  --md-sys-shape-radius-sm: 8px;
  --md-sys-shape-radius-md: 12px;
  --md-sys-shape-radius-lg: 16px;
  --md-sys-shape-radius-xl: 28px;
  --md-sys-spacing-grid: 4px;
  --md-sys-spacing-xs: 4px;
  --md-sys-spacing-sm: 8px;
  --md-sys-spacing-md: 12px;
  --md-sys-spacing-lg: 16px;
  --md-sys-spacing-xl: 24px;
  --md-sys-spacing-xxl: 32px;
  --md-sys-elevation-level1: 0 1px 2px rgba(0,0,0,0.14);
  --md-sys-elevation-level2: 0 2px 6px rgba(0,0,0,0.16);
  --md-sys-elevation-level3: 0 4px 12px rgba(0,0,0,0.18);
  --md-sys-modes-dark-roles-surface: #1D1B20;
  --md-sys-modes-dark-roles-on-surface: #E6E1E5;
  --md-sys-modes-dark-roles-primary: #D0BCFF;
  --md-sys-modes-dark-roles-on-primary: {color.primary.20};
  --md-sys-modes-dark-roles-primary-container: {color.primary.30};
  --md-sys-modes-dark-roles-on-primary-container: {color.primary.90};
}

/* Dark mode overrides */
[data-theme="dark"] {
  --md-sys-roles-surface: #1D1B20;
  --md-sys-roles-on-surface: #E6E1E5;
  --md-sys-roles-primary: #D0BCFF;
  --md-sys-roles-on-primary: {color.primary.20};
  --md-sys-roles-primary-container: {color.primary.30};
  --md-sys-roles-on-primary-container: {color.primary.90};
}