/* Vokabaum — Design-System „Waldlicht" Tokens + Components.
   Source of Truth: DESIGN.md im Repo-Root.
   Responsive: Desktop 1440, iPad 834, iPhone 390, iPhone SE 375.
*/

:root {
  --bg:#FAF7F2;
  --surface:#F2EDE3;
  --surface-2:#EAE3D4;
  --ink:#2A2620;
  --muted:#6B6356;
  --line:#D8CEBB;
  --primary:#3E7B4F;
  --primary-soft:#8FB69A;
  --primary-tint:#DDE8DC;
  --accent:#E0A84A;
  --accent-soft:#F0D49A;
  --success:#5A8A4B;
  --gentle-error:#B8544A;

  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px; --sp-7:64px;

  --ease: cubic-bezier(.22,.61,.36,1);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#1A1712; --surface:#211D17; --surface-2:#2A251E;
    --ink:#F0EAD9; --muted:#A69A86; --line:#3A342B;
    --primary:#6FA876; --primary-soft:#4A7A55; --primary-tint:#2A3B2C;
    --accent:#F4C26E; --accent-soft:#5A4628; --success:#7FB06E;
  }
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: var(--font-body);
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
h1 { font-size: clamp(40px, 7vw, 60px); line-height: 1.05; font-weight: 400; }
h2 { font-size: clamp(28px, 4.5vw, 44px); line-height: 1.1; }
h3 { font-size: clamp(22px, 3.5vw, 32px); line-height: 1.2; }
h4 { font-size: clamp(18px, 3vw, 24px); line-height: 1.3; }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 48px);
}

.muted { color: var(--muted); }
.meta  { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }

/* Buttons */
.btn {
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  padding: 14px 24px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 48px;
  min-width: 48px;
  transition: background .2s var(--ease), transform .15s var(--ease), border-color .15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { filter: brightness(0.95); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--primary); border-color: var(--primary-soft); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Inputs */
.input {
  font-family: inherit;
  font-size: 17px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--r-sm);
  width: 100%;
  min-height: 48px;
  transition: border-color .2s var(--ease);
}
.input:focus { outline: none; border-color: var(--primary); }

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 4vw, 32px);
}

/* PIN Dots */
.pin-row { display: flex; gap: 10px; justify-content: center; }
.pin-dot {
  width: 48px; height: 56px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  background: var(--bg);
}
.pin-dot.filled { border-color: var(--primary); background: var(--primary-tint); }

/* Progress bar */
.progress {
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--primary);
  transition: width .4s var(--ease);
}

/* Feedback states */
.feedback-ok, .feedback-no {
  padding: 12px 16px;
  border-radius: var(--r-md);
  margin: 16px 0;
  font-weight: 500;
}
.feedback-ok { background: var(--primary-tint); color: var(--success); border: 1px solid var(--primary-soft); }
.feedback-no { background: color-mix(in srgb, var(--gentle-error) 15%, var(--surface)); color: var(--gentle-error); border: 1px solid var(--gentle-error); }

/* Choice buttons (Exercise) */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
@media (max-width: 480px) { .choices { grid-template-columns: 1fr; } }
.choice {
  font-family: inherit; font-size: 17px; text-align: left;
  padding: 16px 20px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  color: var(--ink);
  border-radius: var(--r-md);
  cursor: pointer;
  min-height: 56px;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.choice:hover:not([disabled]) { border-color: var(--primary-soft); }
.choice.correct { border-color: var(--success); background: var(--primary-tint); }
.choice.wrong   { border-color: var(--gentle-error); background: color-mix(in srgb, var(--gentle-error) 12%, var(--surface)); }
.choice[disabled] { cursor: default; }

/* Bottom Tab Bar (Mobile Nav) */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface); border-top: 1px solid var(--line);
  display: none;
  grid-template-columns: repeat(3, 1fr);
  z-index: 10;
}
.tabbar a {
  padding: 12px 4px 16px;
  text-align: center;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  min-height: 56px;
}
.tabbar a.active { color: var(--primary); }
@media (max-width: 768px) {
  .tabbar { display: grid; }
  body.has-tabbar { padding-bottom: 72px; }
}

/* Tree SVG utility colors */
.tree-crown  { fill: var(--primary); }
.tree-leaf   { fill: var(--primary-soft); }
.tree-trunk  { fill: #7A5A3A; }
.tree-ground { fill: var(--line); }

/* Utility */
.hide-on-mobile { display: initial; }
@media (max-width: 480px) { .hide-on-mobile { display: none; } }

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