/* ─── Reset & base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--ff-body); color: var(--color-text); background: var(--color-white); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }

/* ─── Custom properties ─────────────────────────────────────────── */
:root {
  /* Colors */
  --color-dark:          #1A1D2E;
  --color-roof:          #2D3142;
  --color-primary:       #1B4F8A;
  --color-primary-dark:  #133A66;
  --color-primary-light: #2E6DB4;
  --color-amber:         #F5A623;
  --color-amber-light:   #FFD166;
  --color-amber-glow:    rgba(245, 166, 35, 0.15);
  --color-cream:         #FFF9F2;
  --color-bg:            #F8F7F4;
  --color-white:         #FFFFFF;
  --color-text:          #1A1D2E;
  --color-text-muted:    #6B7280;
  --color-text-light:    #9CA3AF;
  --color-border:        #E5E7EB;
  --color-border-dark:   #D1D5DB;
  --color-success:       #059669;
  --color-star:          #F5A623;

  /* Typography */
  --ff-body:    'Inter', system-ui, sans-serif;
  --ff-heading: 'Inter', system-ui, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fs-5xl:  3rem;
  --fs-6xl:  3.75rem;

  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  /* Spacing */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  /* Container */
  --container-max:  1200px;
  --container-pad:  var(--sp-6);

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.15);

  /* Transitions */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:  150ms;
  --dur-base:  250ms;
  --dur-slow:  400ms;

  /* Nav */
  --nav-h: 72px;
}

/* ─── Typography helpers ────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

h1 { font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl)); font-weight: var(--fw-black); }
h2 { font-size: clamp(var(--fs-2xl), 3.5vw, var(--fs-4xl)); }
h3 { font-size: clamp(var(--fs-xl), 2.5vw, var(--fs-2xl)); }
h4 { font-size: var(--fs-xl); }

p { max-width: 68ch; }

.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.text-amber { color: var(--color-amber); }
.text-white { color: var(--color-white); }

/* ─── Section label ─────────────────────────────────────────────── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: var(--sp-4);
}

.section-label::before { display: none; }

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

/* ─── Visually hidden (a11y) ────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ─── Star rating helper ────────────────────────────────────────── */
.stars {
  color: var(--color-star);
  font-size: var(--fs-lg);
  letter-spacing: 2px;
}

@media (min-width: 768px) {
  :root { --container-pad: var(--sp-8); }
}