/* Medizinarius – Design Tokens
   Einbinden mit: <link rel="stylesheet" href="/shared/css/variables.css"> */

:root {
  /* Hintergründe */
  --bg-primary:     #0a0f1e;
  --bg-secondary:   #0d1526;
  --bg-card:        rgba(15, 23, 42, 0.75);
  --bg-card-hover:  rgba(20, 32, 58, 0.90);

  /* Rahmen */
  --border-subtle:  rgba(100, 180, 255, 0.12);
  --border-accent:  rgba(0, 210, 210, 0.35);

  /* Akzentfarben */
  --teal:           #00d2d2;
  --teal-dim:       rgba(0, 210, 210, 0.15);
  --teal-glow:      rgba(0, 210, 210, 0.40);
  --cyan:           #22d3ee;
  --green-ekg:      #39ff6e;
  --violet:         #a78bfa;
  --violet-dim:     rgba(167, 139, 250, 0.15);
  --orange:         #fb923c;
  --rose:           #f43f5e;

  /* Text */
  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;

  /* Radii */
  --radius-sm:      8px;
  --radius-md:      14px;
  --radius-lg:      22px;
  --radius-xl:      32px;

  /* Schatten */
  --shadow-card:    0 4px 32px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-glow:    0 0 30px var(--teal-glow);

  /* Animationen */
  --transition:      all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.16s ease;

  /* Typografie */
  --font:           'Outfit', system-ui, sans-serif;
}