/* What every page on challengeme.info shares: the palette, the type, the
   ring, and the few controls. Each page links this and then its own file.

   A file rather than a <style> block so Hosting can send every page a
   Content-Security-Policy that allows no inline code — see the headers in
   firebase.json. */

/* One palette, deliberately: these pages are doorways a stranger sees once,
   and they should look the same in every screenshot and every chat preview
   rather than following whatever their phone happens to be set to. The token
   names carry the whole design, so a dark theme could be added back by
   redefining them and nothing else. */
:root {
  color-scheme: light;
  --bg: #F3F4EF;
  --card: #FFFFFF;
  --ink: #1A2416;
  --muted: #6B7661;
  --faint: #9AA193;
  --line: rgba(26, 36, 22, .08);
  --line-strong: rgba(26, 36, 22, .14);
  --lime-deep: #5C7F18;
  --tick-dim: rgba(26, 36, 22, .12);
  --button-bg: #1A2416;
  --button-ink: #FFFFFF;
  /* The ring's lit ticks, the chip's dot and the copy button's confirmation
     share one accent: the deep green, the one that carries on paper-white. */
  --accent: var(--lime-deep);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* One focus treatment for everything that takes the keyboard, and only for
   the keyboard: a mouse click on a button should not leave a ring. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── The ring ─────────────────────────────────────────────────────────────── */

.ring { display: block; }
.ring__tick { stroke-linecap: round; }
.ring__tick--lit { stroke: var(--accent); }
.ring__tick--dim { stroke: var(--tick-dim); }

/* ── Type ─────────────────────────────────────────────────────────────────── */

.title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.12;
  text-wrap: balance;
  color: var(--ink);
}

.tagline {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

.kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 24px;
  border: 1px solid var(--button-bg);
  border-radius: 18px;
  background: var(--button-bg);
  color: var(--button-ink);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.button:hover { opacity: .9; }

/* The quieter of two choices: the same shape on the card colour, so the pair
   reads as one control with a first and a second answer. */
.button--secondary {
  border-color: var(--line-strong);
  background: var(--card);
  color: var(--ink);
}

.button--secondary:hover {
  opacity: 1;
  border-color: var(--ink);
}