/* "Ember" theme: warm charcoal, ember orange and tomato, serif headlines.
   Loaded after style.css; only overrides the look, never the layout logic. */
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }

:root {
  --bg: #fbf6ee;
  --surface: #fffdf9;
  --text: #1c1917;
  --muted: #6b5d52;
  --line: #eadfce;
  --accent: #c2410c;
  --accent-2: #dc2626;
  --pros: #3f7d20;
  --cons: #b91c1c;
  --shadow: 0 1px 2px rgba(28, 25, 23, .06), 0 10px 26px -14px rgba(28, 25, 23, .25);
  --shadow-hover: 0 2px 4px rgba(28, 25, 23, .08), 0 20px 40px -16px rgba(28, 25, 23, .35);
  --radius: 10px;
  --char: #1c1917;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141110;
    --surface: #1d1917;
    --text: #f3ece4;
    --muted: #b3a597;
    --line: #342c27;
    --accent: #fb923c;
    --accent-2: #f87171;
    --pros: #9fd67c;
    --cons: #fca5a5;
    --char: #0c0a09;
  }
}

h1, h2, h3, .card-title, .topic-name, .brand {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  letter-spacing: -.01em;
}
h1, h2 { font-weight: 700; }

/* header: charcoal bar with a thin ember line */
.site-header { background: var(--char); border-bottom: 3px solid var(--accent); }
.site-header .brand { color: #fff7ed; }
.site-header .brand b { color: #fb923c; }
.main-nav a { color: #d6c8bb; }
.main-nav a:hover, .main-nav a.active { color: #fff; background: rgba(251, 146, 60, .16); }

/* hero: dark with an ember glow */
.hero {
  background:
    radial-gradient(700px 320px at 15% 110%, rgba(249, 115, 22, .45), transparent 65%),
    radial-gradient(600px 300px at 85% -10%, rgba(220, 38, 38, .35), transparent 60%),
    var(--char);
  border-bottom: 0;
  color: #fff7ed;
}
.hero .hero-sub, .hero .trust { color: #e7d9cb; }
.hero .trust .icon { color: #fb923c; }
.eyebrow { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fdba74; box-shadow: none; }
.highlight { background: linear-gradient(95deg, #fde68a, #fb923c 45%, #ef4444); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .hub-chip { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: #fff7ed; }
.hero .hub-chip .icon { color: var(--hub); filter: brightness(1.35); }

/* cards: square-ish, warm, with an ember underline */
.guide-card, .topic-card, .steps li, .product { border-radius: var(--radius); }
.guide-card .thumb { border-bottom-width: 4px; }
.topic-card { border-top: 0; border-left: 5px solid var(--hub); }
.chip, .hub-chip, .pick-label, .eyebrow { border-radius: 6px; }
.button { border-radius: 8px; }
.button.buy { background: linear-gradient(180deg, #fb923c, #ea580c); color: #fff; box-shadow: 0 6px 16px -8px rgba(234, 88, 12, .9); }
.button.buy:hover { color: #fff; }
.hub-hero { background: linear-gradient(160deg, color-mix(in srgb, var(--hub) 16%, var(--bg)), var(--bg) 85%); }
.bottom-line { background: linear-gradient(135deg, var(--char), #3b1d10); }

/* footer */
.site-footer { background: var(--char); }
.site-footer .brand b { color: #fb923c; }