/* ============================================
   BUILVERO BASE STYLES
   ============================================ */

/* CSS Variables - Design Tokens */
:root {
  --bv-primary: #9333ea;
  --bv-primary-dark: #7e22ce;
  --bv-primary-light: #a855f7;
  --bv-secondary: #6b7280;
  --bv-success: #10b981;
  --bv-danger: #ef4444;
  --bv-warning: #f59e0b;
  --bv-info: #3b82f6;
  --bv-light-bg: #f9fafb;
  --bv-dark-text: #111827;
  --bv-gray-text: #6b7280;
  --bv-border: #e5e7eb;
  
  /* Purple shades */
  --bv-purple-50: #faf5ff;
  --bv-purple-100: #f3e8ff;
  --bv-purple-600: #7230b0;
  --bv-purple-700: #7e22ce;
  --bv-purple-900: #581c87;
  
  /* Gray shades */
  --bv-gray-200: #e5e7eb;
  --bv-gray-600: #4b5563;
  --bv-gray-700: #374151;
}

/* Base Typography */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--bv-dark-text);
  line-height: 1.6;
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

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

/* Text Color Utilities */
.bv-text-primary { color: var(--bv-primary) !important; }
.bv-text-purple-600 { color: var(--bv-purple-600) !important; }
.bv-text-purple-700 { color: var(--bv-purple-700) !important; }
.bv-text-purple-900 { color: var(--bv-purple-900) !important; }
.bv-text-gray-600 { color: var(--bv-gray-600) !important; }
.bv-text-gray-700 { color: var(--bv-gray-700) !important; }

/* Background Utilities */
.bv-bg-purple-50 { background-color: var(--bv-purple-50) !important; }
.bv-bg-purple-100 { background-color: var(--bv-purple-100) !important; }
.bv-bg-purple-700 { background-color: var(--bv-purple-700) !important; }

/* Border Utilities */
.bv-border-gray-200 { border-color: var(--bv-gray-200) !important; }
.bv-border-purple-100 { border-color: var(--bv-purple-100) !important; }

/* Viewport Height Utilities */
.bv-min-vh-80 { min-height: 80vh; }

/* ============================================
   BOOTSTRAP OVERRIDES
   ============================================ */

/* Navbar Brand */
.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--bv-primary) !important;
}

/* Button Overrides */
.btn-primary {
  background-color: var(--bv-primary);
  border-color: var(--bv-primary);
}

.btn-primary:hover {
  background-color: var(--bv-primary-dark);
  border-color: var(--bv-primary-dark);
}

.btn-outline-primary {
  color: var(--bv-primary);
  border-color: var(--bv-primary);
}

.btn-outline-primary:hover {
  background-color: var(--bv-primary);
  border-color: var(--bv-primary);
}

/* Form Overrides */
.form-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--bv-dark-text);
}

.form-control:focus {
  border-color: var(--bv-primary);
  box-shadow: 0 0 0 0.2rem rgba(147, 51, 234, 0.25);
}

/* Card Overrides */
.card {
  border: none;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.card-header {
  background-color: var(--bv-light-bg);
  border-bottom: 1px solid var(--bv-border);
  font-weight: 600;
}

/* Alert Overrides */
.alert {
  border: none;
  border-radius: 0.5rem;
}

/* ============================================
   FOOTER STYLES
   ============================================ */

footer a {
  color: #d1d5db;
  transition: color 0.2s ease;
}

footer a:hover {
  color: white;
}

footer .text-muted,
footer .text-muted small {
  color: #9ca3af !important;
}

/* ============================================
   RESPONSIVE IMAGES
   ============================================ */

img {
  max-width: 100%;
  height: auto;
}