/* ------------------------------------------------------------------
     noreset.app — design tokens and shared components.

     This file is the source of truth for the look of every tool on the
     domain. The tools carry their own copy of the token block plus
     whatever components they need; keep the :root sections in sync.
     ------------------------------------------------------------------ */
:root {
  --ground: #15100c;
  --ground-2: #1e1712;
  --ground-3: #27201a;
  --line: #3a2f26;
  --line-strong: #5a4a3b;
  --ink: #ecdfc8;
  --ink-2: #b9a88f;
  --ink-3: #90806c; /* tuned for 4.5:1 on --ground/--ground-2 (WCAG AA) - don't darken back toward #7d6f5e */
  --gold: #d9a441;
  --gold-ink: #15100c;
  --gold-soft: rgba(217, 164, 65, 0.14);

  --q-legendary: #ff8000;
  --q-epic: #b56cff;
  --q-rare: #3b8fe8;
  --q-uncommon: #43d15a;
  --q-common: #cfc6b8;
  --q-poor: #8d8378;

  --ok: #43d15a;
  --warn: #e0b13a;
  --bad: #e2574a;

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Crimson Pro", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --radius: 4px;
  --measure: 66ch;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #f4ecdd;
    --ground-2: #fbf6ea;
    --ground-3: #ece2cf;
    --line: #d8cbb3;
    --line-strong: #b8a689;
    --ink: #2a2118;
    --ink-2: #5e4f3f;
    --ink-3: #706353;
    --gold: #9a6b12;
    --gold-ink: #fbf6ea;
    --gold-soft: rgba(154, 107, 18, 0.12);
    --q-legendary: #d66a00;
    --q-epic: #7e3fd6;
    --q-rare: #1f66c4;
    --q-uncommon: #1f8f37;
    --q-common: #4a4038;
    --q-poor: #8d8378;
    --ok: #1f8f37;
    --warn: #a67c0a;
    --bad: #b8352a;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ground: #f4ecdd; --ground-2: #fbf6ea; --ground-3: #ece2cf;
  --line: #d8cbb3; --line-strong: #b8a689;
  --ink: #2a2118; --ink-2: #5e4f3f; --ink-3: #706353;
  --gold: #9a6b12; --gold-ink: #fbf6ea; --gold-soft: rgba(154, 107, 18, 0.12);
  --q-legendary: #d66a00; --q-epic: #7e3fd6; --q-rare: #1f66c4; --q-uncommon: #1f8f37;
  --q-common: #4a4038; --q-poor: #8d8378;
  --ok: #1f8f37; --warn: #a67c0a; --bad: #b8352a;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.5;
  padding-inline: clamp(16px, 4vw, 48px);
  padding-block: 0 80px;
}
a { color: var(--gold); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: 1000px; margin-inline: auto; }

/* ---------------------------- Masthead ---------------------------- */
.mast {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px;
  padding-block: 28px 20px;
  border-bottom: 1px solid var(--line);
}
.mast h1 { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: 0.06em; }
.mast h1 .tld { color: var(--ink-3); font-weight: 500; }
.mast p { margin: 0; color: var(--ink-2); font-size: 17px; }
.mast .spacer { flex: 1; }
.theme-toggle {
  background: none; border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 4px 12px; font-size: 14px; color: var(--ink-2); cursor: pointer;
}

/* ---------------------------- Connect row -------------------------- */
.connect-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding-block: 18px 20px; font-size: 15px; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.btn {
  background: var(--gold); color: var(--gold-ink); border: 1px solid var(--gold);
  border-radius: var(--radius); padding: 10px 18px; font-family: var(--display);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  white-space: nowrap; text-decoration: none; display: inline-block;
}
.btn.ghost { background: transparent; color: var(--gold); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px;
  border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13px;
  font-family: var(--mono); color: var(--ink-2);
}
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.pill.on { border-color: var(--ok); color: var(--ok); } .pill.on i { background: var(--ok); }
.pill.off { border-color: var(--line-strong); }

/* ---------------------------- Tool index --------------------------- */
.tools {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px;
  padding-block: 28px 8px;
}
.tool {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground-2);
  padding: 20px 22px 16px; display: grid; gap: 8px; align-content: start;
}
.tool h2 { font-family: var(--display); font-size: 18px; letter-spacing: 0.04em; }
.tool h2 a { text-decoration: none; }
.tool h2 a:hover { text-decoration: underline; }
.tool p { margin: 0; color: var(--ink-2); font-size: 16px; }
.tool-host { font-size: 12px; color: var(--ink-3); }
.tool.soon { opacity: 0.6; }
.tool.soon h2 { color: var(--ink-2); }

.foot { padding-block: 32px 0; color: var(--ink-3); font-size: 14px; max-width: var(--measure); border-top: 1px solid var(--line); margin-top: 28px; }
.foot p { margin: 0 0 12px; }
.foot strong { color: var(--ink-2); font-family: var(--display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 6px; }
.foot a { color: var(--ink-2); }

[hidden] { display: none !important; }