/* ------------------------------------------------------------
   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-light {
  --small-screen-width: 980px;
  
  /* colors */
  --bg: #f3efe6;                 /* warm parchment base */
  --ink: #1a1a1a;                /* near-black text */
  --link-hover-underline: rgba(26, 26, 26, 0.35);
  --muted: rgba(26, 26, 26, 0.68);
  --faint: rgba(26, 26, 26, 0.16);
  --hairline: rgba(26, 26, 26, 0.14);
  --brand-border-color: rgba(26, 26, 26, 0.06);
  --nav-link-color: rgba(26, 26, 26, 0.78);
  --nav-link-highlight-bg: rgba(26, 26, 26, 0.05);

  /* panel surfaces */
  --panel: rgba(255, 255, 255, 0.72);
  --panel-2: rgba(255, 255, 255, 0.52);

  /* 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;
  --rail-width: 320px;
  --gutter: clamp(18px, 3vw, 36px);

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

  /* background image (light counterpart) */
  --bg-image: url("/assets/b81fd9cc-cbea-4285-ad87-af363496c97a-c6c1f9ba.png");
  --bg-gradient-radial-a: rgba(255, 255, 255, 0.00);
  --bg-gradient-radial-b: rgba(243, 239, 230, 0);
  --bg-gradient-linear-a: rgba(255, 255, 255, 0);
  --bg-gradient-linear-b: rgba(243, 239, 230, 0);
  --bg-selection: rgba(26, 26, 26, 0.10);
  --bg-rail-gradient-a: rgba(255, 255, 255, 0.70);
  --bg-rail-gradient-b: rgba(255, 255, 255, 0.46);

  --border-rail: rgba(26, 26, 26, 0.08);
  --rail-opaciy: 0.55;
  --content-border: rgba(26, 26, 26, 0.10);
  --content-bg-gradient-a: rgba(255, 255, 255, 0.78);
  --content-bg-gradient-b: rgba(255, 255, 255, 0.50);
  --story-excerpt-color: rgba(26, 26, 26, 0.86);
  --read-more-border: rgba(26, 26, 26, 0.14);
  --read-more-bg: rgba(255, 255, 255, 0.55);
  --read-more-shadow: rgba(0, 0, 0, 0.10);
  --read-more-hover-bg: rgba(255, 255, 255, 0.75);
  --read-more-hover-border: rgba(26, 26, 26, 0.22);
  --price-tag-border: rgba(26, 26, 26, 0.12);
  --price-tag-bg: rgba(255, 255, 255, 0.55);
  --buy-button-border: rgba(26, 26, 26, 0.16);
  --buy-button-bg: rgba(255, 255, 255, 0.60);
  --buy-button-shadow: rgba(0, 0, 0, 0.10);
  --buy-button-hover-bg: rgba(255, 255, 255, 0.78);
  --buy-button-hover-border: rgba(26, 26, 26, 0.24);
  --prose-color: rgba(26, 26, 26, 0.90);
  --prose-blockquote-border: rgba(26, 26, 26, 0.24);
  --prose-blockquote-bg: rgba(255, 255, 255, 0.55);
  --prose-blockquote-color: rgba(26, 26, 26, 0.80);
  --prose-code-bg: rgba(255, 255, 255, 0.65);
  --prose-code-border: rgba(26, 26, 26, 0.10);
  --footer-link-color: rgba(26, 26, 26, 0.70);
  --footer-link-underline: rgba(26, 26, 26, 0.14);
}

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