/* Bootstrap 5 Customizations for PDF API Website */

:root {
  /* Brand colors */
  --pdf-primary: #ea3419;
  --pdf-primary-rgb: 234, 52, 25;
  --pdf-accent: #ff9718;
  --pdf-accent-rgb: 255, 151, 24;

  /* Bootstrap color overrides */
  --bs-primary: var(--pdf-primary);
  --bs-primary-rgb: var(--pdf-primary-rgb);
  --bs-success: #28a745;
  --bs-info: #17a2b8;
  --bs-warning: var(--pdf-accent);
  --bs-warning-rgb: var(--pdf-accent-rgb);
  --bs-danger: #dc3545;

  /* Typography */
  --bs-font-sans-serif:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-headings-font-family: var(--bs-font-sans-serif);
  --bs-headings-font-weight: 600;

  /* Border radius */
  --bs-border-radius: 0.75rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.5rem;

  /* Shadows */
  --bs-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

  /* Custom gradients */
  --gradient-primary: linear-gradient(135deg, var(--pdf-primary), #d12a0f);
  --gradient-accent: linear-gradient(135deg, var(--pdf-accent), #e6870b);
  --gradient-hero: linear-gradient(135deg, var(--pdf-primary), var(--pdf-accent));
  --gradient-subtle: linear-gradient(180deg, #ffffff, #f8f9fa);

  /* Custom shadows */
  --shadow-glow: 0 0 30px rgba(var(--pdf-primary-rgb), 0.3);
  --shadow-accent-glow: 0 0 30px rgba(var(--pdf-accent-rgb), 0.3);
}

/* Bootstrap component customizations */
.btn-primary {
  background: var(--gradient-primary);
  border: none;
  font-weight: 500;
  letter-spacing: 0.025em;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #d12a0f, #b8240d);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.btn-accent {
  background: var(--gradient-accent);
  border: none;
  color: white;
  font-weight: 500;
  letter-spacing: 0.025em;
}

.btn-accent:hover,
.btn-accent:focus {
  background: linear-gradient(135deg, #e6870b, #cc7a0a);
  box-shadow: var(--shadow-accent-glow);
  transform: translateY(-1px);
  color: white;
}

.btn-outline-primary {
  border: 2px solid var(--pdf-primary);
  color: var(--pdf-primary);
  font-weight: 500;
}

.btn-outline-primary:hover {
  background: var(--pdf-primary);
  border-color: var(--pdf-primary);
  transform: translateY(-1px);
}

/* Card customizations */
.card {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: var(--bs-border-radius);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--bs-box-shadow-lg);
}

.card-primary {
  border: 2px solid var(--pdf-primary);
  box-shadow: var(--shadow-glow);
}

/* Navbar customizations */
.navbar-brand {
  font-weight: 700;
  font-size: 1.25rem;
}

.navbar-nav .nav-link {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--pdf-primary);
}

/* Text utilities */
.text-primary {
  color: white !important;
}

.text-accent {
  color: var(--pdf-accent) !important;
}

.text-gradient {
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Background utilities */
.bg-primary {
  background: var(--gradient-primary) !important;
}

.bg-accent {
  background: var(--gradient-accent) !important;
}

.bg-gradient-hero {
  background: var(--gradient-hero) !important;
}

.bg-gradient-subtle {
  background: var(--gradient-subtle) !important;
}

/* Border utilities */
.border-primary {
  border-color: var(--pdf-primary) !important;
}

.border-2 {
  border-width: 2px !important;
}

/* Custom spacing */
.py-section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media (min-width: 768px) {
  .py-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* Animation utilities */
.fade-in {
  animation: fadeIn 0.6s ease-out;
}

.slide-up {
  animation: slideUp 0.6s ease-out;
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Responsive typography */
@media (min-width: 768px) {
  .display-1 {
    font-size: 4rem;
  }
  .display-2 {
    font-size: 3.5rem;
  }
  .display-3 {
    font-size: 3rem;
  }
  .display-4 {
    font-size: 2.5rem;
  }
}

.btn:active,
.btn.active {
  background: linear-gradient(135deg, #d12a0f, #b8240d) !important;
  border-color: #b8240d !important;
  color: #fff !important;
}