/* ⚠️ MOBILE-FIRST: Base rules = mobile. Use @media(min-width: X) for desktop. Do NOT use @media(max-width) for layout.
   ==========================================
   BASE STYLES - Reset, Typography, Utilities
   ========================================== */

/* Reset & Box Sizing */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Body */
body {
  font-family: var(--sans);
  background: var(--bg-cream);
  color: var(--text-main);
  overflow-x: hidden;
  line-height: 1.6;
}

/* Container */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Icon Helper */
i[data-lucide] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: currentColor;
}

i[data-lucide] svg {
  display: block;
}

/* Utility Classes */
.hidden {
  display: none !important;
}

/* Focus Styles for Accessibility */
:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: var(--brand-gold);
  color: white;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-cream);
}

::-webkit-scrollbar-thumb {
  background: var(--brand-navy-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-navy);
}

/* Keyboard auto-scroll: give inputs space when focused */
input:focus,
textarea:focus,
select:focus {
  scroll-margin-top: 100px;
}