/* Tasalaq web — tokens mirrored from docs/design registry (Chalk & Topo).
   Dark-first; light flips via prefers-color-scheme. */
:root {
  --canvas: #1A1712;
  --surface: #221E17;
  --ink: #F2EFE9;
  --ink-muted: #B5AC9D;
  --accent: #EE6E3B;
  --line: #3A342A;
  --error: #D64545;
  --ok: #6FA96F;
}
@media (prefers-color-scheme: light) {
  :root {
    --canvas: #F0E9DB;
    --surface: #FBF6EC;
    --ink: #26211A;
    --ink-muted: #6E6659;
    --accent: #E44F1B;
    --line: #D8CFBE;
  }
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--canvas);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 48px 20px; }
.brand { font-weight: 700; letter-spacing: 0.04em; color: var(--accent); text-decoration: none; }
header { padding: 20px; border-bottom: 1px solid var(--line); }
h1 { font-size: 1.6rem; margin-bottom: 12px; }
h2 { font-size: 1.1rem; margin: 28px 0 8px; }
p, li { color: var(--ink-muted); }
p strong { color: var(--ink); }
a { color: var(--accent); }
ul { padding-inline-start: 20px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  margin-top: 24px;
}
.status-ok { color: var(--ok); font-weight: 600; }
.status-err { color: var(--error); font-weight: 600; }
label { display: block; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ink-muted); margin: 16px 0 6px; }
input {
  width: 100%; padding: 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--canvas); color: var(--ink); font-size: 1rem;
}
input:focus { outline: none; border-color: var(--accent); }
button {
  margin-top: 20px; width: 100%; padding: 13px; border: none; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: default; }
footer { padding: 20px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-muted); text-align: center; }
footer a { color: var(--ink-muted); margin: 0 8px; }
.updated { font-size: 0.85rem; margin-bottom: 24px; }