/* ============================================================
   BASE.CSS — Variables, reset, typography, utilities
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --bg:            #0E0D0B;
  --surface:       #181612;
  --surface-2:     #1F1C16;
  --text-primary:  #F2EAD9;
  --text-secondary:#A89F8B;
  --text-tertiary: #6E6657;
  --accent:        #C9A876;
  --accent-hover:  #DDBE8A;
  --border:        rgba(242, 234, 217, 0.08);
  --border-strong: rgba(242, 234, 217, 0.18);
  --radius-sm:     2px;
  --radius-md:     4px;
  --font-serif:    'Cormorant Garamond', Georgia, serif;
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background:  var(--bg);
  color:       var(--text-primary);
  font-family: var(--font-sans);
  font-size:   17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x:  hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

button { font-family: inherit; cursor: pointer; }

/* ---------- Typography ---------- */
.serif { font-family: var(--font-serif); }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; line-height: 1.1; }

/* ---------- Layout ---------- */
.container {
  max-width: 1240px;
  margin:    0 auto;
  padding:   0 28px;
}

.section       { padding: 110px 0; }
.section-tight { padding:  90px 0; }

/* ---------- Section headers ---------- */
.section-eyebrow {
  color:          var(--accent);
  font-size:      12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom:  20px;
  font-weight:    500;
  display:        flex;
  align-items:    center;
  gap:            14px;
  justify-content: center;
}
.section-eyebrow::before,
.section-eyebrow::after {
  content:    '';
  width:      30px;
  height:     1px;
  background: var(--accent);
}

.section-title {
  font-family:  var(--font-serif);
  font-size:    clamp(32px, 4.2vw, 48px);
  text-align:   center;
  font-weight:  500;
  margin-bottom: 18px;
  letter-spacing: -0.005em;
}

.section-sub {
  text-align:    center;
  color:         var(--text-secondary);
  font-size:     17px;
  max-width:     580px;
  margin:        0 auto 64px;
  line-height:   1.7;
}

/* ---------- Buttons ---------- */
.btn-primary {
  background:     var(--accent);
  color:          var(--bg);
  border:         none;
  padding:        12px 26px;
  border-radius:  var(--radius-sm);
  font-size:      13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight:    500;
  transition:     background 0.25s;
  display:        inline-block;
  text-decoration: none;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-ghost {
  background:     transparent;
  color:          var(--text-primary);
  border:         1px solid var(--border-strong);
  padding:        12px 26px;
  border-radius:  var(--radius-sm);
  font-size:      13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight:    500;
  transition:     all 0.25s;
  display:        inline-block;
  text-decoration: none;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Utilities ---------- */
.surface   { background: var(--surface); }
.surface-2 { background: var(--surface-2); }
.accent    { color: var(--accent); }
.muted     { color: var(--text-secondary); }
.hint      { color: var(--text-tertiary); }

.text-center { text-align: center; }
.mt-auto     { margin-top: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .section   { padding: 70px 0; }
}