/*
 * THE SHARED BASE FOR grimtread.com: design tokens, the reset, and the two components that every
 * dark page repeats (.eyebrow and .foot).
 *
 * WHY THIS FILE EXISTS. index.html and roadmap.html each carried their own copy of the palette,
 * the font stacks and these components, kept in step by hand. They had already drifted: the footer
 * padding was 30/46 on one page and 34/48 on the other, which nobody chose and nobody noticed.
 * roadmap.html's own comment said "if a third page lands, extract then", and that trigger had
 * already fired when it was written, because privacy-policy.html existed.
 *
 * 🔴 ADDING A FILE TO docs/ REQUIRES AN ALLOWLIST ENTRY in scripts/check-public-dir.sh, or CI
 * fails. Everything in docs/ is published to grimtread.com, so the guard refuses anything it does
 * not recognise rather than exposing it by accident. This file's own entry was added with it.
 *
 * WHAT IS DELIBERATELY NOT HERE, because the pages genuinely disagree and unifying them would be a
 * redesign rather than a refactor:
 *   --wrap            1120px on index (a showcase), 980px on roadmap (reading matter).
 *   a{text-decoration} index strips underlines globally; roadmap keeps them, because links in prose
 *                     should look like links.
 * Both stay in their page's own <style>, which loads after this file and therefore wins.
 *
 * privacy-policy.html does NOT use this file. It is an older light page with no tokens at all,
 * and restyling it is a visual change to a legal document rather than a deduplication.
 */

:root {
  /* NIGHT register */
  --night: #0b0c11;
  --night-2: #14161f;
  --night-edge: #23222c;
  --bone: #ece6d7;
  --bone-dim: #9d9887;
  --bone-faint: #6f6b5f;

  /* DAY register (parchment, echoes the in-game day stage) */
  --day: #c7bda6;
  --day-2: #d6cdb7;
  --ink: #221f17;
  --ink-dim: #5f594a;

  /* Copper, not pumpkin. The accent's job is "one warm light in a cold world", the same logic as
     the app icon: cool stone lit by a single warm path. A hotter orange competed with the
     indigo/crimson creature art instead of sitting inside it. Shared with the app accent. */
  --ember: #a9532b;
  --ember-lit: #c4693a;

  --serif:
    'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, 'Times New Roman',
    serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* The night ground must live on html/body, not just .page. Without it the browser's own base is
   white, so iOS rubber-band overscroll flashes white strips above and below the page. Reported on
   the live site. color-scheme:dark above also makes the UA paint its own chrome (overscroll,
   scrollbars, form controls) dark rather than light. */
html,
body {
  margin: 0;
  background: var(--night);
}

.page {
  background: var(--night);
  color: var(--bone);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  max-width: 100%;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
}

a {
  color: inherit;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--bone-dim);
}
.eyebrow.warm {
  color: var(--ember-lit);
}
.eyebrow.dark {
  color: var(--ink-dim);
}

/* Footer padding is index.html's 30/46. roadmap.html had 34/48; that difference was drift rather
   than a decision, so the two are now one value. */
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  justify-content: center;
  padding: 30px 24px 46px;
  border-top: 1px solid var(--night-edge);
  color: var(--bone-faint);
  font-size: 13px;
}
.foot .fw {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--bone-dim);
  letter-spacing: 0.02em;
}
.foot a {
  color: var(--bone-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .foot a:hover {
    color: var(--bone-dim);
  }
}