/* Shared chrome — tokens, body, nav, footer.
   Used by both index.html (landing) and the privacy template generated by
   build.mjs. Page-specific styles stay inline on each page. */

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

:root {
  --charcoal:      oklch(22% 0.025 55);
  --hero-bg:       oklch(97% 0.010 75);      /* warm cream — light base */
  --hero-surface:  oklch(93% 0.012 72);      /* slightly darker cream for cards */
  --hero-surface2: oklch(90% 0.014 70);      /* card hover / alt */
  --hero-mid:      oklch(42% 0.018 52);      /* subdued text on light */
  --hero-sub:      oklch(36% 0.016 55);      /* body text on light */
  --cream:         oklch(22% 0.025 55);      /* inverted — charcoal is the text colour now */
  --stone:         oklch(91% 0.012 75);
  --mid:           oklch(50% 0.016 55);
  --secondary:     oklch(42% 0.020 55);
  --hairline:      oklch(86% 0.014 70);
  --link:          oklch(54% 0.17 32);
  --link-hover:    oklch(46% 0.17 32);
  --font-mark:     'Waiting for the Sunrise', cursive;
  --font-body:     'Nunito', sans-serif;
  --grad-warm:     linear-gradient(90deg, oklch(70% 0.17 10), oklch(72% 0.18 35), oklch(74% 0.17 55), oklch(78% 0.17 75));
  /* Pops of colour */
  --pop-terra:     oklch(54% 0.17 32);
  --pop-amber:     oklch(62% 0.17 68);
  --pop-sage:      oklch(54% 0.15 148);
  --pop-violet:    oklch(52% 0.16 295);
  --pop-blue:      oklch(52% 0.16 245);
  --pop-rose:      oklch(56% 0.16 12);
}

html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--hero-bg);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
}

/* ── NAV ── */
nav.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: oklch(97% 0.010 75 / 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid oklch(88% 0.014 72);
  padding: 0 48px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-family: var(--font-mark);
  font-size: 28px;
  color: var(--charcoal);
  line-height: 1;
  text-decoration: none;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 22px;
  border-radius: 100px;
  border: 1.5px solid oklch(36% 0.030 50);
  font-size: 13px;
  font-weight: 700;
  color: var(--charcoal);
  background: transparent;
  font-family: var(--font-body);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.nav-cta:hover {
  background: var(--charcoal);
  color: oklch(97% 0.010 75);
  border-color: var(--charcoal);
}

/* ── FOOTER ── */
.site-footer {
  background: var(--hero-bg);
  border-top: 1px solid oklch(93% 0.012 72);
  padding: 56px 48px 48px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-logo {
  font-family: var(--font-mark);
  font-size: 26px;
  color: var(--charcoal);
  text-decoration: none;
  line-height: 1;
}
.footer-links {
  display: flex;
  gap: 24px;
}
.footer-links a {
  font-size: 13px;
  font-weight: 600;
  color: var(--hero-mid);
  text-decoration: none;
  transition: color 0.18s;
}
.footer-links a:hover { color: var(--charcoal); }
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid oklch(93% 0.012 72);
}
.footer-legal {
  font-size: 13px;
  line-height: 1.6;
  color: oklch(40% 0.014 55);
}
.footer-legal a { color: var(--pop-terra); text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }
.footer-small { font-size: 12px; color: oklch(38% 0.013 52); }

/* ── Mobile ── */
/* Footer pads down a bit earlier than the nav shrinks. */
@media (max-width: 900px) {
  .site-footer { padding: 48px 24px 40px; }
}
@media (max-width: 600px) {
  nav.site-nav { height: 52px; padding: 0 20px; }
  .nav-logo { font-size: 22px; }
  .nav-cta  { font-size: 11px; padding: 6px 16px; }

  .footer-top { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ═══ DARK THEME ═══ */
@media (prefers-color-scheme: dark) {
  :root {
    --hero-bg:       oklch(17% 0.022 48);
    --hero-surface:  oklch(26% 0.028 50);
    --hero-surface2: oklch(24% 0.028 52);
    --hero-mid:      oklch(62% 0.014 55);
    --hero-sub:      oklch(68% 0.014 55);
    --cream:         oklch(97% 0.010 75);
    --hairline:      oklch(28% 0.026 50);
    --link:          oklch(74% 0.16 36);
    --link-hover:    oklch(82% 0.15 38);
    --pop-terra:     oklch(64% 0.17 32);
    --pop-amber:     oklch(74% 0.17 68);
    --pop-sage:      oklch(64% 0.15 148);
    --pop-violet:    oklch(62% 0.16 295);
    --pop-blue:      oklch(62% 0.16 245);
    --pop-rose:      oklch(66% 0.16 12);
  }

  body { background: var(--hero-bg); color: var(--cream); }

  nav.site-nav {
    background: var(--hero-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid oklch(26% 0.030 50);
  }
  .nav-logo { color: var(--cream); }
  .nav-cta {
    border-color: oklch(38% 0.030 50);
    color: var(--cream);
  }
  .nav-cta:hover {
    background: oklch(26% 0.030 50);
    color: var(--cream);
    border-color: oklch(50% 0.030 50);
  }

  .site-footer { border-top: 1px solid oklch(22% 0.026 50); }
  .footer-logo { color: var(--cream); }
  .footer-links a { color: var(--hero-mid); }
  .footer-links a:hover { color: var(--cream); }
  .footer-bottom { border-top: 1px solid oklch(22% 0.026 50); }
  .footer-legal { color: var(--hero-mid); }
  .footer-small { color: oklch(62% 0.013 52); }
}