/* ============================================================
   Design tokens — the brand system. Mirror site.config.js `brand`.
   Castles to Visit: "dusk at the keep" — warm stone near-black,
   parchment ink, heraldic old-gold accent, Roman-carved display face.
   ============================================================ */
:root {
  /* surfaces (dark stone editorial) */
  --bg: #0f0d0a;
  --bg-2: #151109;
  --panel: #171310;
  --panel-2: #1c1712;

  /* ink (parchment on stone) */
  --ink: #f2ede2;
  --dim: rgba(242, 237, 226, .62);
  --faint: rgba(242, 237, 226, .38);
  --line: rgba(242, 237, 226, .14);
  --chalk: #efe8d8;

  /* accent — heraldic old gold. The one color people remember. */
  --accent: #d9a441;
  --accent-soft: rgba(217, 164, 65, .14);
  --accent-ink: #1a1204;
  /* text-safe accent — links/kickers/counts rendered AS TEXT (lighter tint
     of the gold so it passes contrast on the dark stone). */
  --accent-deep: #e6bc63;
  /* hover-hot accent — primary-button hover fill + card sweep gradient end.
     Name is engine contract (it came from an amber theme); value is themed. */
  --amber-hot: #f0c964;

  /* semantic status — "good" (open/positive) + "warn" (closed/negative).
     Names are engine contract (moss/rust); values themed. */
  --moss: #9ed48f;
  --moss-soft: rgba(158, 212, 143, .12);
  --rust: #e0876a;
  --rust-soft: rgba(224, 135, 106, .10);

  /* type — mirror config.brand */
  --f-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --f-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* geometry — radii, page gutter, content width */
  --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-pill: 999px;
  --pad: clamp(20px, 4.5vw, 56px);
  --maxw: 1200px;

  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .4, 1);

  /* elevation — minimal-shadow diet: real black + a gold glow ring.
     --glow-amber name is engine contract; follows --accent via color-mix. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
  --glow-amber: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
                0 4px 18px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* minimal reset (the rest of the app CSS lives in style.css) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body {
  background: var(--bg); color: var(--ink); font-family: var(--f-body);
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }