:root {
  --sys-color-error: #BE123C;
  --sys-color-on-error: #FFFFFF;
  --sys-color-error-container: rgba(225, 29, 72, 0.15);
  --sys-color-on-error-container: #FDA4AF;
  
  --sys-color-warning: #F2B72F;
  --sys-color-on-warning: #3E2E00;
  --sys-color-warning-container: #FFE08F;
  --sys-color-on-warning-container: #261900;
  
  --sys-color-info: #00D1FF;
  --sys-color-on-info: #003544;
  --sys-color-info-container: #BBEBFF;
  --sys-color-on-info-container: #001F29;
  
  --sys-color-success: #059669;
  --sys-color-on-success: #FFFFFF;
  --sys-color-success-container: rgba(16, 185, 129, 0.15);
  --sys-color-on-success-container: #6EE7B7;
  
  --sys-color-favorite: #F2B72F;
  
  --sys-border-radius-sm: 4px;
  --sys-border-radius: 8px;
  --sys-border-radius-lg: 12px;
  
  --sys-spacing-ty: 2px;
  --sys-spacing-xs: 4px;
  --sys-spacing-sm: 8px;
  --sys-spacing-md: 16px;
  --sys-spacing-lg: 24px;
  --sys-spacing-xl: 32px;

  --sys-elevation-base: 0;
  --sys-elevation-dropdown: 100;
  --sys-elevation-sticky: 200; 
  --sys-elevation-modal: 1000;
  --sys-elevation-alert: 2000;
}