/* =====================================================
   DIGIBAZARS — BASE STYLES
   Reset, Typography, Global Utility Overrides
   ===================================================== */

/* ── Import Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

/* ── Box Sizing Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── Root / HTML ── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--db-text);
  background-color: var(--db-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Typography Base ── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--db-text);
  margin-bottom: var(--space-4);
}

h1, .h1 { font-size: clamp(2rem, 5vw, var(--fs-5xl)); }
h2, .h2 { font-size: clamp(1.5rem, 3.5vw, var(--fs-4xl)); }
h3, .h3 { font-size: clamp(1.25rem, 2.5vw, var(--fs-3xl)); }
h4, .h4 { font-size: clamp(1.1rem, 2vw, var(--fs-2xl)); }
h5, .h5 { font-size: var(--fs-xl); }
h6, .h6 { font-size: var(--fs-lg); }

p {
  color: var(--db-muted);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
}

a {
  color: var(--db-blue);
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover { color: var(--db-blue-dark); }

/* ── Images ── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Lists ── */
ul, ol { padding-left: 0; list-style: none; margin: 0; }

/* ── Buttons — Reset Bootstrap Primary ── */
.btn-primary {
  background: var(--db-orange);
  border-color: var(--db-orange);
  color: var(--db-white);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--db-orange-dark);
  border-color: var(--db-orange-dark);
  color: var(--db-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-orange);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

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

.btn-secondary {
  background: var(--db-blue);
  border-color: var(--db-blue);
  color: var(--db-white);
  font-weight: var(--fw-semibold);
}
.btn-secondary:hover {
  background: var(--db-blue-dark);
  border-color: var(--db-blue-dark);
  color: var(--db-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-blue);
}

/* ── Section Layout ── */
section {
  position: relative;
  overflow: hidden;
}

.section-py {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
}

.section-py-sm {
  padding-top: var(--section-py-sm);
  padding-bottom: var(--section-py-sm);
}

/* ── Section Badge ── */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.section-badge-orange {
  background: var(--db-orange-50);
  color: var(--db-orange);
  border: 1px solid var(--db-orange-100);
}
.section-badge-blue {
  background: var(--db-blue-50);
  color: var(--db-blue);
  border: 1px solid var(--db-blue-100);
}
.section-badge-purple {
  background: var(--db-purple-50);
  color: var(--db-purple);
  border: 1px solid var(--db-purple-100);
}
.section-badge-green {
  background: var(--db-green-50);
  color: var(--db-green-dark);
  border: 1px solid var(--db-green-100);
}

/* ── Headings with Gradient Accent ── */
.heading-accent {
  position: relative;
  display: inline-block;
}
.heading-accent::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--db-orange), var(--db-blue));
}

/* ── Divider Gradient ── */
.divider-gradient {
  height: 2px;
  background: linear-gradient(90deg, var(--db-orange), var(--db-blue), var(--db-purple), var(--db-green));
  border: none;
  opacity: 0.4;
  border-radius: var(--radius-full);
}

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Focus States ── */
:focus-visible {
  outline: 3px solid var(--db-orange);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ── Skip to Content (Accessibility) ── */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  background: var(--db-orange);
  color: var(--db-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  transition: top var(--transition-fast);
}
.skip-to-content:focus {
  top: var(--space-4);
}

/* ── Utility: Text Colors ── */
.text-orange  { color: var(--db-orange)  !important; }
.text-blue    { color: var(--db-blue)    !important; }
.text-purple  { color: var(--db-purple)  !important; }
.text-green   { color: var(--db-green-dark) !important; }
.text-teal    { color: var(--db-teal)    !important; }
.text-muted   { color: var(--db-muted)   !important; }

/* ── Utility: Backgrounds ── */
.bg-surface   { background-color: var(--db-surface) !important; }
.bg-surface-2 { background-color: var(--db-surface-2) !important; }
.bg-orange-soft { background-color: var(--db-orange-50) !important; }
.bg-blue-soft   { background-color: var(--db-blue-50)   !important; }
.bg-purple-soft { background-color: var(--db-purple-50) !important; }
.bg-green-soft  { background-color: var(--db-green-50)  !important; }