/* =============================================================
   BASE.CSS — CSS variables, reset, shared utilities
   Edit this file to change brand colors, fonts, spacing
============================================================= */

/* ── BRAND TOKENS ── */
:root {
  /* Colors */
  --gold:        #8a7a4e;
  --gold-light:  #b5a46c;
  --cream:       #f5f2ec;
  --dark:        #1a1a1a;
  --dark-green:  #1d2e2a;
  --mid:         #4a4a4a;
  --light-gray:  #e8e4dc;
  --white:       #ffffff;
  --teal:        #4ecdc4;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Montserrat', Arial, sans-serif;

  /* Spacing */
  --section-pad-v:  100px;
  --section-pad-h:  80px;
  --section-pad-mobile: 60px 24px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ── SHARED UTILITIES ── */

/* Gold underline bar (used in About, Series) */
.gold-bar {
  width: 80px;
  height: 2px;
  background: var(--gold);
  margin-top: 24px;
}

/* Primary CTA button */
.btn-gold {
  display: inline-block;
  background: var(--gold);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}

.btn-gold:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
}

/* Scroll-reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── RESPONSIVE BREAKPOINTS ──
   Use these in each css/* file:
   @media (max-width: 900px) { ... }
   @media (max-width: 600px) { ... }
*/

/* Remove any gap between nav and hero */
body > nav + * {
  margin-top: 0;
}

/* ── RESPONSIVE SCALING ──
   Inner content max-widths so text doesn't stretch too wide.
   Sections stay full-bleed, but content is centered and capped.
*/
.about-text-card,
.formula-inner,
.data-header,
.data-slide,
#series,
#cta {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Section padding scales up on wider screens */
@media (min-width: 1400px) {
  :root {
    --section-pad-h: 120px;
    --section-pad-v: 120px;
  }

  .about-text-card {
    margin-left: auto;
    margin-right: auto;
  }

  .formula-cards {
    max-width: 1200px;
    margin: 0 auto;
  }
}