/* ==========================================================================
   Lullagram brand stylesheet (September 2026 rebrand)
   Night navy, blush pink, warm cream, rounded type.
   Loaded on every marketing page after that page's own <style> block, so the
   tokens and rules here win. Change colours and fonts HERE, once, for the
   whole site. The app at /app/ is separate and does not use this file.
   Fonts (Google Fonts, linked in each page <head>):
     Fredoka  - headings and the wordmark
     Nunito   - body text
     Caveat   - handwritten flourishes only (taglines, captions)
   ========================================================================== */

:root {
  /* Ground */
  --paper: #FCF7F2;          /* warm cream page ground */
  --paper-deep: #F5ECE5;     /* deeper cream for panels and stripes */
  --white: #FFFFFF;
  --panel: #FFFFFF;
  --panel-bg: #FCF7F2;
  --bg: #FCF7F2;

  /* Ink on light */
  --ink: #232A4A;            /* deep night navy */
  --ink-soft: #545C7E;
  --ink-mute: #8A91AC;

  /* Pinks */
  --accent: #C63F76;         /* rose: links and small labels on cream (passes AA) */
  --accent-press: #A8335F;
  --accent-wash: #FBE6EF;    /* soft pink tint */
  --magenta: #C63F76;        /* legacy name used by older page templates */
  --magenta-dark: #A8335F;
  --pink: #F4A6C9;           /* blush: display text on navy, primary buttons */
  --pink-press: #EF8FBA;

  /* Night */
  --plum: #1F2645;           /* navy band: nav, hero, trust, footer */
  --plum-soft: #2B3360;
  --plum-ink: #F3EFF7;       /* text on navy */
  --plum-mute: #AEB4CF;

  /* Supporting */
  --gold: #F6D384;           /* moon, stars, warm lamp light */
  --lavender: #9F93D9;
  --lavender-wash: #ECE8F7;
  --coral: #F2A470;
  --mint: #7CB388;
  --line: #EAE1E0;
  --line-soft: #EFE6E6;
  --line-strong: #D8CDD0;

  --radius: 20px;
  --font-display: 'Fredoka', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
}

/* ---- Type ---------------------------------------------------------------- */
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-display); }
h1 { font-weight: 700; }
::selection { background: var(--pink); color: var(--plum); }

/* Wordmarks on older templates were italic Georgia. Rounded, upright now. */
.wordmark, .footer-wordmark, .nav-logo {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}
/* Ledes and quotes keep their italic voice but in the body face, not the display face. */
.post-lede, .post-dek, .post-body blockquote { font-family: var(--font-body) !important; }

/* ---- Navigation: navy on every page, like the homepage -------------------- */
.nav {
  background: rgba(31, 38, 69, 0.94) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.nav a, .nav .wordmark, .nav .nav-logo, .nav-links a { color: var(--plum-ink) !important; }
.nav-links a:hover, .nav-links a.active, .nav a:hover { color: var(--pink) !important; }
.nav-cta, .nav .nav-cta, .nav .btn-primary, .nav-links > a.nav-cta, .mobile-menu .btn-primary {
  background: var(--pink) !important;
  color: var(--plum) !important;
  font-weight: 800;
}
.nav-cta:hover, .nav .btn-primary:hover { background: var(--pink-press) !important; }
.mobile-menu { background: var(--plum); }

/* ---- Buttons and calls to action ------------------------------------------ */
.btn-primary {
  background: var(--pink);
  color: var(--plum);
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(244, 166, 201, 0.35);
}
.btn-primary:hover { background: var(--pink-press); color: var(--plum); }
.btn-primary .ic { stroke: var(--plum); }

/* Inline article CTA and FAQ/contact CTA blocks: navy room with a warm lamp glow */
.post-cta, .cta-block {
  background:
    radial-gradient(ellipse 60% 80% at 90% 10%, rgba(255, 186, 110, 0.26) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 5% 100%, rgba(159, 147, 217, 0.22) 0%, transparent 60%),
    var(--plum) !important;
  color: var(--plum-ink);
}
.post-cta h3, .cta-block h3 { color: var(--white); }
.post-cta .btn, .cta-block .btn {
  background: var(--pink) !important;
  color: var(--plum) !important;
  font-weight: 800;
}
.post-cta .btn:hover, .cta-block .btn:hover { background: var(--pink-press) !important; }

/* ---- Footer ---------------------------------------------------------------- */
.footer, footer.footer { background: var(--plum); }
.footer-col a:hover { color: var(--pink) !important; }

/* ---- Focus ----------------------------------------------------------------- */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}
