/* Shared styling for the Kredits legal pages. Uses the app's design tokens. */
@import url('/shared/kredits-tokens.css');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--space-6); }

/* ── Draft banner ───────────────────────────────────────────────
   Delete the <div class="draft"> from each page before publishing. */
.draft {
  background: #FEF3C7; border-bottom: 2px solid var(--amber-600);
  color: #78350F; padding: var(--space-4) 0; font-size: var(--text-sm);
}
.draft strong { font-family: var(--font-heading); }

/* Anything still needing a real value. Search for "todo" before publishing. */
.todo {
  background: #FEF08A; color: #713F12; padding: 1px 6px;
  border-radius: var(--radius-sm); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--amber-600);
}

header.site {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: var(--space-4) 0;
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.logo {
  font-family: var(--font-heading); font-weight: 800; font-size: var(--text-lg);
  color: var(--color-text-primary); text-decoration: none; letter-spacing: -.02em;
}
header.site nav { display: flex; gap: var(--space-4); flex-wrap: wrap; }
header.site nav a { color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-sm); }
header.site nav a:hover, header.site nav a[aria-current] { color: var(--color-accent); }

main { padding: var(--space-12) 0 var(--space-16); }

h1 {
  font-family: var(--font-heading); font-size: var(--text-3xl); line-height: var(--leading-3xl);
  letter-spacing: -.02em; margin-bottom: var(--space-3);
}
.lede { color: var(--color-text-secondary); font-size: var(--text-lg); line-height: var(--leading-lg); }
.updated {
  color: var(--color-text-muted); font-size: var(--text-sm);
  margin-top: var(--space-4); padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

h2 {
  font-family: var(--font-heading); font-size: var(--text-xl); line-height: var(--leading-xl);
  margin: var(--space-12) 0 var(--space-4); letter-spacing: -.01em;
}
h3 {
  font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600;
  margin: var(--space-8) 0 var(--space-2);
}
p, ul, ol, table { margin-bottom: var(--space-4); }
ul, ol { padding-left: var(--space-6); }
li { margin-bottom: var(--space-2); }
a { color: var(--color-accent); }

table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top; }
th { font-family: var(--font-heading); font-weight: 600; background: var(--color-surface-subtle); }
.table-scroll { overflow-x: auto; margin-bottom: var(--space-4); }

.note {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4);
}
code { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--color-surface-subtle); padding: 1px 5px; border-radius: var(--radius-sm); }

footer.site {
  border-top: 1px solid var(--color-border); background: var(--color-surface);
  padding: var(--space-8) 0; color: var(--color-text-muted); font-size: var(--text-sm);
}
footer.site nav { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }