/* Hoof legal site — tokens from hoof-mobile/docs/designs/hoof/README.md (hoof-core.js). */
:root {
  color-scheme: light dark;
  --bg: #F3EEE4;
  --surf: #FFFDF8;
  --surf2: #EAE3D5;
  --line: #E2D9C8;
  --line2: #CBBFA9;
  --ink: #1A1712;
  --ink2: #3A342A;
  --ink3: #625947;
  --ink4: #756B58;
  --pri: #1F4D3A;
  --onPri: #FFFFFF;
  --priSoft: #DDE9E1;
  --acc: #C2622D;
  --accT: #9A4718;
  --warn: #7E5300;
  --warnSoft: #F8EBCB;
  --bad: #B0281F;
  --badSoft: #F8E1DD;
  --info: #245C8F;
  --infoSoft: #E0EAF4;
  --font: "Readex Pro", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12110E;
    --surf: #1C1A16;
    --surf2: #28251F;
    --line: #2E2A23;
    --line2: #4A4338;
    --ink: #F4EFE6;
    --ink2: #E2DBCD;
    --ink3: #B0A795;
    --ink4: #9A9180;
    --pri: #9BD3B5;
    --onPri: #0D1F16;
    --priSoft: rgba(155, 211, 181, .14);
    --acc: #E98A51;
    --accT: #F0A273;
    --warn: #F2C46B;
    --warnSoft: rgba(242, 196, 107, .12);
    --bad: #FF8A7E;
    --badSoft: rgba(255, 138, 126, .13);
    --info: #8DB8E8;
    --infoSoft: rgba(141, 184, 232, .13);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink2);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
:lang(en) body, body:lang(en) { line-height: 1.65; }

a { color: var(--pri); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--pri); outline-offset: 3px; border-radius: 6px; }

.wrap { max-inline-size: 760px; margin-inline: auto; padding-inline: 20px; }

/* Draft banner */
.draft {
  background: var(--warnSoft);
  color: var(--warn);
  border-block-end: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.5;
}
.draft .wrap { display: flex; gap: 10px; align-items: flex-start; padding-block: 12px; }
.draft strong { font-weight: 600; }
.draft .tag {
  flex: none;
  border: 1px solid currentColor;
  border-radius: 99px;
  padding: 1px 10px;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .02em;
}

/* Header */
.top { border-block-end: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 64px; flex-wrap: wrap; padding-block: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 19px; }
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: 6px; flex-wrap: wrap; }
.nav a {
  display: inline-flex; align-items: center; min-block-size: 44px;
  padding-inline: 12px; border-radius: 99px; color: var(--ink2); text-decoration: none; font-size: 14px;
}
.nav a:hover { background: var(--surf2); }
.nav a[aria-current="page"] { background: var(--surf2); color: var(--ink); font-weight: 500; }
.nav a.lang { border: 1px solid var(--line2); }

/* Horseshoe mark */
.mark { display: block; inline-size: 28px; block-size: 28px; flex: none; }
.mark path { stroke: var(--pri); }
.mark circle { fill: var(--bg); }
.mark.big { inline-size: 120px; block-size: 120px; }

/* Content */
main { padding-block: 32px 48px; }
h1 { color: var(--ink); font-size: 26px; font-weight: 600; line-height: 1.35; margin: 0 0 6px; }
h2 { color: var(--ink); font-size: 19px; font-weight: 600; line-height: 1.35; margin: 36px 0 8px; }
h3 { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.35; margin: 22px 0 6px; }
p, ul, ol { margin: 0 0 12px; }
ul, ol { padding-inline-start: 22px; }
li { margin-block-end: 6px; }
li::marker { color: var(--ink4); }
strong { color: var(--ink); font-weight: 600; }
.meta { color: var(--ink3); font-size: 13.5px; margin-block-end: 20px; }
.ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.links .ltr { white-space: normal; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--surf2); border-radius: 6px; padding: 1px 6px; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

.card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px 20px;
  margin-block: 16px;
}
.card > :last-child { margin-block-end: 0; }
.todo {
  background: var(--infoSoft);
  color: var(--info);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  margin-block: 10px 14px;
}
.todo strong { color: inherit; }
.toc { columns: 2 220px; column-gap: 24px; padding-inline-start: 22px; margin: 0; }
.toc li { break-inside: avoid; }

/* Landing */
.hero { text-align: center; padding-block: 40px 8px; }
.hero .mark { margin-inline: auto; }
.hero h1 { font-size: 46px; margin-block: 18px 6px; }
.hero p.lead { font-size: 17px; color: var(--ink2); max-inline-size: 30em; margin-inline: auto; }
.links { display: grid; gap: 10px; margin-block-start: 28px; }
.links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-block-size: 56px; padding-inline: 18px;
  background: var(--surf); border: 1px solid var(--line); border-radius: 16px;
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.links a:hover { border-color: var(--line2); }
.links a span.sub { color: var(--ink3); font-weight: 400; font-size: 13.5px; }
.chev { color: var(--ink4); flex: none; }
[dir="rtl"] .chev { transform: scaleX(-1); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 54px; padding-inline: 24px; border-radius: 16px;
  font: inherit; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
}
.btn:hover { text-decoration: none; }
.btn.p { background: var(--pri); color: var(--onPri); }
.btn.s { background: transparent; color: var(--ink); border-color: var(--line2); }
.btns { display: grid; gap: 10px; margin-block: 18px 6px; }

.lang-block + .lang-block { border-block-start: 1px solid var(--line); margin-block-start: 28px; padding-block-start: 24px; }
.muted { color: var(--ink3); }
.err { color: var(--bad); }
[hidden] { display: none !important; }

footer { border-block-start: 1px solid var(--line); color: var(--ink3); font-size: 13.5px; }
footer .wrap { padding-block: 20px 32px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
footer a { color: var(--ink2); }

@media (max-width: 480px) {
  h1 { font-size: 24px; }
  .hero h1 { font-size: 40px; }
  .mark.big { inline-size: 96px; block-size: 96px; }
  main { padding-block: 24px 40px; }
}
@media print {
  .nav, footer { display: none; }
  body { background: #fff; color: #000; }
}