/*
 * The Edify styles: Aery (light and airy), Sepia and Blue Marine.
 * Master copy: edify/theme/edify-theme.css. `node edify/theme/sync.js` copies it into
 * every Edify site (the blogs get it in public/assets/).
 *
 * Each site writes its default on <html data-edify-default="...">. The visitor's choice
 * (the edify_theme cookie, shared by every local site) wins over it. Each theme sets the
 * --e-* tokens, and also the blog's own variables (style.css), so the blog follows too.
 */

html[data-edify-theme="aery"] {
  --e-bg: #f7fafc; --e-surface: #ffffff; --e-surface-2: #eef4f9;
  --e-text: #1e2b37; --e-muted: #5f7184; --e-border: rgba(30, 43, 55, .09);
  --e-accent: #2f7bd1; --e-accent-hover: #1f63b3; --e-accent-soft: #e8f1fb; --e-accent-text: #ffffff;
  --bg-page: var(--e-bg); --bg-card: var(--e-surface); --bg-card-subtle: var(--e-surface-2);
  --text-main: var(--e-text); --text-muted: var(--e-muted); --text-light: var(--e-muted);
  --border-soft: var(--e-border); --border-focus: var(--e-accent);
  --accent: var(--e-accent); --accent-soft: var(--e-accent-soft); --accent-hover: var(--e-accent-hover);
  color-scheme: light;
}

html[data-edify-theme="sepia"] {
  --e-bg: #f4ecdb; --e-surface: #fbf6ea; --e-surface-2: #ece2cc;
  --e-text: #3a2e21; --e-muted: #7a6850; --e-border: rgba(58, 46, 33, .14);
  --e-accent: #8b5a2b; --e-accent-hover: #6f4520; --e-accent-soft: #efe1c4; --e-accent-text: #fbf6ea;
  --bg-page: var(--e-bg); --bg-card: var(--e-surface); --bg-card-subtle: var(--e-surface-2);
  --text-main: var(--e-text); --text-muted: var(--e-muted); --text-light: var(--e-muted);
  --border-soft: var(--e-border); --border-focus: var(--e-accent);
  --accent: var(--e-accent); --accent-soft: var(--e-accent-soft); --accent-hover: var(--e-accent-hover);
  color-scheme: light;
}

html[data-edify-theme="bluemarine"] {
  --e-bg: #071d2b; --e-surface: #0d2a3d; --e-surface-2: #123549;
  --e-text: #e4f1f7; --e-muted: #9dbfd0; --e-border: rgba(157, 191, 208, .18);
  --e-accent: #3cc0d8; --e-accent-hover: #7fdbea; --e-accent-soft: #113a4f; --e-accent-text: #04141f;
  --bg-page: var(--e-bg); --bg-card: var(--e-surface); --bg-card-subtle: var(--e-surface-2);
  --text-main: var(--e-text); --text-muted: var(--e-muted); --text-light: var(--e-muted);
  --border-soft: var(--e-border); --border-focus: var(--e-accent);
  --accent: var(--e-accent); --accent-soft: var(--e-accent-soft); --accent-hover: var(--e-accent-hover);
  color-scheme: dark;
}

/* Pages without their own stylesheet (the static index pages) */
html[data-edify-theme] body {
  background-color: var(--e-bg);
  color: var(--e-text);
}

/* The blog's header and search have their own fixed light colours; follow the theme */
html[data-edify-theme] .site-header { background: color-mix(in srgb, var(--e-surface) 88%, transparent); }
html[data-edify-theme] .site-nav a { color: var(--e-muted); }
html[data-edify-theme] .site-nav a:hover,
html[data-edify-theme] .site-nav a.active { color: var(--e-text); }
html[data-edify-theme] .search-input:focus { background: var(--e-surface); }

/* The switcher strip, added above the page by edify-theme.js */
.edify-strip {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px;
  padding: 6px 14px;
  background: var(--e-surface-2); border-bottom: 1px solid var(--e-border);
  font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--e-muted);
}
.edify-strip-label { margin-right: auto; }
.edify-strip button {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; color: var(--e-text);
  background: var(--e-surface); border: 1px solid var(--e-border); border-radius: 999px;
  padding: 4px 12px; cursor: pointer;
}
.edify-strip button:hover { border-color: var(--e-accent); }
.edify-strip button[aria-pressed="true"] { background: var(--e-accent); color: var(--e-accent-text); border-color: var(--e-accent); }
.edify-swatch { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(128, 128, 128, .35); }
.edify-swatch-aery { background: linear-gradient(135deg, #f7fafc 50%, #2f7bd1 50%); }
.edify-swatch-sepia { background: linear-gradient(135deg, #f4ecdb 50%, #8b5a2b 50%); }
.edify-swatch-bluemarine { background: linear-gradient(135deg, #071d2b 50%, #3cc0d8 50%); }