:root {
  /* Brand Colors */
  --tm-primary: #7B3FF2;
  --tm-primary-light: #8A55FF;
  --tm-primary-bg: #efe8ff;
  --tm-primary-hover: rgba(123, 63, 242, 0.1);
  --tm-primary-shadow: rgba(123, 63, 242, 0.3);
  --tm-gradient: linear-gradient(135deg, var(--tm-primary-light), var(--tm-primary));
  --tm-gradient-horizontal: linear-gradient(90deg, #1FA2FF, #7B3FF2);

  /* Text Colors */
  --tm-text-primary: #373535;
  --tm-text-secondary: #6B7280;
  --tm-text-muted: #9CA3AF;
  --tm-text-on-primary: #fff;

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

  /* Border Colors */
  --tm-border: #E7E9EF;
  --tm-border-light: rgba(231, 233, 239, 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: #FFB100;
  --tm-error: #FF5C4D;
  --tm-info: #1FA2FF;
}

/* 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: background-color var(--tm-transition-normal), border-color var(--tm-transition-normal), color var(--tm-transition-normal), box-shadow var(--tm-transition-normal), transform var(--tm-transition-normal), opacity var(--tm-transition-normal);
}
.tm-input:focus {
  background: var(--tm-bg-input-focus);
  border-color: var(--tm-border-focus);
  outline: none;
}