/* PeriFlow website — shared styles
 * Used by index.html, privacy.html, terms.html, support.html
 * Tokens align with periflow-native/constants/tokens.ts
 */

:root {
  --sage: #A8B5A2; --sage-dk: #8A9E82; --sage-lt: #C8D5C2; --sage-bg: #EFF3ED;
  --blush: #E8C7C8; --blush-dk: #C4A0A1; --blush-lt: #F2DCDD; --blush-bg: #FBF0F0;
  --lav: #C5B8D9; --lav-dk: #9E8EBE; --lav-lt: #D8CEE8; --lav-bg: #EDE8F3;
  --cream: #F8F1E9; --cream-dk: #E8DDD0;
  --tx: #3D3A36; --tx-l: #8A857D; --tx-m: #6B665F;
  --white: #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--tx);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.serif { font-family: 'Cormorant Garamond', Georgia, serif; }

/* ── NAV ── shared across all pages */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  backdrop-filter: blur(20px);
  background: rgba(248,241,233,0.85);
  border-bottom: 1px solid rgba(168,181,162,0.15);
}
nav .logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 500;
  color: var(--sage-dk);
  text-decoration: none;
}
nav .nav-links { display: flex; align-items: center; gap: 18px; }
nav .nav-links a {
  font-size: 14px; font-weight: 500;
  color: var(--tx-m);
  text-decoration: none;
}
nav .nav-links a:hover { color: var(--sage-dk); }
nav .cta-nav {
  background: var(--sage); color: var(--white); border: none;
  padding: 10px 22px; border-radius: 50px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  text-decoration: none; display: inline-block;
  transition: all 0.2s;
}
nav .cta-nav:hover { background: var(--sage-dk); transform: translateY(-1px); }

/* ── FOOTER ── shared */
footer {
  text-align: center;
  padding: 32px 24px 48px;
  border-top: 1px solid var(--cream-dk);
  margin-top: 60px;
}
footer .logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; color: var(--sage-dk);
  font-weight: 500; margin-bottom: 12px;
}
footer p {
  font-size: 12px; color: var(--tx-l);
  line-height: 1.6; max-width: 480px; margin: 0 auto;
}
footer a { color: var(--tx-l); text-decoration: none; }
footer a:hover { color: var(--sage-dk); }
footer .links {
  display: flex; gap: 20px; justify-content: center;
  flex-wrap: wrap; margin-bottom: 16px; font-size: 13px;
}

/* ── BUTTONS ── shared */
.btn-primary {
  background: var(--sage); color: var(--white); border: none;
  padding: 16px 32px; border-radius: 50px;
  font-size: 16px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.25s;
}
.btn-primary:hover {
  background: var(--sage-dk);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(168,181,162,0.35);
}
.btn-secondary {
  background: transparent; color: var(--sage-dk);
  border: 1.5px solid var(--sage);
  padding: 16px 32px; border-radius: 50px;
  font-size: 16px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  text-decoration: none;
  display: inline-block;
  transition: all 0.25s;
}
.btn-secondary:hover { background: var(--sage-bg); }

/* ── CONTENT PAGE LAYOUT ── for /privacy, /terms, /support */
.content-page {
  padding: 120px 24px 60px;
  max-width: 760px;
  margin: 0 auto;
}
.content-page .eyebrow {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--sage-dk); margin-bottom: 12px;
}
.content-page h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 400; line-height: 1.2;
  margin-bottom: 8px; color: var(--tx);
}
.content-page .updated {
  font-size: 13px; color: var(--tx-l);
  margin-bottom: 36px;
}
.content-page h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 500;
  color: var(--tx);
  margin-top: 40px; margin-bottom: 14px;
}
.content-page h3 {
  font-size: 16px; font-weight: 700;
  color: var(--tx);
  margin-top: 24px; margin-bottom: 8px;
}
.content-page p, .content-page li {
  font-size: 15px; color: var(--tx-m);
  line-height: 1.7; margin-bottom: 14px;
}
.content-page ul, .content-page ol {
  margin-left: 20px; margin-bottom: 14px;
}
.content-page a {
  color: var(--sage-dk);
  text-decoration: underline;
}
.content-page a:hover { color: var(--tx); }
.content-page strong { color: var(--tx); font-weight: 600; }
.content-page .callout {
  background: var(--white);
  border: 1px solid var(--cream-dk);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 24px 0;
}
.content-page .callout p:last-child { margin-bottom: 0; }
.content-page .toc {
  background: var(--sage-bg);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 24px 0 36px;
  font-size: 14px;
}
.content-page .toc strong {
  display: block; margin-bottom: 8px;
  color: var(--sage-dk);
  text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 11px;
}
.content-page .toc a { display: block; padding: 4px 0; color: var(--tx-m); text-decoration: none; }
.content-page .toc a:hover { color: var(--sage-dk); }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  nav { padding: 14px 16px; }
  nav .nav-links { gap: 12px; }
  nav .nav-links a { font-size: 13px; }
  nav .cta-nav { padding: 8px 16px; font-size: 13px; }
  .content-page { padding: 100px 18px 48px; }
}