/* base.css — Fundament: gemeinsame CSS-Variablen und Basis-Styles */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:     #0b0f16;
  --surf:   #111820;
  --card:   #151d28;
  --border: #1e2a38;
  --amber:  #e09530;
  --green:  #3aaa6a;
  --red:    #e05560;
  --text:   #dde4ef;
  --muted:  #6a7888;
  --faint:  #2c3848;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
}

/* ── Badges (geteilt zwischen allen Seiten) ───────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
}
.badge-green { background: #0d2b1a; color: #3aaa6a; border: 1px solid #1a4a2a; }
.badge-amber { background: #2b1a04; color: #e09530; border: 1px solid #4a3010; }
.badge-red   { background: #2b0a0a; color: #e05560; border: 1px solid #4a1a1a; }
.badge-muted { background: #0f1820; color: #7a8a9a; border: 1px solid #1e2c3e; }

/* ── Useful-Button (geteilt zwischen index und profil) ────────────────────── */
.useful-btn {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--green);
  padding: 7px 14px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.useful-btn:hover:not(:disabled) { border-color: var(--green); }
.useful-btn:disabled { opacity: .7; cursor: default; }
.useful-msg { font-size: 11px; color: var(--muted); margin-left: 8px; }

/* ── Logo ─────────────────────────────────────────────────────────────────── */
.logo { font-family: 'Lora', Georgia, serif; font-size: 21px; font-weight: 700; }
.logo span { color: var(--amber); }