:root {
  /* Brand Colors */
  --tm-primary: #7C3AED;
  --tm-primary-light: #9769ff;
  --tm-primary-bg: #e8e0f7;
  --tm-primary-hover: rgba(124, 58, 237, 0.1);
  --tm-primary-shadow: rgba(124, 58, 237, 0.3);
  --tm-gradient: linear-gradient(135deg, var(--tm-primary-light), var(--tm-primary));
  --tm-gradient-horizontal: linear-gradient(90deg, #0085F2, #7C3AED);

  /* Text Colors */
  --tm-text-primary: #1a1a2e;
  --tm-text-secondary: #64748b;
  --tm-text-muted: #94a3b8;
  --tm-text-on-primary: #fff;

  /* Background Colors */
  --tm-bg-input: #F5F5F5;
  --tm-bg-input-focus: #fff;
  --tm-bg-card: #fff;
  --tm-bg-page: #f8fafc;
  --tm-bg-hover: #f1f5f9;

  /* Border Colors */
  --tm-border: #e2e8f0;
  --tm-border-light: rgba(226, 232, 240, 0.15);
  --tm-border-focus: var(--tm-primary);

  /* Border Radius */
  --tm-radius-sm: 6px;
  --tm-radius-md: 8px;
  --tm-radius-lg: 12px;
  --tm-radius-xl: 14px;
  --tm-radius-pill: 9999px;

  /* Shadows */
  --tm-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --tm-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --tm-shadow-lg: 0 4px 20px rgba(0,0,0,0.15);
  --tm-shadow-primary: 0 2px 8px var(--tm-primary-shadow);

  /* Spacing */
  --tm-space-xs: 4px;
  --tm-space-sm: 8px;
  --tm-space-md: 12px;
  --tm-space-lg: 16px;
  --tm-space-xl: 20px;
  --tm-space-2xl: 24px;

  /* Typography */
  --tm-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --tm-font-size-xs: 11px;
  --tm-font-size-sm: 13px;
  --tm-font-size-md: 14px;
  --tm-font-size-lg: 16px;
  --tm-font-size-xl: 18px;
  --tm-font-size-2xl: 22px;

  /* Transitions */
  --tm-transition-fast: 0.15s ease;
  --tm-transition-normal: 0.2s ease;
  --tm-transition-slow: 0.3s ease;

  /* Z-index layers */
  --tm-z-dropdown: 100;
  --tm-z-modal: 1000;
  --tm-z-overlay: 9999;

  /* Status Colors */
  --tm-success: #10b981;
  --tm-warning: #f59e0b;
  --tm-error: #e85347;
  --tm-info: #3b82f6;
}

/* Utility classes for common patterns */
.tm-card {
  background: var(--tm-bg-card);
  border-radius: var(--tm-radius-lg);
  box-shadow: var(--tm-shadow-sm);
  padding: var(--tm-space-lg);
}

.tm-btn-primary {
  background: var(--tm-gradient);
  color: var(--tm-text-on-primary);
  border: none;
  border-radius: var(--tm-radius-md);
  padding: var(--tm-space-sm) var(--tm-space-lg);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--tm-transition-fast);
}
.tm-btn-primary:hover { opacity: 0.9; }

.tm-input {
  background: var(--tm-bg-input);
  border: 1px solid transparent;
  border-radius: var(--tm-radius-lg);
  padding: 10px 14px;
  font-size: var(--tm-font-size-md);
  transition: all var(--tm-transition-normal);
}
.tm-input:focus {
  background: var(--tm-bg-input-focus);
  border-color: var(--tm-border-focus);
  outline: none;
}