/* ================================
   Dutton Solutions LLC Design System
   Professional Decision-Making Platform
   ================================ */

/* Brand Color Palette */
:root {
  /* Primary Orange Brand Colors */
  --ds-orange-50: #FFF7ED;
  --ds-orange-100: #FFEDD5;
  --ds-orange-200: #FED7AA;
  --ds-orange-300: #FDBA74;
  --ds-orange-400: #FB923C;
  --ds-orange-500: #F97316;
  --ds-orange-600: #EA580C;  /* Primary Brand Color */
  --ds-orange-700: #C2410C;
  --ds-orange-800: #9A3412;
  --ds-orange-900: #7C2D12;

  /* Supporting Colors */
  --ds-gray-50: #F9FAFB;
  --ds-gray-100: #F3F4F6;
  --ds-gray-200: #E5E7EB;
  --ds-gray-300: #D1D5DB;
  --ds-gray-400: #9CA3AF;
  --ds-gray-500: #6B7280;
  --ds-gray-600: #4B5563;
  --ds-gray-700: #374151;
  --ds-gray-800: #1F2937;
  --ds-gray-900: #111827;

  /* Accent Colors */
  --ds-emerald-600: #059669;
  --ds-emerald-700: #047857;
  --ds-red-600: #DC2626;
  --ds-amber-600: #D97706;

  /* Shadows */
  --ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Orange-specific shadows */
  --ds-shadow-orange: 0 4px 12px rgba(234, 88, 12, 0.3);
  --ds-shadow-orange-lg: 0 8px 20px rgba(234, 88, 12, 0.4);
}

/* ================================
   INTERACTIVE COMPONENTS (with hover)
   ================================ */

/* Primary Buttons */
.ds-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ds-orange-600), var(--ds-orange-700));
  color: white;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--ds-shadow-orange);
  cursor: pointer;
  font-size: 1rem;
}

.ds-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-orange-lg);
  background: linear-gradient(135deg, var(--ds-orange-700), var(--ds-orange-800));
  color: white;
  text-decoration: none;
}

.ds-btn-primary:active {
  transform: translateY(0px);
  box-shadow: var(--ds-shadow-orange);
}

.ds-btn-primary.large {
  padding: 16px 32px;
  font-size: 1.1rem;
  border-radius: 16px;
}

.ds-btn-primary.small {
  padding: 8px 16px;
  font-size: 0.875rem;
  border-radius: 8px;
}

/* Secondary Buttons */
.ds-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: var(--ds-gray-700);
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 12px;
  border: 2px solid var(--ds-gray-200);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--ds-shadow-sm);
  cursor: pointer;
  font-size: 1rem;
}

.ds-btn-secondary:hover {
  background: var(--ds-orange-50);
  border-color: var(--ds-orange-200);
  color: var(--ds-orange-700);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-md);
  text-decoration: none;
}

.ds-btn-secondary.large {
  padding: 16px 32px;
  font-size: 1.1rem;
  border-radius: 16px;
}

.ds-btn-secondary.small {
  padding: 8px 16px;
  font-size: 0.875rem;
  border-radius: 8px;
}

/* Danger Buttons */
.ds-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ds-red-600), #B91C1C);
  color: white;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
  cursor: pointer;
  font-size: 1rem;
}

.ds-btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4);
  background: linear-gradient(135deg, #B91C1C, #991B1B);
  color: white;
  text-decoration: none;
}

.ds-btn-danger.large {
  padding: 16px 32px;
  font-size: 1.1rem;
  border-radius: 16px;
}

.ds-btn-danger.small {
  padding: 8px 16px;
  font-size: 0.875rem;
  border-radius: 8px;
}

/* Outline Buttons */
.ds-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ds-orange-600);
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 12px;
  border: 2px solid var(--ds-orange-300);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--ds-shadow-sm);
  cursor: pointer;
  font-size: 1rem;
}

.ds-btn-outline:hover {
  background: var(--ds-orange-50);
  border-color: var(--ds-orange-500);
  color: var(--ds-orange-700);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-md);
  text-decoration: none;
}

.ds-btn-outline.large {
  padding: 16px 32px;
  font-size: 1.1rem;
  border-radius: 16px;
}

.ds-btn-outline.small {
  padding: 8px 16px;
  font-size: 0.875rem;
  border-radius: 8px;
}

/* Interactive Cards */
.ds-card-interactive {
  background: white;
  border-radius: 16px;
  padding: 24px;
  border: 2px solid var(--ds-gray-200);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--ds-shadow-sm);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.ds-card-interactive:hover {
  border-color: var(--ds-orange-300);
  box-shadow: var(--ds-shadow-lg);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

/* Navigation Links */
.ds-nav-link {
  color: var(--ds-gray-600);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.ds-nav-link:hover {
  color: var(--ds-orange-600);
  text-decoration: none;
}

/* Form Inputs */
.ds-form-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--ds-gray-200);
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
  color: var(--ds-gray-800);
}

.ds-form-input:focus {
  outline: none;
  border-color: var(--ds-orange-500);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
  transform: translateY(-1px);
}

.ds-form-input::placeholder {
  color: var(--ds-gray-400);
}

/* Form Labels */
.ds-form-label {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--ds-gray-700);
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.ds-form-help {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--ds-gray-500);
  font-style: italic;
}

