:root,
html[data-theme=dark] {
  --tds-spacing-2xs: 2px;
  --tds-spacing-xs: 4px;
  --tds-spacing-sm: 6px;
  --tds-spacing-md: 8px;
  --tds-spacing-lg: 10px;
  --tds-spacing-xl: 12px;
  --tds-spacing-2xl: 14px;
  --tds-spacing-3xl: 20px;
  --tds-spacing-4xl: 24px;
  --tds-radius-xs: 4px;
  --tds-radius-sm: 6px;
  --tds-radius-md: 8px;
  --tds-radius-lg: 10px;
  --tds-radius-xl: 12px;
  --tds-radius-2xl: 14px;
  --tds-radius-3xl: 16px;
  --tds-radius-pill: 999px;
  --tds-radius-circle: 50%;
  --tds-font-size-2xs: 10px;
  --tds-font-size-xs: 11px;
  --tds-font-size-sm: 12px;
  --tds-font-size-md: 13px;
  --tds-font-size-lg: 15px;
  --tds-font-size-xl: 16px;
  --tds-font-size-2xl: 18px;
  --tds-font-size-3xl: 24px;
  --tds-font-size-4xl: 30px;
  --tds-input-height-sm: 28px;
  --tds-input-height-md: 36px;
  --tds-input-height-lg: 42px;
  --tds-transition-fast: 0.1s ease;
  --tds-transition-normal: 0.15s ease;
  --tds-transition-slow: 0.25s ease;
  --tds-bg-secondary: #020b2a;
  --tds-bg-surface-alt: rgba(255, 255, 255, 0.025);
  --tds-bg-input: rgba(255, 255, 255, 0.08);
  --tds-bg-input-hover: rgba(255, 255, 255, 0.12);
  --tds-bg-overlay: rgba(2, 6, 23, 0.86);
  --tds-bg-tooltip: rgba(2, 6, 23, 0.95);
  --tds-text-tooltip: #f8fafc;
  --tds-bg-control: #0f172a;
  --tds-bg-control-hover: rgba(30, 41, 59, 0.9);
  --tds-bg-option: #0b173f;
  --tds-bg-option-active: #1d4ed8;
  --tds-text-on-accent: #fff;
  --tds-text-label: #dbeafe;
  --tds-text-link: #7dd3fc;
  --tds-text-muted: #64748b;
  --tds-text-config: #c9d8ff;
  --tds-border-subtle: rgba(255, 255, 255, 0.08);
  --tds-border-input: rgba(255, 255, 255, 0.2);
  --tds-border-form: rgba(255, 255, 255, 0.14);
  --tds-border-focus: rgba(56, 189, 248, 0.9);
  --tds-border-chrome: rgba(148, 163, 184, 0.45);
  --tds-accent-subtle: rgba(56, 189, 248, 0.15);
  --tds-accent-hover: rgba(56, 189, 248, 0.25);
  --tds-accent-active: rgba(14, 116, 144, 0.35);
  --tds-accent-border: rgba(56, 189, 248, 0.3);
  --tds-accent-border-strong: rgba(56, 189, 248, 0.8);
  --tds-accent-shadow: rgba(56, 189, 248, 0.2);
  --tds-row-hover: rgba(56, 189, 248, 0.08);
  --tds-row-selected: rgba(56, 189, 248, 0.12);
  --tds-success-bg: rgba(34, 197, 94, 0.18);
  --tds-success-border: rgba(34, 197, 94, 0.3);
  --tds-warning-bg: rgba(250, 204, 21, 0.12);
  --tds-warning-border: rgba(250, 204, 21, 0.25);
  --tds-error-bg: rgba(239, 68, 68, 0.18);
  --tds-error-border: rgba(239, 68, 68, 0.3);
  --tds-shadow-color: rgba(0, 0, 0, 0.45);
  --tds-text-on-primary: #fff;
  --tds-bg-input-solid: #1a2644;
  --tds-chrome-base: #0d183c;
  --tds-chrome-base-light: #142046;
  --tds-chrome-base-lighter: #1b2850;
  --tds-chrome-base-dark: #091230;
  --tds-chrome-base-darker: #060e24;
  --tds-primary-solid: #1d4ed8;
  --tds-primary-solid-border: #3b82f6;
  --tds-primary-solid-hover: #2563eb;
  --tds-primary-solid-hover-border: #60a5fa;
  color-scheme: dark;
}

