/* Custom Homepage Styling */
:root {
  --accent-color: #3b82f6;
  --accent-ring: #60a5fa;
  --bg-primary: #1f2937;
  --bg-secondary: #111827;
  --text-primary: #ffffff;
  --border-color: #3b82f6;
}

/* Dark theme adjustments */
body {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* Service cards styling */
.service-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}

.service-card:hover {
  transform: scale(1.02);
  border-color: var(--accent-ring);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Button styling */
button, .btn {
  transition: all 0.2s ease-in-out;
  transform: scale(1);
}

button:hover, .btn:hover {
  transform: scale(1.05);
}

button:active, .btn:active {
  transform: scale(0.95);
}

button:focus, .btn:focus {
  outline: none;
  ring: 2px;
  ring-color: var(--accent-ring);
  ring-offset: 2px;
}

/* Widget cards */
.widget-card {
  background-color: var(--bg-primary);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}

/* Text colors */
h1, h2, h3, h4, h5, h6, p, span, div {
  color: var(--text-primary);
}

/* Accent elements */
.accent-bg {
  background-color: var(--accent-color);
}

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

/* Smooth transitions */
* {
  transition-property: color, background-color, border-color, transform;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
}