/* Tiny Threads — public site.
   Tokens match the app so the site and the product feel like one thing. */

:root {
  --ground: #F8F7F4;
  --surface: #FFFFFF;
  --ink: #20242C;
  --ink-2: #4A4F5A;
  --muted: #69707D;
  --faint: #9A9FA9;
  --line: #ECEAE4;
  --line-soft: #F2F0EA;
  --primary: #655BD8;
  --primary-wash: #F3F1FC;
  --pink: #F06486;
  --amber-wash: #FBF4E7;
  --amber-line: #EFE1C4;
  --amber-ink: #6E4E17;

  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #15161B;
    --surface: #1D1F26;
    --ink: #ECEDF1;
    --ink-2: #C2C6CF;
    --muted: #949AA6;
    --faint: #7A808C;
    --line: #2F323B;
    --line-soft: #26282F;
    --primary: #A79DF5;
    --primary-wash: #292646;
    --pink: #F58AA6;
    --amber-wash: #33291A;
    --amber-line: #4B3C22;
    --amber-ink: #E4C68A;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 22px; }

/* ---- header ---- */
header.site {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
header.site .wrap {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px; padding-bottom: 16px;
  flex-wrap: wrap;
}
header.site img { width: 38px; height: auto; }
header.site .name {
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
}
header.site nav { margin-left: auto; display: flex; gap: 18px; }
header.site nav a {
  color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 600;
}
header.site nav a:hover, header.site nav a:focus-visible { color: var(--primary); }

/* ---- hero ---- */
.hero { text-align: center; padding: 64px 0 8px; }
.hero img { width: 128px; height: auto; }
.hero h1 {
  font-size: clamp(30px, 6vw, 42px); letter-spacing: -0.03em;
  margin: 14px 0 8px; text-wrap: balance;
}
.hero p { color: var(--muted); font-size: 18px; margin: 0 auto; max-width: 30rem; }

/* ---- content ---- */
main { padding: 40px 0 88px; }
h1.page { font-size: clamp(28px, 5vw, 36px); letter-spacing: -0.03em; margin: 0 0 6px; }
h2 {
  font-size: 21px; letter-spacing: -0.02em; margin: 40px 0 10px;
  padding-top: 22px; border-top: 1px solid var(--line-soft);
}
h2:first-of-type { border-top: 0; padding-top: 0; }
h3 { font-size: 17px; margin: 24px 0 6px; }
p { color: var(--ink-2); margin: 0 0 14px; }
strong { color: var(--ink); font-weight: 640; }
a { color: var(--primary); }
ul { color: var(--ink-2); padding-left: 22px; }
li { margin-bottom: 8px; }
li::marker { color: var(--faint); }

.updated { color: var(--faint); font-size: 14.5px; margin: 0 0 28px; }

.lead {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px 22px; margin: 0 0 28px;
}
.lead ul { margin: 0; }
.lead li:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 8px 0 20px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
th { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.table-scroll { overflow-x: auto; }

/* Unfilled placeholders are loud on purpose — they must not ship. */
.todo {
  background: var(--amber-wash); border: 1px solid var(--amber-line);
  color: var(--amber-ink); border-radius: 6px; padding: 1px 7px;
  font-family: var(--mono); font-size: 0.86em; font-weight: 600;
}

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px 22px; margin: 0 0 14px;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.cta {
  display: inline-block; background: var(--primary); color: #fff;
  text-decoration: none; font-weight: 600; font-size: 16px;
  padding: 13px 24px; border-radius: 14px; margin-top: 8px;
}

footer.site {
  border-top: 1px solid var(--line); padding: 26px 0 40px;
  color: var(--faint); font-size: 14.5px;
}
footer.site .wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
footer.site a { color: var(--muted); text-decoration: none; font-weight: 600; }
footer.site a:hover { color: var(--primary); }
footer.site .spacer { margin-left: auto; }

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

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}