.email-page {
  --sk-toast-bg: var(--color-text-primary, #3A2F26);
  --sk-toast-text: var(--color-text-inverted, #FFFEFB);
  --sk-text-on-accent: var(--sk-toast-text, #FFFEFB);
  --sk-toast-shadow: var(--shadow-popup, 0 8px 24px rgba(58, 47, 38, 0.18));
}

[data-theme="dark"] .email-page {
  --sk-toast-bg: var(--color-card, #201B17);
  --sk-toast-text: var(--color-text-primary, #F4EFE7);
  --sk-text-on-accent: var(--sk-toast-text, #F4EFE7);
  --sk-toast-shadow: var(--shadow-popup, 0 12px 32px rgba(0, 0, 0, 0.42));
}

.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:    var(--color-text-inverted);
  --sk-text-link:         var(--color-primary);           

  --sk-bg:                var(--color-bg);
  --sk-bg-subtle:         var(--color-bg);                       
  --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:          var(--color-hover);
  --sk-bg-active:         var(--color-hover-strong);
  --sk-bg-selected:       var(--color-sidebar-hover);

  --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:     var(--color-warning);

  --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:      var(--color-warning-text);

  --sk-border:            var(--color-border);
  --sk-border-medium:     var(--color-border);
  --sk-border-strong:     var(--color-border);

  --sk-shadow:            var(--shadow-bubble);
  --sk-shadow-heavy:      var(--shadow-modal);
  --sk-shadow-card:       var(--shadow-card);

  --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:           var(--color-overlay);

  /* Material 3 foundation tokens, unused until component pass. */
  --sk-m3-surface:         var(--sk-bg-surface);
  --sk-m3-surface-dim:     var(--sk-bg-subtle);
  --sk-m3-surface-bright:  var(--sk-bg-surface);
  --sk-m3-surface-container-lowest: var(--sk-bg);
  --sk-m3-surface-container-low:    var(--sk-bg-subtle);
  --sk-m3-surface-container:        var(--sk-bg-surface);
  --sk-m3-surface-container-high:   var(--sk-bg-elevated);
  --sk-m3-surface-container-highest: var(--sk-bg-overlay);
  --sk-m3-surface-tint-color: var(--color-primary);
  --sk-m3-surface-tint-level0: transparent;
  --sk-m3-surface-tint-level1: rgba(var(--color-primary-rgb), 0.05);
  --sk-m3-surface-tint-level2: rgba(var(--color-primary-rgb), 0.08);
  --sk-m3-surface-tint-level3: rgba(var(--color-primary-rgb), 0.11);
  --sk-m3-surface-tint-level4: rgba(var(--color-primary-rgb), 0.12);
  --sk-m3-surface-tint-level5: rgba(var(--color-primary-rgb), 0.14);
  --sk-m3-on-surface:      var(--sk-text);
  --sk-m3-on-surface-variant: var(--sk-text-secondary);
  --sk-m3-on-surface-rgb:  31, 31, 31;
  --sk-m3-outline:         var(--sk-border);
  --sk-m3-outline-variant: var(--sk-border-medium);

  --sk-m3-state-hover-opacity:   0.08;
  --sk-m3-state-focus-opacity:   0.12;
  --sk-m3-state-pressed-opacity: 0.12;
  --sk-m3-state-dragged-opacity: 0.16;
  --sk-m3-state-layer-on-surface: rgba(var(--sk-m3-on-surface-rgb), 1);
  --sk-m3-state-hover-on-surface: rgba(var(--sk-m3-on-surface-rgb), var(--sk-m3-state-hover-opacity));
  --sk-m3-state-focus-on-surface: rgba(var(--sk-m3-on-surface-rgb), var(--sk-m3-state-focus-opacity));
  --sk-m3-state-pressed-on-surface: rgba(var(--sk-m3-on-surface-rgb), var(--sk-m3-state-pressed-opacity));
  --sk-m3-state-dragged-on-surface: rgba(var(--sk-m3-on-surface-rgb), var(--sk-m3-state-dragged-opacity));
  --sk-m3-state-layer-primary: rgba(var(--color-primary-rgb), 1);
  --sk-m3-state-hover-primary: rgba(var(--color-primary-rgb), var(--sk-m3-state-hover-opacity));
  --sk-m3-state-focus-primary: rgba(var(--color-primary-rgb), var(--sk-m3-state-focus-opacity));
  --sk-m3-state-pressed-primary: rgba(var(--color-primary-rgb), var(--sk-m3-state-pressed-opacity));

  --sk-m3-focus-ring-color:  rgba(var(--color-primary-rgb), 0.38);
  --sk-m3-focus-ring-width:  2px;
  --sk-m3-focus-ring-offset: 2px;
  --sk-m3-focus-ring-radius: var(--radius-sm);
  --sk-m3-focus-ring-shadow: 0 0 0 var(--sk-m3-focus-ring-width) var(--sk-m3-focus-ring-color);

  --sk-m3-elevation-level0: none;
  --sk-m3-elevation-level1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.15);
  --sk-m3-elevation-level2: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.15);
  --sk-m3-elevation-level3: 0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 8px rgba(0, 0, 0, 0.15);
  --sk-m3-elevation-level4: 0 2px 3px rgba(0, 0, 0, 0.30), 0 6px 10px rgba(0, 0, 0, 0.15);
  --sk-m3-elevation-level5: 0 4px 4px rgba(0, 0, 0, 0.30), 0 8px 12px rgba(0, 0, 0, 0.15);

  --sk-m3-density-scale: 0;
  --sk-m3-density-touch-target: 48px;
  --sk-m3-density-icon-button-size: 40px;
  --sk-m3-density-toolbar-height: 56px;
  --sk-m3-density-list-one-line: 48px;
  --sk-m3-density-list-two-line: 64px;
  --sk-m3-density-compact-control: 32px;

  --sk-toast-bg:          var(--color-text-primary);
  --sk-toast-text:        var(--color-text-inverted);
  --sk-toast-success-text: var(--color-text-primary);
  --sk-toast-shadow:      var(--shadow-popup);

  --email-compose-cta:       var(--color-text-primary);
  --email-compose-cta-hover: var(--color-text-secondary);
  --email-compose-on-cta:    var(--color-text-inverted);
  --email-active-mark:       var(--color-text-primary);
  --email-subtle-mark:       var(--color-text-secondary);
  --email-focus-mark:        var(--color-text-primary);
  --email-focus-border:      var(--color-border);
  --email-control-fill:      var(--color-text-primary);
  --email-control-fill-hover: var(--color-text-secondary);
  --email-control-on-fill:   var(--color-text-inverted);
  --email-soft-highlight:    var(--color-hover);
  --email-soft-highlight-strong: var(--color-hover-strong);
  --email-soft-border:       var(--color-border);
  --email-unread-mark:       var(--color-primary);

  --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:       var(--color-danger);

  --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:         var(--color-bg);

  --sk-text-on-accent:    var(--color-text-inverted);

  --sk-border-strong:     var(--color-border);

  --sk-shadow:            var(--shadow-bubble);
  --sk-shadow-heavy:      var(--shadow-modal);

  --sk-overlay:           var(--color-overlay);

  --sk-m3-surface:         var(--sk-bg-surface);
  --sk-m3-surface-dim:     var(--sk-bg-subtle);
  --sk-m3-surface-bright:  var(--sk-bg-surface);
  --sk-m3-surface-container-lowest: var(--sk-bg);
  --sk-m3-surface-container-low:    var(--sk-bg-subtle);
  --sk-m3-surface-container:        var(--sk-bg-surface);
  --sk-m3-surface-container-high:   var(--sk-bg-elevated);
  --sk-m3-surface-container-highest: var(--sk-bg-overlay);
  --sk-m3-surface-tint-color: var(--color-primary);
  --sk-m3-surface-tint-level0: transparent;
  --sk-m3-surface-tint-level1: rgba(var(--color-primary-rgb), 0.08);
  --sk-m3-surface-tint-level2: rgba(var(--color-primary-rgb), 0.11);
  --sk-m3-surface-tint-level3: rgba(var(--color-primary-rgb), 0.14);
  --sk-m3-surface-tint-level4: rgba(var(--color-primary-rgb), 0.15);
  --sk-m3-surface-tint-level5: rgba(var(--color-primary-rgb), 0.18);
  --sk-m3-on-surface:      var(--sk-text);
  --sk-m3-on-surface-variant: var(--sk-text-secondary);
  --sk-m3-on-surface-rgb:  232, 230, 225;
  --sk-m3-outline:         var(--sk-border);
  --sk-m3-outline-variant: var(--sk-border-medium);

  --sk-m3-state-layer-on-surface: rgba(var(--sk-m3-on-surface-rgb), 1);
  --sk-m3-state-hover-on-surface: rgba(var(--sk-m3-on-surface-rgb), var(--sk-m3-state-hover-opacity));
  --sk-m3-state-focus-on-surface: rgba(var(--sk-m3-on-surface-rgb), var(--sk-m3-state-focus-opacity));
  --sk-m3-state-pressed-on-surface: rgba(var(--sk-m3-on-surface-rgb), var(--sk-m3-state-pressed-opacity));
  --sk-m3-state-dragged-on-surface: rgba(var(--sk-m3-on-surface-rgb), var(--sk-m3-state-dragged-opacity));
  --sk-m3-state-layer-primary: rgba(var(--color-primary-rgb), 1);
  --sk-m3-state-hover-primary: rgba(var(--color-primary-rgb), var(--sk-m3-state-hover-opacity));
  --sk-m3-state-focus-primary: rgba(var(--color-primary-rgb), var(--sk-m3-state-focus-opacity));
  --sk-m3-state-pressed-primary: rgba(var(--color-primary-rgb), var(--sk-m3-state-pressed-opacity));

  --sk-m3-focus-ring-color: rgba(var(--color-primary-rgb), 0.54);

  --sk-m3-elevation-level0: none;
  --sk-m3-elevation-level1: 0 1px 2px rgba(0, 0, 0, 0.44), 0 1px 3px rgba(0, 0, 0, 0.28);
  --sk-m3-elevation-level2: 0 1px 2px rgba(0, 0, 0, 0.46), 0 2px 6px rgba(0, 0, 0, 0.30);
  --sk-m3-elevation-level3: 0 1px 3px rgba(0, 0, 0, 0.48), 0 4px 8px rgba(0, 0, 0, 0.32);
  --sk-m3-elevation-level4: 0 2px 3px rgba(0, 0, 0, 0.50), 0 6px 10px rgba(0, 0, 0, 0.34);
  --sk-m3-elevation-level5: 0 4px 4px rgba(0, 0, 0, 0.52), 0 8px 12px rgba(0, 0, 0, 0.36);

  --sk-toast-bg:          var(--color-card);
  --sk-toast-text:        var(--color-text-inverted);
  --sk-toast-success-text: var(--color-text-inverted);
  --sk-toast-shadow:      var(--shadow-popup);

  --email-active-mark:       var(--color-text-primary);
  --email-subtle-mark:       var(--color-text-secondary);
  --email-focus-mark:        var(--color-text-primary);
  --email-focus-border:      var(--color-border);
  --email-control-fill:      var(--bb-sage-dark);
  --email-control-fill-hover: #3D6B57;
  --email-control-on-fill:   #FFFFFF;
  --email-compose-cta:       var(--color-primary);
  --email-compose-cta-hover: var(--color-primary-hover);
  --email-compose-on-cta:    var(--color-text-inverted);
  --email-soft-highlight:    rgba(255, 255, 255, 0.06);
  --email-soft-highlight-strong: rgba(255, 255, 255, 0.10);
  --email-soft-border:       rgba(255, 255, 255, 0.14);
  --email-unread-mark:       var(--color-primary);

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

  --sk-error-toast:       var(--color-danger);
}

/* Email micro type scale — the deliberate off-scale sizes the r122–r137 mobile
   program shipped, held as tokens so the font-compliance contract can guard the
   robot without rounding hand-tested screens to the global 12/13/15/17/20 steps
   (component-token pattern, cf. --font-size-file-chip-name / --font-size-picker-*).
   Lives HERE because email-variables.css is the one email stylesheet BOTH
   index.html and embed.html load first (embed skips email-base.css, and
   compose-sofia/blod-bolge use these tokens on the embed surface too).
   Values are pixel-identical to what shipped; re-tune HERE, never inline. */
:root {
  --email-fs-micro: 11px;       /* badges, counters, kbd hints        */
  --email-fs-note: 12.5px;      /* compose-sofia small notes          */
  --email-fs-meta: 13.5px;      /* metadata rows, list sublines       */
  --email-fs-body-sm: 14px;     /* compact body copy                  */
  --email-fs-body-tight: 14.5px;/* fokus-reader tight body            */
  --email-fs-body-lg: 16px;     /* roomy body (fokus reader)          */
  --email-fs-heading-sm: 18px;  /* small headings, demo overlays      */
  --email-fs-heading: 22px;     /* reader/list headings               */
}