.email-app {

  --sk-text:              var(--color-text-primary);
  --sk-text-secondary:    var(--color-text-secondary);
  --sk-text-tertiary:     var(--color-text-tertiary);    
  --sk-text-muted:        var(--color-text-tertiary);
  --sk-text-on-accent:    #fff;
  --sk-text-link:         var(--color-primary);           

  --sk-bg:                var(--color-bg);
  --sk-bg-subtle:         #F5F5F3;                       
  --sk-bg-surface:        var(--color-card);
  --sk-bg-elevated:       var(--color-card);
  --sk-bg-overlay:        var(--color-card);
  --sk-bg-input:          var(--color-card);
  --sk-bg-hover:          rgba(0, 0, 0, 0.04);
  --sk-bg-active:         rgba(0, 0, 0, 0.07);
  --sk-bg-selected:       rgba(0, 0, 0, 0.03);          

  --sk-accent:            var(--color-primary);
  --sk-accent-hover:      var(--color-primary-hover);
  --sk-accent-bg:         rgba(var(--color-primary-rgb), 0.08);
  --sk-accent-bg-medium:  var(--color-primary-light);     
  --sk-accent-bg-strong:  rgba(var(--color-primary-rgb), 0.18);
  
  --sk-accent-3:          rgba(var(--color-primary-rgb), 0.03);
  --sk-accent-6:          rgba(var(--color-primary-rgb), 0.06);
  --sk-accent-10:         rgba(var(--color-primary-rgb), 0.10);
  --sk-accent-15:         rgba(var(--color-primary-rgb), 0.15);
  --sk-accent-light:      rgba(var(--color-primary-rgb), 0.15);
  
  --sk-bg-secondary:      var(--color-bg);
  --sk-primary:           var(--color-primary);
  --sk-surface:           var(--color-card);
  --sk-warning-hover:     #d97706;

  --sk-danger:            var(--color-error);
  --sk-danger-hover:      var(--color-error-hover);
  --sk-danger-bg:         var(--color-error-light);
  --sk-success:           var(--color-success);
  --sk-success-bg:        var(--color-success-light);
  --sk-warning:           var(--color-warning);
  --sk-warning-bg:        var(--color-warning-light);
  --sk-warning-text:      #5f4b0f;

  --sk-border:            var(--color-border);
  --sk-border-medium:     var(--color-border);
  --sk-border-strong:     rgba(31, 31, 30, 0.2);

  --sk-shadow:            rgba(0, 0, 0, 0.035);
  --sk-shadow-heavy:      rgba(31, 31, 30, 0.15);
  --sk-shadow-card:       rgba(0, 0, 0, 0.035) 0px 4px 20px, rgba(31, 31, 30, 0.15) 0px 0px 0px 0.5px;

  --sk-transition:        180ms ease;
  --sk-transition-layout: 300ms cubic-bezier(0.165, 0.85, 0.45, 1);
  --sk-transition-fast:   120ms cubic-bezier(0.16, 1, 0.3, 1);

  --sk-overlay:           rgba(0, 0, 0, 0.5);

  --sk-toast-bg:          #323232;
  --sk-toast-text:        #fff;
  --sk-toast-shadow:      rgba(0, 0, 0, 0.20);

  --sk-chip-bg:           var(--color-bg);
  --sk-chip-text:         var(--color-text-primary);
  --sk-chip-icon:         var(--color-text-secondary);

  --sk-input-border:      var(--color-border);
  --sk-input-text:        var(--color-text-primary);
  --sk-input-placeholder: var(--color-text-tertiary);

  --sk-error-toast:       #b71c1c;

  --sk-font-xs:   var(--font-size-xs);    
  --sk-font-sm:   var(--font-size-sm);    
  --sk-font-base: var(--font-size-base);  
  --sk-font-md:   var(--font-size-md);    
  --sk-font-lg:   var(--font-size-lg);    
  --sk-font-xl:   var(--font-size-xl);    
}

[data-theme="dark"] .email-app {

  --sk-bg-hover:          rgba(255, 255, 255, 0.04);
  --sk-bg-active:         rgba(255, 255, 255, 0.07);
  --sk-bg-selected:       rgba(255, 255, 255, 0.03);
  --sk-bg-subtle:         #1E2538;
  --sk-bg-surface:        #232A3B;
  --sk-bg-elevated:       #232A3B;

  --sk-text:              #E8ECF4;
  --sk-text-secondary:    #C4CAD9;
  --sk-text-muted:        #8A92A6;
  --sk-text-tertiary:     #8A92A6;
  --sk-text-on-accent:    #fff;

  --sk-border:            #2A3250;
  --sk-border-medium:     #2A3250;
  --sk-border-strong:     #354060;

  --sk-shadow:            rgba(0, 0, 0, 0.4);
  --sk-shadow-heavy:      rgba(0, 0, 0, 0.5);

  --sk-overlay:           rgba(0, 0, 0, 0.65);

  --sk-toast-bg:          #404040;
  --sk-toast-text:        #fff;
  --sk-toast-shadow:      rgba(0, 0, 0, 0.5);

  --sk-warning-text:      var(--color-warning);

  --sk-error-toast:       #c62828;
}