/* Heartwood (Twigly Labs) — twiglylabs.com stylesheet. Plain CSS, no
   preprocessor, no framework (wp-14a-website.md D1). Built entirely on
   the design tokens in tokens.css (the token spec's first shipped
   consumer — plans/horizon/design/design-tokens.md); rules use only
   semantic `--hw-*` tokens, never raw hex. Light + dark themes come from
   the token layer. Also serves the generated docs pages (website/docs/),
   whose class contract is preserved in the docs section below. */

@import url("tokens.css");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--hw-font-ui);
  color: var(--hw-text-primary);
  background: var(--hw-bg-app);
  line-height: var(--hw-leading-base);
  font-size: var(--hw-text-lg);
}

h1,
h2,
h3 {
  color: var(--hw-text-primary);
  line-height: var(--hw-leading-tight);
}

a {
  color: var(--hw-text-link);
}

/* ---- Header / navigation ---- */

header.site-header {
  border-bottom: 1px solid var(--hw-border-default);
  padding: var(--hw-space-5) var(--hw-space-7);
  background: var(--hw-surface);
}

header.site-header nav {
  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--hw-space-5) var(--hw-space-7);
}

header.site-header nav a {
  color: var(--hw-accent);
  font-weight: var(--hw-weight-semibold);
  text-decoration: none;
}

header.site-header nav a:hover,
header.site-header nav a:focus {
  color: var(--hw-accent-hover);
  text-decoration: underline;
}

header.site-header nav a.brand {
  color: var(--hw-text-primary);
  font-weight: var(--hw-weight-bold);
}

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--hw-space-8) var(--hw-space-7) var(--hw-space-11);
}

/* ---- Landing page ---- */

.hero {
  padding: var(--hw-space-9) 0 var(--hw-space-6);
  max-width: 46rem;
}

.hero h1 {
  font-size: var(--hw-text-4xl);
  margin: 0 0 var(--hw-space-4);
}

.tagline {
  font-family: var(--hw-font-content);
  font-size: var(--hw-text-xl);
  color: var(--hw-text-secondary);
  margin: 0 0 var(--hw-space-6);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hw-space-4);
  align-items: center;
}

a.button {
  display: inline-block;
  background: var(--hw-accent);
  color: var(--hw-on-accent);
  padding: var(--hw-space-3) var(--hw-space-6);
  border-radius: var(--hw-radius-md);
  text-decoration: none;
  font-weight: var(--hw-weight-semibold);
  transition: background var(--hw-duration-fast) var(--hw-ease-standard);
}

a.button:hover,
a.button:focus {
  background: var(--hw-accent-hover);
}

a.button.secondary {
  background: var(--hw-accent-subtle);
  color: var(--hw-accent);
}

a.button.secondary:hover,
a.button.secondary:focus {
  background: var(--hw-border-default);
}

.trust-callout {
  background: var(--hw-surface);
  border: 1px solid var(--hw-border-default);
  border-left: 4px solid var(--hw-accent);
  border-radius: var(--hw-radius-md);
  padding: var(--hw-space-6) var(--hw-space-7);
  margin: var(--hw-space-8) 0;
  box-shadow: var(--hw-shadow-low);
}

.trust-callout h2 {
  margin-top: 0;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--hw-space-6);
  padding: 0;
  list-style: none;
  margin: var(--hw-space-6) 0;
}

.pillar-grid li {
  background: var(--hw-surface);
  border: 1px solid var(--hw-border-default);
  border-radius: var(--hw-radius-md);
  padding: var(--hw-space-6);
}

.pillar-grid h3 {
  margin-top: 0;
  font-size: var(--hw-text-lg);
}

.pillar-grid p {
  margin-bottom: 0;
  font-size: var(--hw-text-md);
  color: var(--hw-text-secondary);
}

/* ---- Status badges (features / roadmap) ---- */

.badge {
  display: inline-block;
  font-size: var(--hw-text-sm);
  font-weight: var(--hw-weight-semibold);
  border-radius: var(--hw-radius-full);
  padding: 0 var(--hw-space-4);
  vertical-align: middle;
}

.badge.now {
  background: var(--hw-success-bg);
  color: var(--hw-success-fg);
  border: 1px solid var(--hw-success-border);
}

.badge.roadmap {
  background: var(--hw-info-bg);
  color: var(--hw-info-fg);
  border: 1px solid var(--hw-info-border);
}

.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  background: var(--hw-surface);
  border: 1px solid var(--hw-border-default);
  border-radius: var(--hw-radius-md);
  padding: var(--hw-space-5) var(--hw-space-6);
  margin-bottom: var(--hw-space-4);
}

.feature-list h3 {
  margin: 0 0 var(--hw-space-2);
  font-size: var(--hw-text-lg);
}

