/* ------------------------------------------------------------
   Embers in the Dust — minimal, noir / ash blog theme
   - single-page, long-form friendly
   - future-proofed for a right rail (cart / shop) without reflow
   ------------------------------------------------------------ */

/* ====== Theme tokens ====== */
:root.theme-dark {
  --small-screen-width: 980px;

  /* colors */
  --bg: #0f1114;
  --ink: #e7e2d9;
  --link-hover-underline: rgba(231, 226, 217, 0.5);
  --muted: rgba(231, 226, 217, 0.72);
  --faint: rgba(231, 226, 217, 0.18);
  --hairline: rgba(231, 226, 217, 0.12);
  --panel: rgba(10, 12, 15, 0.38);
  --panel-2: rgba(10, 12, 15, 0.22);
  --brand-border-color: rgba(0, 0, 0, 0.00);
  --nav-link-color: rgba(231, 226, 217, 0.86);
  --nav-link-highlight-bg: rgba(231, 226, 217, 0.06);

  /* typography */
  --font-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Garamond, Georgia, serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  --fs-0: 0.9375rem; /* 15px */
  --fs-1: 1.0625rem; /* 17px */
  --fs-2: 1.25rem;   /* 20px */
  --fs-3: 1.75rem;   /* 28px */
  --fs-4: 2.5rem;    /* 40px */

  --lh-body: 1.75;
  --lh-tight: 1.2;

  /* layout */
  --page-pad: clamp(18px, 3vw, 32px);
  --content-max: 760px;   /* narrow, book-like */
  --rail-width: 320px;    /* reserved for future cart / shop */
  --gutter: clamp(18px, 3vw, 36px);

  /* effects */
  --radius: 14px;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.25);

  /* background image (set to your generated file) */
  --bg-image: url("/assets/3286a936-0251-432d-bd01-0664af4217d1-a1fb87cb.png");
  --bg-gradient-radial-a: rgba(0, 0, 0, 0.00);
  --bg-gradient-radial-b: rgba(0, 0, 0, 0.88);
  --bg-gradient-linear-a: rgba(0, 0, 0, 0);
  --bg-gradient-linear-b: rgba(0, 0, 0, 0.5);
  --bg-selection: rgba(231, 226, 217, 0.18);
  --bg-rail-gradient-a: rgba(10, 12, 15, 0.28);
  --bg-rail-gradient-b: rgba(10, 12, 15, 0.12);
  --border-rail: rgba(231, 226, 217, 0.06);
  --rail-opacity: 0.95;
  --content-border: rgba(231, 226, 217, 0.08);
  --content-bg-gradient-a: rgba(10, 12, 15, 0.45);
  --content-bg-gradient-b: rgba(10, 12, 15, 0.18);
  --story-excerpt-color: rgba(231, 226, 217, 0.88);
  --read-more-border: rgba(231, 226, 217, 0.12);
  --read-more-bg: rgba(231, 226, 217, 0.04);
  --read-more-shadow: rgba(0, 0, 0, 0.24);
  --read-more-hover-bg: rgba(231, 226, 217, 0.07);
  --read-more-hover-border: rgba(231, 226, 217, 0.22);
  --price-tag-border: rgba(231, 226, 217, 0.10);
  --price-tag-bg: rgba(10, 12, 15, 0.25);
  --buy-button-border: rgba(231, 226, 217, 0.18);
  --buy-button-bg: rgba(231, 226, 217, 0.09);
  --buy-button-shadow: rgba(231, 226, 217, 0.28);
  --prose-color: rgba(231, 226, 217, 0.92);
  --prose-blockquote-border: rgba(231, 226, 217, 0.22);
  --prose-blockquote-bg: rgba(10, 12, 15, 0.20);
  --prose-blockquote-color: rgba(231, 226, 217, 0.84);
  --prose-code-bg: rgba(0, 0, 0, 0.35);
  --prose-code-border: rgba(231, 226, 217, 0.08);
  --footer-link-color: rgba(231, 226, 217, 0.76);
  --footer-link-underline: rgba(231, 226, 217, 0.12);

  --btn-primary-bg: #336;
  --btn-primary-border: #66a;
  --btn-primary-text: #fff;
  --btn-primary-opacity: 0.9;
  --btn-primary-bg-active: #336;
  --btn-primary-border-active: #66a;
  --btn-primary-text-active: #fff;
  --btn-primary-opacity-active: 0.9;
  --btn-primary-bg-hover: #447;
  --btn-primary-border-hover: #66a;
  --btn-primary-text-hover: #fff;
  --btn-primary-opacity-hover: 0.9;
  --btn-secondary-bg: #222;
  --btn-secondary-border: #66a;
  --btn-secondary-text: #fff;
  --btn-secondary-opacity: 0.9;
  --btn-secondary-bg-active: #336;
  --btn-secondary-border-active: #66a;
  --btn-secondary-text-active: #fff;
  --btn-secondary-opacity-active: 0.9;
  --btn-secondary-bg-hover: #444;
  --btn-secondary-border-hover: #66a;
  --btn-secondary-text-hover: #fff;
  --btn-secondary-opacity-hover: 0.9;
}

/* Optional: slightly brighter in dark mode contexts */
@media (prefers-color-scheme: dark) {
  :root.theme-dark {
    --panel: rgba(10, 12, 15, 0.42);
    --panel-2: rgba(10, 12, 15, 0.26);
  }
}

html.theme-dark {
  color-scheme: dark;
}

html.theme-dark .trix-button {
  background-color: #fff;
}

html.theme-dark form .actions > input[type=submit] {
  background-color: #336;
  border-color: #66a;
  color: #fff;
  opacity: 0.9;
}

html.theme-dark form .actions > input[type=submit]:active {
  background-color: #336;
  border-color: #66a;
}

html.theme-dark form .actions > input[type=submit]:hover {
  background-color: #447;
}