:root {
  --ds-surface: #111827;
  --ds-surface-variant: #0f172a;
  --ds-on-surface: #e2e8f0;
  --ds-on-surface-variant: #cbd5e1;
  --ds-surface-container: #1e293b;
  --ds-surface-container-high: #334155;
  --ds-surface-container-low: #0f172a;
  --ds-on-surface-container: #e2e8f0;
  --ds-surface-backdrop-filter: none;
  --ds-surface-box-shadow: none;
  --ds-primary: #1E90FF;
  --ds-primary-container: #1E90FF;
  --ds-on-primary: #ffffff;
  --ds-on-primary-container: #ffffff;
  --ds-primary-variant: #4DA3FF;
  --ds-secondary: #64748b;
  --ds-secondary-container: #475569;
  --ds-on-secondary: #ffffff;
  --ds-on-secondary-container: #e2e8f0;
  --ds-secondary-variant: #94a3b8;
  --ds-tertiary: #f59e0b;
  --ds-tertiary-container: #fbbf24;
  --ds-on-tertiary: #ffffff;
  --ds-on-tertiary-container: #78350f;
  --ds-tertiary-variant: #fcd34d;
  --ds-error: #ef4444;
  --ds-error-container: #fca5a5;
  --ds-on-error: #ffffff;
  --ds-on-error-container: #7f1d1d;
  --ds-error-variant: #f87171;
  --ds-success: #22c55e;
  --ds-success-container: #86efac;
  --ds-on-success: #ffffff;
  --ds-on-success-container: #14532d;
  --ds-success-variant: #4ade80;
  --ds-warning: #f59e0b;
  --ds-warning-container: #fcd34d;
  --ds-on-warning: #ffffff;
  --ds-on-warning-container: #78350f;
  --ds-warning-variant: #fbbf24;
  --ds-info: #3b82f6;
  --ds-info-container: #93c5fd;
  --ds-on-info: #ffffff;
  --ds-on-info-container: #1e3a8a;
  --ds-info-variant: #60a5fa;
  --ds-outline: rgb(51, 65, 85);
  --ds-outline-variant: #64748b;
  --ds-hover-state-layer: rgba(255, 255, 255, 0.05);
  --ds-focus-state-layer: rgba(30, 144, 255, 0.12);
  --ds-pressed-state-layer: rgba(255, 255, 255, 0.1);
  --ds-backdrop-blur: blur(10px);
  --ds-backdrop-blur-sm: blur(4px);
  --ds-backdrop-blur-md: blur(8px);
  --ds-backdrop-blur-lg: blur(16px);
  --ds-backdrop-blur-xl: blur(24px);
  --ds-backdrop-saturation: saturate(180%);
  --ds-backdrop-brightness: brightness(1.1);
  --ds-bg-opacity-surface: 0.8;
  --ds-bg-opacity-surface-container: 0.9;
  --ds-bg-opacity-surface-container-high: 0.95;
  --ds-bg-opacity-overlay: 0.6;
  --ds-bg-opacity-hover: 0.1;
  --ds-bg-opacity-active: 0.2;
}

.app-background {
  background-image: linear-gradient(to bottom, black, var(--ds-surface) 75%);
}