/* =================================================
   F2F Base · Reset, typography, utilities
   ================================================= */

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

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-chocolate);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--duration-sm) var(--ease-luxury); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
input, textarea { background: none; border: none; outline: none; }
ul, ol { list-style: none; }

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--color-chocolate);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin-bottom: var(--space-md); max-width: 720px; }

.display {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

em { font-style: italic; color: var(--color-bordeaux); }

.text-serif { font-family: var(--font-serif); }
.text-sans  { font-family: var(--font-sans); }
.text-mono  { font-family: var(--font-mono); }
.text-italic { font-style: italic; }

/* Eyebrow label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-bordeaux);
  display: block;
  margin-bottom: var(--space-lg);
}
.eyebrow--gold { color: var(--color-gold); }
.eyebrow--stone { color: var(--color-stone); }

/* === LAYOUT UTILITIES === */
.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }

section {
  padding-top: var(--space-5xl);
  padding-bottom: var(--space-5xl);
}
section.tight { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }

/* === COLOR BACKGROUND UTILITIES === */
.bg-white     { background: var(--color-white); }
.bg-cream     { background: var(--color-cream); }
.bg-ivory     { background: var(--color-ivory); }
.bg-chocolate { background: var(--color-chocolate); color: var(--color-ivory); }
.bg-chocolate-deep { background: var(--color-chocolate-deep); color: var(--color-ivory); }
.bg-bordeaux  { background: var(--color-bordeaux); color: var(--color-white); }

.bg-chocolate h1, .bg-chocolate h2, .bg-chocolate h3,
.bg-chocolate-deep h1, .bg-chocolate-deep h2, .bg-chocolate-deep h3,
.bg-bordeaux h1, .bg-bordeaux h2, .bg-bordeaux h3 { color: var(--color-white); }

.bg-chocolate em, .bg-chocolate-deep em, .bg-bordeaux em { color: var(--color-gold); }

/* === FOCUS STATES (accessibility) === */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* === SELECTION === */
::selection {
  background: var(--color-bordeaux);
  color: var(--color-white);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .container {
    padding-left: var(--container-pad-sm);
    padding-right: var(--container-pad-sm);
  }
  section {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
  }
}

/* === TYPOGRAPHIC DECORATIONS === */
.divider {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.divider::before, .divider::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: var(--color-bordeaux);
}
.divider__dot {
  width: 4px; height: 4px;
  background: var(--color-bordeaux);
  border-radius: var(--radius-circle);
}

/* === QUOTE === */
.quote-large {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: var(--color-bordeaux);
  max-width: 820px;
  margin: var(--space-3xl) 0;
}

/* === ARIA-LIVE (for dynamic content) === */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}