/* ============================================================
   Merten APPS — Einheitliche Design-Tokens
   Quelle: Startseite (public/index.html)
   Einbinden in alle Modul-Seiten VOR dem eigenen <style>-Block:
     <link rel="stylesheet" href="/_shared/design-tokens.v1.css">
   ============================================================ */

:root {
  /* Marken-Farben */
  --brand-green: #6EB221;
  --brand-green-dark: #5A9820;
  --brand-green-soft: rgba(110, 178, 33, 0.12);
  --brand-yellow: #F0F000;
  --brand-blue: #303090;
  --brand-blue-dark: #232370;

  /* Neutralfarben — Light-Mode Default */
  --bg: #F9F8F5;
  --bg-elevated: #FFFFFF;
  --bg-muted: #F2F1EC;
  --border: #E2E0D8;
  --border-strong: #D4D1CA;
  --text: #28251D;
  --text-strong: #12100C;
  --text-muted: #7A7974;
  --text-faint: #B0AFA9;

  /* Semantik */
  --danger: #A12C7B;
  --warning: #C9932E;
  --success: #6EB221;
  --info: #4F98A3;

  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06);

  /* Radius */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 20px;

  /* Legacy-Aliase (damit alte Modul-CSS weiter funktioniert) */
  --surface: var(--bg-elevated);
  --surface-alt: var(--bg-muted);
  --primary: var(--brand-green);
  --primary-dark: var(--brand-green-dark);
  --primary-light: var(--brand-green-soft);
  --green: var(--brand-green);
  --muted: var(--text-muted);
  --faint: var(--text-faint);
  --red: var(--danger);
  --yellow: var(--brand-yellow);
  --navy: var(--info);
}

/* Dark-Mode */
html.dark, :root.dark {
  --bg: #14140F;
  --bg-elevated: #1C1B15;
  --bg-muted: #201F19;
  --border: #33322A;
  --border-strong: #44443A;
  --text: #E8E6DC;
  --text-strong: #FFFFFF;
  --text-muted: #8A897E;
  --text-faint: #55544A;
  --brand-green-soft: rgba(110, 178, 33, 0.16);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* System-Preference respektieren, falls kein manuelles Toggle */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg: #14140F;
    --bg-elevated: #1C1B15;
    --bg-muted: #201F19;
    --border: #33322A;
    --border-strong: #44443A;
    --text: #E8E6DC;
    --text-strong: #FFFFFF;
    --text-muted: #8A897E;
    --text-faint: #55544A;
    --brand-green-soft: rgba(110, 178, 33, 0.16);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}

/* ---------- Basis-Reset & Body ---------- */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Utility-Klassen für konsistente Look ---------- */
.mk-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.mk-btn-primary {
  background: var(--brand-green);
  color: #fff;
  border: 0;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
}
.mk-btn-primary:hover { background: var(--brand-green-dark); }

.mk-btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
}
.mk-btn-ghost:hover { background: var(--bg-muted); }