/* ============================================================
   mkLearn – shared.css
   Globale CSS-Variablen, Reset, Basis-Typografie und Buttons.
   Wird von der Marketing-Landing (und Legal-Pages) geladen.
   Die PWA-Shell unter /app/ hat ihre eigene base.css mit
   denselben Variablen-Namen (bewusst gespiegelt).
   ============================================================ */

:root {
  /* Flächen & Linien */
  --bg:        #0f0f0f;
  --surface:   #1a1a1a;
  --surface2:  #242424;
  --border:    #2e2e2e;

  /* Akzente (Lern-/Produktivitäts-Palette) */
  --accent:    #c8f135;   /* Neon-Grün – Primär */
  --accent2:   #35a1f1;   /* Neon-Blau – Sekundär */

  /* Text */
  --text:      #f0f0f0;
  --muted:     #666;
  --danger:    #ff5252;

  /* Radius & Schrift */
  --radius:    16px;
  --font-sans: 'Syne', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;
}

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

html { background: var(--bg); }

body {
  font-family: var(--font-sans);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* ── Buttons (geteilt zwischen Landing & App-Promo) ───────── */
.btn-primary {
  display: inline-block;
  padding: 14px 24px;
  background: var(--accent);
  color: #0f0f0f;
  border: none;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.88; }

.btn-secondary {
  display: inline-block;
  padding: 14px 24px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s, box-shadow 0.2s;
}
.btn-secondary:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
}