/* ========================================
   IMBU Design System
   Consolidated styling for UI consistency
   ======================================== */

/* --- Color Variables --- */
:root {
  /* Primary Colors */
  --imbu-primary: #54a8c7;
  --imbu-primary-hover: #4090a8;
  --imbu-primary-soft: #e0eff5;

  /* Text Colors */
  --imbu-text-dark: #343f52;
  --imbu-text-muted: #60697b;
  --imbu-text-light: #aab0bc;

  /* Background Colors */
  --imbu-bg-light: #edf5f8;
  --imbu-bg-accent: #edf2fc;
  --imbu-bg-dark: #262b32;
  --imbu-bg-slate: #343f52;

  /* Shadows */
  --imbu-shadow-card: 0 0.25rem 1.75rem rgba(30,34,40,0.07);
  --imbu-shadow-none: none;
}

/* --- Dark Background Utilities --- */
/* Slate background - for top bars, headers */
.bg-slate-dark {
  background-color: var(--imbu-bg-slate);
}

/* Dark background - for sections like stats */
.bg-section-dark {
  background-color: var(--imbu-bg-dark);
}

/* ========================================
   BUTTON COMPONENTS
   ======================================== */

/* Primary CTA Button (Filled) */
.btn-primary-cta {
  display: inline-block;
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.7;
  border-radius: 50rem;
  padding: 0.5rem 1.2rem;
  border: 2px solid var(--imbu-primary);
  background-color: var(--imbu-primary);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary-cta:hover {
  color: white;
  background-color: var(--imbu-primary-hover);
  border-color: var(--imbu-primary-hover);
  transform: translateY(0);
  box-shadow: none;
}

.btn-primary-cta:active {
  background-color: var(--imbu-primary);
  border-color: var(--imbu-primary);
}

.btn-primary-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary CTA Button (Outline) */
.btn-secondary-cta {
  display: inline-block;
  color: var(--imbu-primary);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.7;
  border-radius: 50rem;
  padding: 0.5rem 1.2rem;
  border: 2px solid var(--imbu-primary);
  background-color: transparent;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  text-decoration: none;
}

.btn-secondary-cta:hover {
  color: white;
  background-color: var(--imbu-primary);
  border-color: var(--imbu-primary);
  transform: translateY(0);
  box-shadow: none;
}

.btn-secondary-cta:active {
  background-color: var(--imbu-primary);
  border-color: var(--imbu-primary);
}

/* Icon Circle Button - Standard */
.btn-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100%;
  padding: 0;
  flex-shrink: 0;
  background-color: var(--imbu-primary-soft);
  color: var(--imbu-primary);
  pointer-events: none;
}

/* Icon Circle - Small variant */
.btn-icon-circle-sm {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
}

/* Icon Circle - Large variant */
.btn-icon-circle-lg {
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

/* Section Label (h2 style) */
.section-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02rem;
  margin-bottom: 0.75rem;
  color: var(--imbu-primary);
}

/* Section Headline (h3 style) */
.section-headline {
  font-size: calc(1.305rem + 0.66vw);
  font-weight: 700;
  line-height: 1.3;
  color: var(--imbu-text-dark);
}

@media (min-width: 1280px) {
  .section-headline {
    font-size: 1.8rem;
  }
}

/* Section Headline - Large variant */
.section-headline-lg {
  font-size: calc(1.345rem + 1.14vw);
  font-weight: 700;
  line-height: 1.25;
  color: var(--imbu-text-dark);
}

@media (min-width: 1280px) {
  .section-headline-lg {
    font-size: 2.2rem;
  }
}

/* Lead Text (larger paragraphs) */
.lead-text {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--imbu-text-muted);
}

/* Body Text */
.body-text {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--imbu-text-muted);
}

/* ========================================
   CARD COMPONENTS
   ======================================== */

/* Card - Elevated (with shadow) */
.card-elevated {
  background-color: white;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 0.5rem;
  box-shadow: var(--imbu-shadow-card);
}

/* Card - Flat (no shadow) */
.card-flat {
  background-color: white;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 0.5rem;
  box-shadow: none;
}

/* Card - Accent (colored background) */
.card-accent {
  background-color: var(--imbu-bg-accent);
  border: none;
  border-radius: 0.5rem;
}

/* Card Padding - Standard */
.card-padding {
  padding: 2rem;
}

/* Card Padding - Large */
.card-padding-lg {
  padding: 2.5rem;
}

/* ========================================
   SECTION LAYOUT
   ======================================== */

/* Standard Section Padding */
.section-padding {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

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

@media (min-width: 1024px) {
  .section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1280px) {
  .section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

/* ========================================
   BACKGROUNDS
   ======================================== */

/* Hero Gradient */
.bg-gradient-hero {
  background: linear-gradient(to bottom, #edf5f8 0%, #ffffff 100%);
}

/* Light Background */
.bg-light {
  background-color: var(--imbu-bg-light);
}

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

/* Dark Background */
.bg-dark-section {
  background-color: var(--imbu-bg-dark);
}

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

/* Text colors */
.text-primary {
  color: var(--imbu-primary);
}

.text-muted {
  color: var(--imbu-text-muted);
}

.text-light {
  color: var(--imbu-text-light);
}

/* Image rounded corners - standard */
.img-rounded {
  border-radius: 0.4rem;
}

/* Image shadow */
.img-shadow {
  box-shadow: var(--imbu-shadow-card);
}