/* Limestone / walnut design tokens + Utopia fluid scales */

:root {
  /* Type families */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-quote: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Lato", -apple-system, system-ui, sans-serif;
  --font-family: var(--font-ui);
  --font-family-monospace: Consolas, Menlo, Monaco, "Andale Mono WT",
    "Andale Mono", "Lucida Console", "Lucida Sans Typewriter",
    "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono",
    "Nimbus Mono L", "Courier New", Courier, monospace;

  /* Utopia type — min 320 / max 1240, base ~18→21 */
  --step--1: clamp(0.8333rem, 0.7937rem + 0.1984vw, 0.945rem);
  --step-0: clamp(1rem, 0.9348rem + 0.3261vw, 1.1875rem);
  --step-1: clamp(1.2rem, 1.0978rem + 0.5109vw, 1.4844rem);
  --step-2: clamp(1.44rem, 1.285rem + 0.775vw, 1.8555rem);
  --step-3: clamp(1.728rem, 1.4987rem + 1.1467vw, 2.3193rem);
  --step-4: clamp(2.0736rem, 1.7405rem + 1.6655vw, 2.8992rem);
  --step-5: clamp(2.4883rem, 2.0109rem + 2.387vw, 3.6239rem);

  /* Utopia space */
  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6848rem + 0.3261vw, 0.9375rem);
  --space-s: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem);
  --space-l: clamp(2rem, 1.8261rem + 0.8696vw, 2.5rem);
  --space-xl: clamp(3rem, 2.7391rem + 1.3043vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.6522rem + 1.7391vw, 5rem);
  --space-3xl: clamp(6rem, 5.4783rem + 2.6087vw, 7.5rem);

  /* Legacy modular scale aliases → Utopia */
  --s-1: var(--step--1);
  --s0: var(--step-0);
  --s1: var(--step-1);
  --s2: var(--step-2);
  --s3: var(--step-3);
  --s4: var(--step-4);
  --s5: var(--step-5);

  --measure: 65ch;
  --line-height-body: 1.55;
  --line-height-heading: 1.15;

  /* Light: washed limestone (cool, low-chroma) */
  --color-bg: #f5f3f0;
  --color-surface: #eeecea;
  --color-text: #2c2b29;
  --color-muted: #6f6e6a;
  --color-accent: #7a756c;
  --color-border: #d8d6d1;
  --color-on-accent: #f5f3f0;

  --font-weight-display: 300;
  --font-weight-quote: 300;

  --background-color: var(--color-bg);
  --background-ghost: color-mix(in srgb, var(--color-surface) 70%, transparent);
  --background-mask: color-mix(in srgb, var(--color-surface) 88%, transparent);
  --text-color: var(--color-text);
  --text-color-link: var(--color-accent);
  --text-color-link-visited: color-mix(
    in srgb,
    var(--color-accent) 75%,
    var(--color-text)
  );
  --color-gray-20: var(--color-border);
  --color-gray-50: var(--color-muted);
  --color-gray-90: var(--color-text);
  --color-infobox: var(--color-surface);

  --texture-blend: multiply;
  --texture-opacity: 0.035;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1a1918;
    --color-surface: #232220;
    --color-text: #e8e6e3;
    --color-muted: #9a9893;
    --color-accent: #a8a299;
    --color-border: #353330;
    --color-on-accent: #1a1918;

    --background-color: var(--color-bg);
    --background-ghost: color-mix(in srgb, var(--color-surface) 75%, transparent);
    --background-mask: color-mix(in srgb, var(--color-surface) 90%, transparent);
    --text-color: var(--color-text);
    --text-color-link: var(--color-accent);
    --text-color-link-visited: color-mix(
      in srgb,
      var(--color-accent) 80%,
      var(--color-text)
    );
    --color-gray-20: var(--color-border);
    --color-gray-50: var(--color-muted);
    --color-gray-90: var(--color-text);
    --color-infobox: var(--color-surface);

    --texture-blend: soft-light;
    --texture-opacity: 0.045;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: #1a1918;
  --color-surface: #232220;
  --color-text: #e8e6e3;
  --color-muted: #9a9893;
  --color-accent: #a8a299;
  --color-border: #353330;
  --color-on-accent: #1a1918;

  --background-color: var(--color-bg);
  --background-ghost: color-mix(in srgb, var(--color-surface) 75%, transparent);
  --background-mask: color-mix(in srgb, var(--color-surface) 90%, transparent);
  --text-color: var(--color-text);
  --text-color-link: var(--color-accent);
  --text-color-link-visited: color-mix(
    in srgb,
    var(--color-accent) 80%,
    var(--color-text)
  );
  --color-gray-20: var(--color-border);
  --color-gray-50: var(--color-muted);
  --color-gray-90: var(--color-text);
  --color-infobox: var(--color-surface);

  --texture-blend: soft-light;
  --texture-opacity: 0.045;

  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* Subtle plaster / limestone grain — hero, footer, quotes only */
.textured-surface,
.textured-wood {
  position: relative;
  isolation: isolate;
}

.textured-surface::before,
.textured-wood::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--texture-opacity);
  mix-blend-mode: var(--texture-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.textured-wood::before {
  opacity: calc(var(--texture-opacity) * 1.35);
  background-size: 240px 120px;
  filter: contrast(1.15) saturate(0.6);
}

.textured-surface > *,
.textured-wood > * {
  position: relative;
  z-index: 2;
}

/* Editorial quote */
.quote,
.tmpl-post blockquote {
  margin: var(--space-l) 0;
  padding: var(--space-m) var(--space-m) var(--space-m) var(--space-l);
  border-left: 2px solid var(--color-accent);
  background-color: var(--color-surface);
  max-width: var(--measure);
}

.quote blockquote,
.tmpl-post blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: var(--font-weight-quote);
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--color-text);
}

.quote figcaption,
.tmpl-post blockquote + p cite {
  display: block;
  margin-top: var(--space-s);
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.quote figcaption::before {
  content: "— ";
}