.feature-list p {
  margin: 0;
  font-size: var(--hw-text-md);
  color: var(--hw-text-secondary);
}

/* ---- Banners ---- */

.draft-banner,
.alpha-banner {
  border-radius: var(--hw-radius-sm);
  padding: var(--hw-space-4) var(--hw-space-5);
  font-weight: var(--hw-weight-bold);
  margin-bottom: var(--hw-space-8);
}

.draft-banner {
  background: var(--hw-warning-bg);
  color: var(--hw-warning-fg);
  border: 1px solid var(--hw-warning-border);
}

.alpha-banner {
  background: var(--hw-warning-bg);
  color: var(--hw-warning-fg);
  border: 1px solid var(--hw-warning-border);
  font-weight: var(--hw-weight-regular);
}

.alpha-banner strong {
  font-weight: var(--hw-weight-bold);
}

/* ---- Download page ---- */

.download-list {
  list-style: none;
  padding: 0;
}

.download-list li {
  background: var(--hw-surface);
  border: 1px solid var(--hw-border-default);
  border-radius: var(--hw-radius-md);
  padding: var(--hw-space-6);
  margin-bottom: var(--hw-space-5);
}

.download-list h2 {
  margin-top: 0;
}

.download-slot {
  display: inline-block;
  background: var(--hw-surface-sunken);
  color: var(--hw-text-muted);
  padding: var(--hw-space-3) var(--hw-space-6);
  border-radius: var(--hw-radius-md);
  border: 1px dashed var(--hw-border-strong);
  font-weight: var(--hw-weight-semibold);
}

.download-list a.button {
  display: inline-block;
}

/* ---- Footer ---- */

footer.site-footer {
  border-top: 1px solid var(--hw-border-default);
  padding: var(--hw-space-7);
  color: var(--hw-text-muted);
  font-size: var(--hw-text-sm);
  text-align: center;
  background: var(--hw-surface);
}

footer.site-footer a {
  color: var(--hw-text-secondary);
}

/* ---- Docs pages (website/docs/, WP-14b) ----
   Generated reference + hand-written guides share this stylesheet;
   the class names below are their rendering contract — keep them. */

.docs-footer code {
  word-break: break-all;
}

code {
  background: var(--hw-surface-sunken);
  border-radius: var(--hw-radius-sm);
  padding: 0.05rem 0.3rem;
  font-size: 0.9em;
  font-family: var(--hw-font-mono);
}

.schema-table {
  border-collapse: collapse;
  margin: var(--hw-space-3) 0 var(--hw-space-5);
  width: 100%;
}

.schema-table th,
.schema-table td {
  border: 1px solid var(--hw-border-default);
  padding: var(--hw-space-2) var(--hw-space-4);
  text-align: left;
  vertical-align: top;
}

.schema-table th {
  background: var(--hw-surface-sunken);
}

.schema-heading {
  font-weight: var(--hw-weight-semibold);
  margin-bottom: var(--hw-space-2);
}

.tagged-union {
  border-left: 3px solid var(--hw-accent);
  padding-left: var(--hw-space-5);
  margin: var(--hw-space-3) 0 var(--hw-space-5);
}

.union-variant {
  margin-bottom: var(--hw-space-5);
}

.variant-label {
  font-weight: var(--hw-weight-semibold);
  margin-bottom: var(--hw-space-2);
}

.optional-marker {
  display: inline-block;
  background: var(--hw-warning-bg);
  color: var(--hw-warning-fg);
  border-radius: var(--hw-radius-sm);
  padding: 0 0.35rem;
  font-size: 0.85em;
  font-weight: var(--hw-weight-semibold);
  margin-right: 0.35rem;
}

.array-marker {
  font-style: italic;
  color: var(--hw-text-muted);
  margin-right: 0.35rem;
}

section.route,
section.tool {
  border-bottom: 1px solid var(--hw-border-default);
  padding-bottom: var(--hw-space-5);
  margin-bottom: var(--hw-space-7);
}

.method {
  background: var(--hw-accent);
  color: var(--hw-on-accent);
}

.subheading {
  font-weight: var(--hw-weight-semibold);
  color: var(--hw-text-muted);
  margin: var(--hw-space-5) 0 var(--hw-space-2);
  text-transform: uppercase;
  font-size: var(--hw-text-sm);
  letter-spacing: 0.05em;
}

.coverage-note {
  color: var(--hw-text-muted);
}

.docs-index-list {
  list-style: none;
  padding: 0;
}

.docs-index-list li {
  background: var(--hw-surface);
  border: 1px solid var(--hw-border-default);
  border-radius: var(--hw-radius-md);
  padding: var(--hw-space-5);
  margin-bottom: var(--hw-space-5);
}