:root{
  /* Basisfarben */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-soft: #DBEAFE;

  --color-secondary: #14B8A6;
  --color-secondary-hover: #0F9F91;
  --color-secondary-soft: #CCFBF1;

  --color-accent: #F59E0B;
  --color-accent-soft: #FEF3C7;

  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #0EA5E9;

  /* Surfaces & layout */
  --bg-app: #F8FAFC;
  --surface: #FFFFFF;
  --surface-alt: #F1F5F9;
  --border: #E2E8F0;
  --shadow-1: 0 1px 3px rgba(15,23,42,0.06);
  --shadow-2: 0 6px 18px rgba(15,23,42,0.08);

  /* Text */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;

  /* States / focus */
  --focus-ring: rgba(37,99,235,0.18); /* primary soft focus */
  --disabled: #E6EDF8;
  --muted-on-surface: rgba(15,23,42,0.35);

  /* Component sizing */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
}

body{ background:var(--bg-app); color:var(--text-primary); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

.app-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--spacing-md); }

.btn-primary{ background: var(--color-primary); color:#fff; border-radius: var(--radius-sm); padding: 10px 16px; box-shadow:none; }
.btn-primary:hover{ background: var(--color-primary-hover); }
.btn-primary:focus{ box-shadow: 0 0 0 6px var(--focus-ring); outline:none; }
.btn-primary:disabled{ background: var(--disabled); color: var(--text-muted); opacity: 0.9; }

.input{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; }
.input:focus{ border-color:var(--color-primary); box-shadow:0 0 0 6px var(--focus-ring); outline:none; }

.progress .bar { background: var(--color-secondary); }
.progress .track{ background: var(--surface-alt); }

.table tr:hover{ background: rgba(37,99,235,0.03); }

.badge-xp{ background: var(--color-accent); color: #0F172A; border-radius:999px; padding:6px 10px; font-weight:600; }