.ds-form-required {
  color: var(--ds-red-600);
  margin-left: 4px;
}

/* ================================
   VISUAL COMPONENTS (no hover)
   ================================ */

/* Status Badges */
.ds-status-completed {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--ds-emerald-600), var(--ds-emerald-700));
  color: white;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
  cursor: default;
}

.ds-status-in-progress {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--ds-orange-500), var(--ds-orange-600));
  color: white;
  box-shadow: var(--ds-shadow-orange);
  cursor: default;
}

.ds-status-setup-needed {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--ds-gray-400), var(--ds-gray-500));
  color: white;
  box-shadow: 0 2px 8px rgba(156, 163, 175, 0.3);
  cursor: default;
}

/* Info Cards */
.ds-info-card {
  background: linear-gradient(135deg, var(--ds-orange-50), #FEF3C7);
  border: 2px solid var(--ds-orange-200);
  border-radius: 16px;
  padding: 1.5rem;
  cursor: default;
}

.ds-info-card-blue {
  background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
  border: 2px solid #93C5FD;
  border-radius: 16px;
  padding: 1.5rem;
  cursor: default;
}

/* Visual Cards */
.ds-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  border: 2px solid var(--ds-gray-200);
  box-shadow: var(--ds-shadow-sm);
  cursor: default;
}

/* Brand Header */
.ds-brand-header {
  display: flex;
  align-items: center;
  cursor: default;
}

.ds-brand-logo {
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, var(--ds-orange-500), var(--ds-orange-600));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
  box-shadow: var(--ds-shadow-orange);
}

/* Step Indicators */
.ds-step-indicator {
  width: 3rem;
  height: 3rem;
  background: linear-gradient(135deg, var(--ds-orange-100), var(--ds-orange-200));
  border: 2px solid var(--ds-orange-300);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--ds-orange-700);
  cursor: default;
}

.ds-step-indicator.active {
  background: linear-gradient(135deg, var(--ds-orange-500), var(--ds-orange-600));
  border-color: var(--ds-orange-600);
  color: white;
  box-shadow: var(--ds-shadow-orange);
}

/* ================================
   UTILITY CLASSES
   ================================ */

.ds-text-orange { color: var(--ds-orange-600); }
.ds-text-gray { color: var(--ds-gray-600); }
.ds-text-dark { color: var(--ds-gray-800); }

.ds-bg-orange { background-color: var(--ds-orange-600); }
.ds-bg-orange-light { background-color: var(--ds-orange-50); }
.ds-bg-gray-light { background-color: var(--ds-gray-50); }

.ds-border-orange { border-color: var(--ds-orange-300); }
.ds-border-gray { border-color: var(--ds-gray-200); }

.ds-shadow-sm { box-shadow: var(--ds-shadow-sm); }
.ds-shadow-md { box-shadow: var(--ds-shadow-md); }
.ds-shadow-lg { box-shadow: var(--ds-shadow-lg); }
.ds-shadow-orange { box-shadow: var(--ds-shadow-orange); }

.ds-rounded { border-radius: 12px; }
.ds-rounded-lg { border-radius: 16px; }
.ds-rounded-xl { border-radius: 20px; }

/* Cursor utilities */
.ds-cursor-pointer { cursor: pointer; }
.ds-cursor-default { cursor: default; }

/* ================================
   RESPONSIVE UTILITIES
   ================================ */

@media (max-width: 768px) {
  .ds-btn-primary, .ds-btn-secondary, .ds-btn-danger, .ds-btn-outline {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
  
  .ds-btn-primary.large, .ds-btn-secondary.large, .ds-btn-danger.large, .ds-btn-outline.large {
    padding: 14px 28px;
    font-size: 1rem;
  }
  
  .ds-btn-primary.small, .ds-btn-secondary.small, .ds-btn-danger.small, .ds-btn-outline.small {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  
  .ds-card, .ds-card-interactive {
    padding: 16px;
    border-radius: 12px;
  }
}

/* ================================
   COMPONENT-SPECIFIC STYLES
   ================================ */

/* Navigation Bar */
.ds-navbar {
  background: white;
  border-bottom: 2px solid var(--ds-gray-100);
  box-shadow: var(--ds-shadow-sm);
}

.ds-navbar-brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ds-gray-900);
  text-decoration: none;
  display: flex;
  align-items: center;
}

.ds-navbar-brand:hover {
  color: var(--ds-orange-600);
  text-decoration: none;
}

/* Footer */
.ds-footer {
  background: white;
  border-top: 2px solid var(--ds-gray-100);
  margin-top: 4rem;
  padding: 2rem 0;
}

/* Messages/Alerts */
.ds-alert {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  border: 2px solid;
}

.ds-alert-info {
  background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
  border-color: #93C5FD;
  color: #1E40AF;
}

.ds-alert-success {
  background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
  border-color: #6EE7B7;
  color: #065F46;
}

.ds-alert-warning {
  background: linear-gradient(135deg, var(--ds-orange-50), #FEF3C7);
  border-color: var(--ds-orange-200);
  color: var(--ds-orange-800);
}

.ds-alert-danger {
  background: linear-gradient(135deg, #FEE2E2, #FECACA);
  border-color: #FCA5A5;
  color: #991B1B;
}