/* ============================================================
   BASE.CSS — Clear Built Pools Design Tokens + Reset
   Brand: Navy #1B2E5E | Teal #2BBFAD | Light Teal #3DD6C3
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand Colors */
  --navy:       #1B2E5E;
  --navy-dark:  #111E42;
  --navy-light: #2A4080;
  --teal:       #2BBFAD;
  --teal-light: #3DD6C3;
  --teal-dark:  #1E9A8A;
  --white:      #FFFFFF;
  --off-white:  #F4F8FC;
  --gray-50:    #F8FAFC;
  --gray-100:   #EEF2F7;
  --gray-200:   #D8E2EE;
  --gray-400:   #8FA3BE;
  --gray-600:   #4A6380;
  --gray-800:   #1E3050;

  /* Semantic */
  --bg:         var(--off-white);
  --surface:    var(--white);
  --surface-2:  var(--gray-50);
  --border:     var(--gray-200);
  --text:       var(--navy-dark);
  --text-muted: var(--gray-600);
  --accent:     var(--teal);
  --accent-dark: var(--teal-dark);

  /* Typography */
  --font-display: 'Clash Display', 'Montserrat', system-ui, sans-serif;
  --font-body:    'Satoshi', 'Inter', system-ui, sans-serif;

  /* Type Scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  clamp(1.4rem, 3vw, 1.75rem);
  --text-3xl:  clamp(1.75rem, 4vw, 2.25rem);
  --text-hero: clamp(2.25rem, 6vw, 3.5rem);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Layout */
  --container: 1200px;
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(27,46,94,0.08), 0 1px 2px rgba(27,46,94,0.06);
  --shadow:    0 4px 16px rgba(27,46,94,0.12), 0 2px 6px rgba(27,46,94,0.08);
  --shadow-lg: 0 12px 40px rgba(27,46,94,0.18), 0 4px 12px rgba(27,46,94,0.10);
  --shadow-teal: 0 4px 20px rgba(43,191,173,0.30);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 220ms;
}

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.15;
  font-weight: 700;
  color: var(--navy);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

@media (max-width: 640px) {
  .container { padding: 0 var(--space-4); }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  transition: all var(--duration) var(--ease);
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
  min-height: 48px;
}

.btn-primary {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
  box-shadow: var(--shadow-teal);
}
.btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); }

.btn-white {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}
.btn-white:hover { background: var(--off-white); }

.section {
  padding: var(--space-20) 0;
}
@media (max-width: 768px) {
  .section { padding: var(--space-12) 0; }
}