/* taskbender.app: renkler docs/design/tokens.json ile aynı. */
:root {
  --cloud: #F7F6FD;
  --surface: #FFFFFF;
  --ink: #2A2350;
  --ink-muted: #6B6585;
  --line: #E7E4F3;
  --violet: #6246D6;
  --lilac: #ECE6FC;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cloud);
  color: var(--ink);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
header img { width: 48px; height: 48px; border-radius: 12px; }
header .name { font-weight: 900; font-size: 22px; }

h1 { font-weight: 900; font-size: 32px; line-height: 1.2; margin: 0 0 8px; }
h2 { font-weight: 800; font-size: 22px; margin: 32px 0 8px; }
h3 { font-weight: 800; font-size: 18px; margin: 24px 0 4px; }
p, li { color: var(--ink); }
.muted { color: var(--ink-muted); }

a { color: var(--violet); font-weight: 700; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
}

.lang {
  display: inline-flex;
  gap: 4px;
  background: var(--lilac);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 24px;
}
.lang a {
  text-decoration: none;
  color: var(--ink);
  padding: 6px 16px;
  border-radius: 999px;
}
.lang a:hover { background: var(--surface); }

section + section { margin-top: 48px; }

footer { margin-top: 48px; font-size: 14px; color: var(--ink-muted); }