:root {
  --mds-brand-50: #f0faff;
  --mds-brand-100: #e0f5ff;
  --mds-brand-200: #b9eaff;
  --mds-brand-300: #7cdaff;
  --mds-brand-400: #33c2ff;
  --mds-brand-500: #0099ff;
  --mds-brand-600: #007ad6;
  --mds-brand-700: #0061ad;
  --mds-brand-800: #07528a;
  --mds-brand-900: #0b456f;
  --mds-brand-950: #072c4a;

  --mds-font-sans: Inter, "Segoe UI", Arial, sans-serif;
  --mds-font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  --mds-space-1: 4px;
  --mds-space-2: 8px;
  --mds-space-3: 12px;
  --mds-space-4: 16px;
  --mds-space-5: 20px;
  --mds-space-6: 24px;
  --mds-space-8: 32px;
  --mds-space-10: 40px;
  --mds-space-12: 48px;
  --mds-space-16: 64px;

  --mds-radius-xs: 4px;
  --mds-radius-sm: 6px;
  --mds-radius-md: 10px;
  --mds-radius-lg: 14px;
  --mds-radius-xl: 18px;
  --mds-radius-2xl: 24px;
  --mds-radius-pill: 999px;

  --mds-control-sm: 32px;
  --mds-control-md: 40px;
  --mds-control-lg: 48px;
  --mds-motion-fast: 100ms;
  --mds-motion-normal: 160ms;
  --mds-easing: cubic-bezier(0.2, 0, 0, 1);
}

:root,
[data-theme="light"] {
  color-scheme: light;
  --mds-surface-canvas: #f7f9fc;
  --mds-surface-default: #ffffff;
  --mds-surface-raised: #ffffff;
  --mds-surface-subtle: #f1f5f9;
  --mds-surface-sunken: #eaf0f6;
  --mds-surface-overlay: rgba(15, 23, 42, 0.5);
  --mds-text-primary: #0f172a;
  --mds-text-secondary: #475569;
  --mds-text-tertiary: #64748b;
  --mds-text-disabled: #94a3b8;
  --mds-text-inverse: #ffffff;
  --mds-text-link: #007ad6;
  --mds-border-default: #dce3ec;
  --mds-border-strong: #b8c4d2;
  --mds-border-subtle: #e9eef4;
  --mds-border-focus: #0099ff;
  --mds-action-primary: #0099ff;
  --mds-action-primary-hover: #0089e6;
  --mds-action-primary-pressed: #007acc;
  --mds-action-primary-subtle: #e0f5ff;
  --mds-action-secondary: #ffffff;
  --mds-action-secondary-hover: #f1f5f9;
  --mds-action-ghost-hover: #e9f7ff;
  --mds-action-disabled: #cbd5e1;
  --mds-success: #16a34a;
  --mds-success-subtle: #dcfce7;
  --mds-warning: #d97706;
  --mds-warning-subtle: #fef3c7;
  --mds-danger: #dc2626;
  --mds-danger-subtle: #fee2e2;
  --mds-info: #2563eb;
  --mds-info-subtle: #dbeafe;
  --mds-selection: rgba(0, 153, 255, 0.18);
  --mds-focus-ring: rgba(0, 153, 255, 0.28);
  --mds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --mds-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
  --mds-shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.18);
}

[data-theme="dark"] {
  color-scheme: dark;
  --mds-surface-canvas: #090c10;
  --mds-surface-default: #11161d;
  --mds-surface-raised: #171d26;
  --mds-surface-subtle: #1c2430;
  --mds-surface-sunken: #070a0e;
  --mds-surface-overlay: rgba(0, 0, 0, 0.68);
  --mds-text-primary: #f8fafc;
  --mds-text-secondary: #cbd5e1;
  --mds-text-tertiary: #94a3b8;
  --mds-text-disabled: #64748b;
  --mds-text-inverse: #071018;
  --mds-text-link: #33b5ff;
  --mds-border-default: #283443;
  --mds-border-strong: #3d4c5f;
  --mds-border-subtle: #202a36;
  --mds-border-focus: #0099ff;
  --mds-action-primary: #0099ff;
  --mds-action-primary-hover: #20a5ff;
  --mds-action-primary-pressed: #007acc;
  --mds-action-primary-subtle: #0b2d43;
  --mds-action-secondary: #171d26;
  --mds-action-secondary-hover: #202a36;
  --mds-action-ghost-hover: #132534;
  --mds-action-disabled: #334155;
  --mds-success: #22c55e;
  --mds-success-subtle: #12351f;
  --mds-warning: #f59e0b;
  --mds-warning-subtle: #3b2b0a;
  --mds-danger: #ef4444;
  --mds-danger-subtle: #3b171a;
  --mds-info: #3b82f6;
  --mds-info-subtle: #13294f;
  --mds-selection: rgba(0, 153, 255, 0.24);
  --mds-focus-ring: rgba(0, 153, 255, 0.36);
  --mds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --mds-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.38);
  --mds-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.48);
}