/* TimeWise Design System - Centralized Colors */
:root {
  /* Background Colors */
  --tw-bg-primary: #0b1220;
  --tw-bg-secondary: #0f172a;
  --tw-bg-tertiary: #1e293b;
  --tw-bg-input: #020617;
  
  /* Text Colors */
  --tw-text-primary: #f8fafc;
  --tw-text-secondary: #e5e7eb;
  --tw-text-muted: #94a3b8;
  --tw-text-dim: #6b7280;
  
  /* Accent Colors */
  --tw-accent-primary: #3b82f6;
  --tw-accent-primary-hover: #2563eb;
  --tw-accent-secondary: #10b981;
  --tw-accent-secondary-hover: #059669;
  --tw-accent-error: #ef4444;
  --tw-accent-warning: #f59e0b;
  
  /* Border Colors */
  --tw-border-primary: #1e293b;
  --tw-border-secondary: #374151;
  --tw-border-accent: #3b82f6;
  
  /* Gradient Backgrounds */
  --tw-gradient-hero: linear-gradient(to bottom, #0a0d14 0%, #050609 100%);
  --tw-gradient-card: linear-gradient(180deg, #020617 0%, #0f172a 100%);
  
  /* Spacing Scale */
  --tw-space-xs: 0.25rem;
  --tw-space-sm: 0.5rem;
  --tw-space-md: 1rem;
  --tw-space-lg: 1.5rem;
  --tw-space-xl: 2rem;
  --tw-space-2xl: 3rem;
  
  /* Border Radius */
  --tw-radius-sm: 0.375rem;
  --tw-radius-md: 0.5rem;
  --tw-radius-lg: 0.75rem;
  --tw-radius-xl: 1rem;
  --tw-radius-2xl: 1.5rem;
  
  /* Typography */
  --tw-font-primary: 'Outfit', system-ui, -apple-system, sans-serif;
  --tw-font-secondary: system-ui, -apple-system, sans-serif;
}

/* Base Styles */
body {
  background-color: var(--tw-bg-primary);
  color: var(--tw-text-primary);
  font-family: var(--tw-font-primary);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Card Component */
.tw-card {
  background-color: var(--tw-bg-secondary);
  border: 1px solid var(--tw-border-primary);
  border-radius: var(--tw-radius-xl);
}

/* Input Component */
.tw-input {
  background-color: var(--tw-bg-input);
  border: 1px solid var(--tw-border-primary);
  border-radius: var(--tw-radius-md);
  color: var(--tw-text-primary);
  font-family: var(--tw-font-primary);
  outline: none;
  transition: all 0.2s ease;
}

.tw-input:focus {
  border-color: var(--tw-accent-secondary);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.tw-input::placeholder {
  color: var(--tw-text-muted);
}

/* Button Components */
.tw-btn-primary {
  background: var(--tw-accent-primary);
  color: white;
  border-radius: var(--tw-radius-lg);
  font-weight: 600;
  transition: all 0.2s ease;
}

.tw-btn-primary:hover {
  background: var(--tw-accent-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.tw-btn-secondary {
  background: var(--tw-accent-secondary);
  color: #052e16;
  border-radius: var(--tw-radius-lg);
  font-weight: 600;
  transition: all 0.2s ease;
}

.tw-btn-secondary:hover {
  background: var(--tw-accent-secondary-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
}

/* Text Components */
.tw-text-primary { color: var(--tw-text-primary); }
.tw-text-secondary { color: var(--tw-text-secondary); }
.tw-text-muted { color: var(--tw-text-muted); }
.tw-text-accent { color: var(--tw-accent-primary); }
.tw-text-success { color: var(--tw-accent-secondary); }
.tw-text-error { color: var(--tw-accent-error); }

/* Utility Classes */
.tw-bg-primary { background-color: var(--tw-bg-primary); }
.tw-bg-secondary { background-color: var(--tw-bg-secondary); }
.tw-bg-tertiary { background-color: var(--tw-bg-tertiary); }

.tw-border-primary { border-color: var(--tw-border-primary); }
.tw-border-accent { border-color: var(--tw-accent-primary); }

/* Container */
.tw-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--tw-space-lg);
}

@media (min-width: 768px) {
  .tw-container {
    padding: var(--tw-space-2xl) var(--tw-space-xl);
  }
}

/* Section Spacing */
.tw-section {
  margin-bottom: var(--tw-space-2xl);
}

@media (min-width: 768px) {
  .tw-section {
    margin-bottom: var(--tw-space-2xl);
  }
}