/* ============================================================
   medudoc · Design Tokens
   Klinisch-ruhig, warm, typografisch geführt.
   Rot ist streng reserviert für Marke + Patientensicherheit.
   ============================================================ */

:root {
  /* --- Markenrot (sparsam) ----------------------------------- */
  --brand: #d73238;
  --brand-deep: #882224;
  --brand-soft: #fdecec;      /* sehr heller roter Schimmer für Flächen */

  /* --- Tinte / Neutral --------------------------------------- */
  --ink: #2d2c30;             /* Haupttext */
  --ink-2: #57555c;           /* Sekundärtext */
  --ink-3: #8a888f;           /* Tertiär / Labels */
  --ink-4: #b8b6bb;           /* Disabled / sehr dezent */
  --line: rgba(45, 44, 48, 0.10);
  --line-soft: rgba(45, 44, 48, 0.06);

  /* --- Flächen (warm, off-white) ----------------------------- */
  --surface: #ffffff;
  --surface-snow: #f5f7f9;    /* App-Hintergrund, kühles Grau */
  --surface-warm: #eaedf0;    /* Panels / sekundär, kühles Mittelgrau */
  --tint: rgba(0, 0, 0, 0.03);

  /* --- Warm-menschlicher Akzent (Beige) ---------------------- */
  --beige: #f2c8a0;
  --beige-soft: #faecdb;
  --beige-deep: #c98f5a;

  /* --- Status / Semantik ------------------------------------- */
  --ok: #13612e;
  --ok-soft: #e4f0e8;
  --info: #1159af;
  --info-soft: #e6eefa;
  --warn: #f7630c;
  --warn-soft: #fdece1;
  --attention: #f5a524;
  --attention-soft: #fdf2dc;
  --danger: #d73238;
  --danger-deep: #882224;
  --danger-soft: #fdecec;

  /* --- Patienten-Farbcodes (Tabs + Avatare) ------------------ */
  --pt-1: #1159af;
  --pt-2: #13612e;
  --pt-3: #7a4ea3;
  --pt-4: #b06a1f;
  --pt-5: #0f7d86;

  /* --- Radien ------------------------------------------------ */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* --- Schatten (weich, dezent) ------------------------------ */
  --sh-1: 0 1px 2px rgba(45, 44, 48, 0.05), 0 1px 1px rgba(45, 44, 48, 0.04);
  --sh-2: 0 2px 8px rgba(45, 44, 48, 0.06), 0 1px 2px rgba(45, 44, 48, 0.05);
  --sh-3: 0 10px 30px rgba(45, 44, 48, 0.10), 0 2px 8px rgba(45, 44, 48, 0.06);
  --sh-pop: 0 18px 48px rgba(45, 44, 48, 0.18);

  /* --- Typo -------------------------------------------------- */
  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Touch / Layout ---------------------------------------- */
  --touch: 44px;              /* Mindest-Hit-Target (iPad) */
  --rail: 264px;              /* Breite Sidebar */
  --rail-collapsed: 76px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: var(--surface-snow);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; }

::selection { background: var(--beige); color: var(--ink); }

/* Schlanke, ruhige Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: rgba(45, 44, 48, 0.16);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(45, 44, 48, 0.28); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Utility */
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }