/* Custom Color Variables */
:root {
  --rust-red: 175 46 27;
  --on-rust-red: 255 255 255;
  
  --burnt-orange: 204 99 36;
  --on-burnt-orange: 255 255 255;
  
  --slate-blue: 59 75 89;
  --on-slate-blue: 255 255 255;
  
  --warm-taupe: 191 160 122;
  --on-warm-taupe: 0 0 0;
  
  --vivid-orange: 237 128 8;
  --on-vivid-orange: 0 0 0;
  
  --coral-red: 237 63 28;
  --on-coral-red: 255 255 255;
  
  --crimson: 191 27 27;
  --on-crimson: 255 255 255;
  
  --olive-drab: 115 107 30;
  --on-olive-drab: 255 255 255;
  
  --terra-cotta: 208 123 83;
  --on-terra-cotta: 0 0 0;
  
  --taupe: 115 99 86;
  --on-taupe: 255 255 255;
  
  --cardinal-red: 173 29 29;
  --on-cardinal-red: 255 255 255;
  
  --copper: 191 124 42;
  --on-copper: 255 255 255;
  
  --tan: 192 156 111;
  --on-tan: 0 0 0;
  
  --steel-blue: 105 143 156;
  --on-steel-blue: 0 0 0;
  
  --sage-green: 124 149 107;
  --on-sage-green: 0 0 0;
  
  --dusty-purple: 93 97 143;
  --on-dusty-purple: 255 255 255;
  
  --dark-umber: 59 54 51;
  --on-dark-umber: 255 255 255;
  
  --warm-gray: 103 105 94;
  --on-warm-gray: 255 255 255;
}

/* Dark Mode Overrides */
[data-color-scheme='dark'] {
  :root {
    --on-surface: var(--gray-12);
    --rust-red: 209 91 74;
    --on-rust-red: 0 0 0;
    
    --burnt-orange: 232 139 82;
    --on-burnt-orange: 0 0 0;
    
    --slate-blue: 90 112 131;
    --on-slate-blue: 255 255 255;
    
    --warm-taupe: 212 188 160;
    --on-warm-taupe: 0 0 0;
    
    --vivid-orange: 255 159 60;
    --on-vivid-orange: 0 0 0;
    
    --coral-red: 255 104 71;
    --on-coral-red: 0 0 0;
    
    --crimson: 227 67 67;
    --on-crimson: 0 0 0;
    
    --olive-drab: 153 142 41;
    --on-olive-drab: 0 0 0;
    
    --terra-cotta: 230 155 119;
    --on-terra-cotta: 0 0 0;
    
    --taupe: 153 133 121;
    --on-taupe: 0 0 0;
    
    --cardinal-red: 208 65 65;
    --on-cardinal-red: 0 0 0;
    
    --copper: 220 160 82;
    --on-copper: 0 0 0;
    
    --tan: 214 186 151;
    --on-tan: 0 0 0;
    
    --steel-blue: 137 179 193;
    --on-steel-blue: 0 0 0;
    
    --sage-green: 159 182 140;
    --on-sage-green: 0 0 0;
    
    --dusty-purple: 122 127 179;
    --on-dusty-purple: 0 0 0;
    
    --dark-umber: 92 86 82;
    --on-dark-umber: 255 255 255;
    
    --warm-gray: 136 138 125;
    --on-warm-gray: 0 0 0;
  }
}

/* Third-party Component Integration */
:root {
  --duet-color-primary: var(--primary);
  --duet-color-text: var(--on-layer-background);
  --duet-color-text-active: var(--on-primary);
  --duet-color-placeholder: var(--outline);
  --duet-color-button: var(--layer-container);
  --duet-color-layer-background: var(--layer-container);
  --duet-color-overlay: var(--scrim);
  --duet-color-border: var(--outline);
  --duet-font: var(--font-sans);
  --duet-font-normal: var(--font-weight-4);
  --duet-font-bold: var(--font-weight-6);
  --duet-radius: var(--radius-small);
  --duet-z-index: var(--layer-modal);
}

/* Background Utilities with Auto Text Color */
.bg-primary {
  background-color: var(--primary);
  color: var(--on-primary);
}

.bg-secondary {
  background-color: var(--secondary);
  color: var(--on-secondary);
}

.bg-tertiary {
  background-color: var(--tertiary);
  color: var(--on-tertiary);
}

.bg-error {
  background-color: var(--error);
  color: var(--on-error);
}

.bg-on-primary {
  background-color: var(--on-primary);
  color: var(--primary);
}

.bg-on-secondary {
  background-color: var(--on-secondary);
  color: var(--secondary);
}

.bg-on-tertiary {
  background-color: var(--on-tertiary);
  color: var(--tertiary);
}

.bg-on-error {
  background-color: var(--on-error);
  color: var(--error);
}

.bg-primary-container {
  background-color: var(--primary-container);
  color: var(--on-primary-container);
}

.bg-secondary-container {
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
}

.bg-tertiary-container {
  background-color: var(--tertiary-container);
  color: var(--on-tertiary-container);
}

.bg-error-container {
  background-color: var(--error-container);
  color: var(--on-error-container);
}

.bg-on-primary-container {
  background-color: var(--on-primary-container);
  color: var(--primary-container);
}

.bg-on-secondary-container {
  background-color: var(--on-secondary-container);
  color: var(--secondary-container);
}

.bg-on-tertiary-container {
  background-color: var(--on-tertiary-container);
  color: var(--tertiary-container);
}

.bg-on-error-container {
  background-color: var(--on-error-container);
  color: var(--error-container);
}

.bg-layer-background {
  background-color: var(--layer-background);
  color: var(--on-layer-background);
}

.bg-inverse-layer-background {
  background-color: var(--inverse-layer-background);
  color: var(--on-inverse-layer-background);
}

.bg-layer-surface {
  background-color: var(--layer-surface);
  color: var(--on-layer-surface);
}

.bg-layer-container {
  background-color: var(--layer-container);
  color: var(--on-layer-container);
}

.bg-layer-widget {
  background-color: var(--layer-widget);
  color: var(--on-layer-widget);
}

.bg-inverse-primary {
  background-color: var(--inverse-primary);
  color: var(--on-inverse-primary);
}

.bg-on-layer-background {
  background-color: var(--on-layer-background);
  color: var(--layer-background);
}

.bg-on-layer-widget {
  background-color: var(--on-layer-widget);
  color: var(--layer-widget);
}

.bg-outline {
  background-color: var(--outline);
  color: var(--on-outline);
}

.bg-outline-variant {
  background-color: var(--outline-variant);
  color: var(--on-outline-variant);
}

/* Text Color Utilities */
.text-primary {
  color: var(--primary);
}

.text-secondary {
  color: var(--secondary);
}

.text-tertiary {
  color: var(--tertiary);
}

.text-error {
  color: var(--error);
}

.text-on-primary {
  color: var(--on-primary);
}

.text-on-secondary {
  color: var(--on-secondary);
}

.text-on-tertiary {
  color: var(--on-tertiary);
}

.text-on-error {
  color: var(--on-error);
}

.text-primary-container {
  color: var(--primary-container);
}

.text-secondary-container {
  color: var(--secondary-container);
}

.text-tertiary-container {
  color: var(--tertiary-container);
}

.text-error-container {
  color: var(--error-container);
}

.text-on-primary-container {
  color: var(--on-primary-container);
}

.text-on-secondary-container {
  color: var(--on-secondary-container);
}

.text-on-tertiary-container {
  color: var(--on-tertiary-container);
}

.text-on-error-container {
  color: var(--on-error-container);
}

.text-on-surface {
  color: var(--on-surface);
}

.text-on-surface-variant {
  color: var(--on-surface-variant);
}

.text-layer-background {
  color: var(--layer-background);
}

.text-layer-widget {
  color: var(--layer-widget);
}

.text-outline {
  color: var(--outline);
}

.text-outline-variant {
  color: var(--outline-variant);
}

.text-on-layer-background {
  color: var(--on-layer-background);
}

/* SVG Fill Utilities */
.fill-on-layer-background {
  fill: var(--on-layer-background);
}

.fill-primary {
  fill: var(--primary);
}

.fill-transparent {
  fill: transparent;
}

/* Border Utilities */
.border-layer-background {
  border-color: var(--layer-background);
}

.border-layer-surface {
  border-color: var(--layer-surface);
}

.border-layer-container {
  border-color: var(--layer-container);
}

.border-layer-widget {
  border-color: var(--layer-widget);
}

.border-primary-container {
  border-color: var(--primary-container);
}

.border-secondary-container {
  border-color: var(--secondary-container);
}

.border-tertiary-container {
  border-color: var(--tertiary-container);
}

.border-error-container {
  border-color: var(--error-container);
}

/* Utility Classes */
.translucent {
  opacity: var(--opacity, 0.5);
}

.text-subdued {
  opacity: 0.75;
}

/* Gradient Utilities */
.theme-gradient {
  background: linear-gradient(135deg, var(--primary), var(--tertiary-container));
  color: var(--on-primary-container);
}

.primary-gradient {
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary-container);
}

.primary-secondary-gradient {
  background: linear-gradient(135deg, var(--primary), var(--secondary-container));
  color: var(--on-primary-container);
}