/*
 * theme.css – Zentrale Design-Token für das Pflegedienst Chef-Portal
 * Alle Farben und Typografie hier ändern → wirkt sich überall aus.
 * Spiegelt die Variablen der React-Native-App (src/lib/colors.js).
 */

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

/* ── Design-Token ───────────────────────────────────────────── */
:root {
  /* --- Farben ------------------------------------------------ */
  --primary:        #003C8F;   /* Hauptfarbe (Buttons, Header, Akzente) */
  --primary-hover:  #0057A8;   /* Hover-Zustand                        */
  --primary-light:  #E3EBF8;   /* Heller Hintergrund, Badges           */

  /* Rückwärtskompatible Aliase (bestehende var(--green)-Referenzen) */
  --green:          var(--primary);
  --green-light:    var(--primary-light);
  --green2:         var(--primary-hover);

  --text:           #1a1a1a;
  --text2:          #666;
  --text3:          #999;
  --bg:             #f5f5f5;
  --bg2:            #fff;
  --border:         #e0e0e0;
  --border-light:   #f0f0f0;
  --red:            #D32F2F;
  --red-light:      #FFEBEE;
  --radius:         10px;

  /* --- Typografie -------------------------------------------- */
  /* Schriftfamilien */
  --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:  'SF Mono', 'Fira Code', 'Consolas', 'Menlo', monospace;

  /* Schriftgrößen */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   20px;

  /* Zeilenhöhe */
  --leading:    1.5;
}

/* ── Basis-Typografie ───────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  line-height: var(--leading);
  background:  var(--bg);
  color:        var(--text);
  min-height:   100vh;
}

/* Hilfsklasse für technische Codes (Kontonummern, Belegnummern) */
.code {
  font-family: var(--font-mono);
  font-size:   var(--text-sm);
  font-weight: 600;
}