/* ============================================================
   Callstand — public page theme
   The homepage look (cream background, Bricolage Grotesque
   headings, DM Sans body, dark-gray buttons, brown CTA banners)
   applied on top of each page's own styles. The server links
   this file last on every public page (see withTheme in
   src/server.js), so it wins over page styles of equal weight
   and new guides and posts pick it up automatically.
   ============================================================ */

:root {
  /* palette shared with the homepage */
  --cream: #FBFBF8;
  --sand: #F1EFE8;
  --btn: #333333;
  --btn-hover: #444444;
  --brown: #211f1c;
  --brown-soft: #b8b5ae;
  --orange: #F26A3D;
  --orange-ink: #B8401B;
  --display: 'Bricolage Grotesque', sans-serif;

  /* the variables the existing page styles already use, warmed to match */
  --ink: #16161A;
  --ink-mid: #4A4943;
  --ink-soft: #6B6961;
  --line: #E2DFD6;
  --paper: var(--sand);
  --dark: var(--brown);
  --blue: var(--orange-ink);
  --blue-soft: #FBE9E2;
  --accent: var(--orange-ink);
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body { font-family: var(--sans); background: var(--cream); color: var(--ink); }

/* The shared header and footer keep the site's system font everywhere. */
.sitenav, .sitefoot { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; }

h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; }

/* ---------- buttons ---------- */
.btn, .primary, .ghost { font-weight: 700; border-radius: 12px; }
.banner .btn { border-radius: 12px; font-weight: 700; }
.banner .btn.solid, .primary { background: var(--btn); color: #fff; }
.banner .btn.solid:hover, .primary:hover { background: var(--btn-hover); color: #fff; }
.banner .btn.line, .ghost { border: 2px solid var(--btn); color: var(--btn); background: transparent; }
.banner .btn.line:hover, .ghost:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- cards and panels ---------- */
.gcard { background: #fff; border-color: var(--ink); border-radius: 20px; }
.gcard .tag { color: var(--orange-ink); }
.gcard.soon { border-color: var(--line); }
.tico { border-radius: 12px; }
.toc, .tablewrap, .note, .prompt, .stepc, .authbox, .intro, .callout, .promptbox, .result img { border-radius: 16px; }
.toc, .tablewrap { background: #fff; }
.panel { border-radius: 0; }
.bcard .tag { color: var(--orange-ink); }

/* ---------- CTA banners: light = white card, dark = the homepage's brown band ---------- */
.banner { background: #fff; border: 2px solid var(--ink); border-radius: 20px; }
.banner h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; }
.banner.dark { background: var(--brown); border-color: var(--brown); }
.banner.dark p { color: var(--brown-soft); }
.banner.dark .btn.solid { background: var(--orange); color: var(--ink); }
.banner.dark .btn.solid:hover { background: #f47e57; color: var(--ink); }
.banner.dark .btn.line { border: 2px solid rgba(255, 255, 255, .5); color: #fff; }
.banner.dark .btn.line:hover { border-color: #fff; color: #fff; }

/* ---------- tool pages ---------- */
.costtag { color: var(--orange-ink); background: var(--blue-soft); }
.creditsplash { background: var(--sand); border-radius: 12px; }
.creditsplash b { color: var(--ink); }
.eyebrow { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }

/* ---------- copy-ready templates (e.g. the cold email follow-ups) ---------- */
.template { background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 18px 22px; margin: 16px 0; }
.template h3 { margin: 0 0 8px; }
.template p { margin-bottom: 8px; }
.template p:last-child { margin-bottom: 0; }