/* base.css — Design-Tokens (Stage Starter CI) + Reset. Geteilt von Spiel und Legal-Seiten. */

:root {
  --bg: #0a0a0f;
  --ink: #07070c;
  --gold: #f9c500;
  --gold-bright: #ffd83d;
  --gold-deep: #d9ab00;
  --line-gold: rgba(211, 181, 69, .28);

  --surface: #101018;
  --surface-2: #15151f;
  --border: rgba(255, 255, 255, .08);
  --text: #f4f4f6;
  --text-muted: #a8a8b3;
  --text-faint: #77778a;

  --danger: #e5484d;
  --danger-deep: #b02a2e;
  --ok: #46b17b;

  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --serif: "Fraunces", Georgia, serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

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

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

.sp-accent { color: var(--gold); }

/* Basis-Button (Gold) — Spiel und Legal duerfen darauf aufbauen. */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  color: var(--ink);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-weight: 700;
  cursor: pointer;
  padding: 14px 26px;
  font-size: 1rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
}
.sp-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 28px -8px rgba(249,197,0,.45); }
.sp-btn:active:not(:disabled) { transform: translateY(0); }
.sp-btn:disabled { opacity: .5; cursor: not-allowed; }

.sp-btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.sp-btn-ghost:hover:not(:disabled) { border-color: var(--line-gold); color: var(--text); box-shadow: none; }