html[data-theme=light] {
  --tds-bg-secondary: #f1f5f9;
  --tds-bg-surface-alt: #f8fafc;
  --tds-bg-input: #f1f5f9;
  --tds-bg-input-hover: #e2e8f0;
  --tds-bg-overlay: rgba(255, 255, 255, 0.92);
  --tds-bg-tooltip: #1e293b;
  --tds-text-tooltip: #f8fafc;
  --tds-bg-control: #ffffff;
  --tds-bg-control-hover: #f1f5f9;
  --tds-bg-option: #ffffff;
  --tds-bg-option-active: #2563eb;
  --tds-text-on-accent: #fff;
  --tds-text-label: #334155;
  --tds-text-link: #0284c7;
  --tds-text-muted: #94a3b8;
  --tds-text-config: #475569;
  --tds-border-subtle: rgba(0, 0, 0, 0.05);
  --tds-border-input: #cbd5e1;
  --tds-border-form: #e2e8f0;
  --tds-border-focus: rgba(2, 132, 199, 0.7);
  --tds-border-chrome: #cbd5e1;
  --tds-accent-subtle: rgba(2, 132, 199, 0.1);
  --tds-accent-hover: rgba(2, 132, 199, 0.15);
  --tds-accent-active: rgba(2, 132, 199, 0.12);
  --tds-accent-border: rgba(2, 132, 199, 0.3);
  --tds-accent-border-strong: rgba(2, 132, 199, 0.6);
  --tds-accent-shadow: rgba(2, 132, 199, 0.15);
  --tds-row-hover: rgba(2, 132, 199, 0.06);
  --tds-row-selected: rgba(2, 132, 199, 0.1);
  --tds-success-bg: rgba(22, 163, 74, 0.1);
  --tds-success-border: rgba(22, 163, 74, 0.3);
  --tds-warning-bg: rgba(202, 138, 4, 0.1);
  --tds-warning-border: rgba(202, 138, 4, 0.25);
  --tds-error-bg: rgba(220, 38, 38, 0.08);
  --tds-error-border: rgba(220, 38, 38, 0.25);
  --tds-shadow-color: rgba(0, 0, 0, 0.1);
  --tds-text-on-primary: #fff;
  --tds-bg-input-solid: #1a2644;
  --tds-chrome-base: #0d183c;
  --tds-chrome-base-light: #142046;
  --tds-chrome-base-lighter: #1b2850;
  --tds-chrome-base-dark: #091230;
  --tds-chrome-base-darker: #060e24;
  --tds-primary-solid: #1d4ed8;
  --tds-primary-solid-border: #3b82f6;
  --tds-primary-solid-hover: #2563eb;
  --tds-primary-solid-hover-border: #60a5fa;
  color-scheme: light;
}

