/* ============================================================
   PHOENIX WATERS — design system (Stage 1)
   Tokens, fonts, grain texture, hairlines, buttons.
   This file is loaded alongside styles.css during the
   homepage-redesign build and will replace it fully in Stage 2.
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Karla:wght@400;500&display=swap');

/* ── Colour tokens ────────────────────────────────────────── */
:root {
  --linen:         #EAE2D7;   /* page background */
  --stone:         #D3C7B6;   /* cards, soft sections, FAQ band, offer box */
  --deep-moss:     #2F3A2A;   /* body text, headings, Descent section background */
  --living-moss:   #5B6B3A;   /* small labels, thin lines, card top borders */
  --oxblood:       #5A1714;   /* buttons, Eros card, tilde markers, small accents */
  --oxblood-hover: #6E1F1A;
  --gold:          #C5AB80;   /* logo accents, hairlines, labels on dark backgrounds */
  --gold-light:    #E2C99C;   /* headings and quotes on dark backgrounds */
  --lacquer:       #1E1C17;   /* footer */
  --bone:          #E9E0D2;   /* text on dark backgrounds */
  --ink-soft:      #4A5242;   /* muted body text on light backgrounds */

  /* ── Type stacks ─────────────────────────────────────────── */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  Karla, "Helvetica Neue", Arial, sans-serif;
}

/* ── Base typography ──────────────────────────────────────── */
body {
  background: var(--linen);
  color: var(--deep-moss);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
  line-height: 1.08;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-block;
  background: var(--oxblood);
  color: var(--linen);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: .02em;
  border: none;
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background .2s; }
}
.btn:hover  { background: var(--oxblood-hover); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── Paper grain ──────────────────────────────────────────── */
/* Applied to any section with class "grain".
   SVG feTurbulence rendered as a tiled 220px data-URI.
   mix-blend-mode:multiply keeps it from washing out dark text. */
.grain {
  position: relative;
  isolation: isolate;
}
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 220px 220px;
}

/* ── Gold-leaf hairline ───────────────────────────────────── */
/* A 1px horizontal rule that fades in and out at the edges.
   Use <div class="leaf"></div> between sections. */
.leaf {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold) 20%,
    var(--gold-light) 50%,
    var(--gold) 80%,
    transparent
  );
  border: none;
  margin: 0;
}

/* ── Small label style ────────────────────────────────────── */
.label {
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--living-moss);
  font-weight: 500;
}

/* ── Tilde list ───────────────────────────────────────────── */
.tilde {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tilde li {
  position: relative;
  padding-left: 28px;
}
.tilde li::before {
  content: "~";
  position: absolute;
  left: 0;
  color: var(--oxblood);
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
}

/* ── Smooth scroll (with reduced-motion respect) ─────────── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Demo: grain preview band ────────────────────────────── */
/* Visible in Stage 1 screenshots; removed in Stage 2. */
.stage1-demo {
  padding: 60px 40px;
  max-width: 800px;
  margin: 0 auto;
}
.stage1-demo h2 {
  font-size: clamp(28px, 4vw, 48px);
  margin-bottom: 16px;
}
.stage1-demo p {
  color: var(--ink-soft);
  max-width: 55ch;
}