/*
 * Consolidated from the (previously five-times-duplicated) inline <style> blocks
 * in the old pre-generated Cloudflare Pages site at docs/legal/site/ —
 * {index,privacy/index,support/index,auth/reset/index,auth/confirmed/index}.html.
 * Same visual identity, one copy. Those files were deleted on 2026-08-15 after
 * this host took over harkecho.app; see docs/human-todo.md §P.
 *
 * The privacy/support/auth pages' token set and rules were identical to each
 * other and are the canonical source here; the old generated root stub
 * (docs/legal/site/index.html) used a smaller, older token subset (no
 * --surface/--rule, a narrower --max-width, a different type scale) because it
 * predates the design settling — that page is superseded by Pages/Index.cshtml
 * in this task, so its older scale was not carried forward.
 *
 * Two rules were deliberately changed relative to all four originals, not
 * carried over unchanged, because Pages/Shared/_Layout.cshtml moves <h1> out
 * of <header> (the Layout's <header> now holds only the brand mark — see its
 * own comment for why):
 *   - .brand: margin 0 0 0.5rem -> margin: 0 (it no longer needs bottom space
 *     to separate it from a sibling <h1> inside the same <header>).
 *   - h1: margin: 0 -> margin: 0 0 1rem (it now needs its own bottom space,
 *     since it's no longer the last child of <header> before the border/
 *     padding that used to provide that gap).
 * h3 is new (not present in any of the five originals) — added for the
 * marketing page's "Free" / "Pro" tier sub-headings (Pages/Index.cshtml).
 */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --surface: #f6f6f7;
  --text: #16161a;
  --muted: #5c5c66;
  --rule: #e3e3e8;
  --accent: #b26b2e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131316;
    --surface: #1c1c20;
    --text: #ececf0;
    --muted: #a0a0ab;
    --rule: #2c2c33;
    --accent: #e0a45f;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 2.5rem 1.25rem 4rem;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 44rem;
  margin: 0 auto;
}

header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
}

.brand {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

h1 {
  font-size: 1.875rem;
  line-height: 1.2;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.125rem;
  margin: 2rem 0 0.5rem;
  letter-spacing: -0.005em;
}

section:first-of-type h2 {
  margin-top: 0;
}

h3 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.25rem 0 0.5rem;
}

h3:first-of-type {
  margin-top: 0;
}

p {
  margin: 0 0 0.875rem;
  color: var(--muted);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0.875rem;
}

li {
  margin: 0 0 0.5rem;
}

a {
  color: var(--accent);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.button {
  display: inline-block;
  margin: 0.5rem 0 1.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.625rem;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}

/*
 * Added for the task-62 set-new-password form (Pages/Auth/Reset.cshtml) — the first
 * <form>/<input>/<button> markup in this project. No new framework: plain box-model rules
 * matching the existing token set (--surface/--rule/--accent) and .button styling already
 * established above, applied to a native <button> instead of only <a>.
 */
form {
  margin: 0 0 1.5rem;
}

label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 1rem 0 0.375rem;
}

label:first-of-type {
  margin-top: 0;
}

input[type="password"] {
  display: block;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

input[type="password"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button.button {
  display: block;
  width: 100%;
  border: none;
  font: inherit;
  cursor: pointer;
}

.notice {
  padding: 0.75rem 1rem;
  margin: 0 0 1.25rem;
  border-radius: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--text);
}

footer {
  margin-top: 2.5rem;
  padding: 1rem 1.125rem;
  border-radius: 0.625rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--muted);
}

footer p {
  margin: 0;
  font-size: inherit;
}