/* =========================================================
   SOLÉVERE — Brand tokens
   Override these in /public/styles/blogs/<blog-id>.css to
   add a new blog without touching shared component CSS.
   ========================================================= */

:root {
  /* Palette — Maison warm-cream */
  --bg:          #f5f0e8;
  --surface:     #ffffff;
  --ink:         #1a1715;
  --muted:       #6b5e54;
  --line:        #e0d6c7;
  --accent:      #b85a3a;
  --accent-ink:  #fff8f1;

  /* Typography */
  --font-display:      "DM Serif Display", Georgia, serif;
  --font-body:         "Outfit", system-ui, sans-serif;
  --display-weight:    400;
  --display-tracking:  -0.025em;

  /* Layout */
  --max:    1400px;
  --gutter: clamp(20px, 4vw, 56px);

  /* WS-M2: canonical page columns. Use these tokens via .page / .column
     utility classes in shared.css so every page shares the same rhythm. */
  --col-body:  720px;   /* article body / single-column text */
  --col-wide: 1100px;   /* page chrome: masthead, hero, archive grid */
  --col-max:  1240px;   /* outer max when the article shows the sidebar TOC at ≥1100px */

  /* Canonical breakpoints */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  960px;
  --bp-xl:  1280px;

  /* WS-R: footer tokens. The footer's bg is var(--ink) and main text is
     var(--bg), both of which flip in dark mode. These tokens cover the
     dimmed text / border / logo filter that were previously hardcoded
     to white and went invisible against the flipped-light dark-mode bg. */
  --footer-fg:          rgba(255,255,255,0.90);  /* link text */
  --footer-fg-muted:    rgba(255,255,255,0.55);  /* h5 labels, bottom row */
  --footer-fg-body:     rgba(255,255,255,0.65);  /* brand blurb */
  --footer-border:      rgba(255,255,255,0.15);
  --footer-logo-filter: invert(1) brightness(1.05);
}

/* ── Dark mode — palette overrides only ─────────────────── */
[data-theme="dark"] {
  --bg:          #15110e;
  --surface:     #1c1815;
  --ink:         #f5efe6;
  --muted:       #b8a99a;
  --line:        #2d2620;
  --accent:      #d97b56;   /* warmer for cream-on-dark contrast */
  --accent-ink:  #2a1208;

  /* Footer flips: bg becomes light, so dimmed text needs to be dark */
  --footer-fg:          rgba(0,0,0,0.85);
  --footer-fg-muted:    rgba(0,0,0,0.55);
  --footer-fg-body:     rgba(0,0,0,0.65);
  --footer-border:      rgba(0,0,0,0.15);
  --footer-logo-filter: none;
}
[data-theme="dark"] body {
  background: var(--bg);
  color:      var(--ink);
}

/* Smooth palette transition — respect reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  html { transition: background-color 0.25s ease, color 0.25s ease; }
  body { transition: background-color 0.25s ease; }
}