:not(html)[data-theme=dark] {
  --tds-bg-secondary: #020b2a;
  --tds-bg-surface-alt: rgba(255, 255, 255, 0.025);
  --tds-bg-input: rgba(255, 255, 255, 0.08);
  --tds-bg-input-hover: rgba(255, 255, 255, 0.12);
  --tds-bg-overlay: rgba(2, 6, 23, 0.86);
  --tds-bg-tooltip: rgba(2, 6, 23, 0.95);
  --tds-text-tooltip: #f8fafc;
  --tds-bg-control: #0f172a;
  --tds-bg-control-hover: rgba(30, 41, 59, 0.9);
  --tds-bg-option: #0b173f;
  --tds-bg-option-active: #1d4ed8;
  --tds-text-on-accent: #fff;
  --tds-text-label: #dbeafe;
  --tds-text-link: #7dd3fc;
  --tds-text-muted: #64748b;
  --tds-text-config: #c9d8ff;
  --tds-border-subtle: rgba(255, 255, 255, 0.08);
  --tds-border-input: rgba(255, 255, 255, 0.2);
  --tds-border-form: rgba(255, 255, 255, 0.14);
  --tds-border-focus: rgba(56, 189, 248, 0.9);
  --tds-border-chrome: rgba(148, 163, 184, 0.45);
  --tds-accent-subtle: rgba(56, 189, 248, 0.15);
  --tds-accent-hover: rgba(56, 189, 248, 0.25);
  --tds-accent-active: rgba(14, 116, 144, 0.35);
  --tds-accent-border: rgba(56, 189, 248, 0.3);
  --tds-accent-border-strong: rgba(56, 189, 248, 0.8);
  --tds-accent-shadow: rgba(56, 189, 248, 0.2);
  --tds-row-hover: rgba(56, 189, 248, 0.08);
  --tds-row-selected: rgba(56, 189, 248, 0.12);
  --tds-success-bg: rgba(34, 197, 94, 0.18);
  --tds-success-border: rgba(34, 197, 94, 0.3);
  --tds-warning-bg: rgba(250, 204, 21, 0.12);
  --tds-warning-border: rgba(250, 204, 21, 0.25);
  --tds-error-bg: rgba(239, 68, 68, 0.18);
  --tds-error-border: rgba(239, 68, 68, 0.3);
  --tds-shadow-color: rgba(0, 0, 0, 0.45);
  --tds-text-on-primary: #fff;
  --tds-bg-input-solid: #1a2644;
  --tds-chrome-base: #0d183c;
  --tds-chrome-base-light: #142046;
  --tds-chrome-base-lighter: #1b2850;
  --tds-chrome-base-dark: #091230;
  --tds-chrome-base-darker: #060e24;
  --tds-primary-solid: #1d4ed8;
  --tds-primary-solid-border: #3b82f6;
  --tds-primary-solid-hover: #2563eb;
  --tds-primary-solid-hover-border: #60a5fa;
  color-scheme: dark;
}

:not(html)[data-theme=light] {
  --tds-bg-secondary: #f1f5f9;
  --tds-bg-surface-alt: #f8fafc;
  --tds-bg-input: #f1f5f9;
  --tds-bg-input-hover: #e2e8f0;
  --tds-bg-overlay: rgba(255, 255, 255, 0.92);
  --tds-bg-tooltip: #1e293b;
  --tds-text-tooltip: #f8fafc;
  --tds-bg-control: #ffffff;
  --tds-bg-control-hover: #f1f5f9;
  --tds-bg-option: #ffffff;
  --tds-bg-option-active: #2563eb;
  --tds-text-on-accent: #fff;
  --tds-text-label: #334155;
  --tds-text-link: #0284c7;
  --tds-text-muted: #94a3b8;
  --tds-text-config: #475569;
  --tds-border-subtle: rgba(0, 0, 0, 0.05);
  --tds-border-input: #cbd5e1;
  --tds-border-form: #e2e8f0;
  --tds-border-focus: rgba(2, 132, 199, 0.7);
  --tds-border-chrome: #cbd5e1;
  --tds-accent-subtle: rgba(2, 132, 199, 0.1);
  --tds-accent-hover: rgba(2, 132, 199, 0.15);
  --tds-accent-active: rgba(2, 132, 199, 0.12);
  --tds-accent-border: rgba(2, 132, 199, 0.3);
  --tds-accent-border-strong: rgba(2, 132, 199, 0.6);
  --tds-accent-shadow: rgba(2, 132, 199, 0.15);
  --tds-row-hover: rgba(2, 132, 199, 0.06);
  --tds-row-selected: rgba(2, 132, 199, 0.1);
  --tds-success-bg: rgba(22, 163, 74, 0.1);
  --tds-success-border: rgba(22, 163, 74, 0.3);
  --tds-warning-bg: rgba(202, 138, 4, 0.1);
  --tds-warning-border: rgba(202, 138, 4, 0.25);
  --tds-error-bg: rgba(220, 38, 38, 0.08);
  --tds-error-border: rgba(220, 38, 38, 0.25);
  --tds-shadow-color: rgba(0, 0, 0, 0.1);
  --tds-text-on-primary: #fff;
  --tds-bg-input-solid: #1a2644;
  --tds-chrome-base: #0d183c;
  --tds-chrome-base-light: #142046;
  --tds-chrome-base-lighter: #1b2850;
  --tds-chrome-base-dark: #091230;
  --tds-chrome-base-darker: #060e24;
  --tds-primary-solid: #1d4ed8;
  --tds-primary-solid-border: #3b82f6;
  --tds-primary-solid-hover: #2563eb;
  --tds-primary-solid-hover-border: #60a5fa;
  color-scheme: light;
}