/* eMedics — system tokenów projektowych (Apka-g3hm faza 2B).
 *
 * Wyodrębnione z templates/visits/consultation_view.html (faza 1) jako
 * reużywalna warstwa tokenów: tinted neutrals w OKLCH (hue granat ~258),
 * Fraunces (display) + Plus Jakarta Sans (UI). Ładowane przez {% static %}
 * (zob. base.html / pracodawca/_base.html).
 *
 * Zasady (CLAUDE.md / skill impeccable):
 *   - OKLCH, chroma maleje przy skrajnej jasności (brak garish na krańcach)
 *   - ZERO #000/#fff — wszystkie neutrale tinted w stronę granatu
 *   - Fonty distinctive (NIE Inter/Roboto/Arial)
 *
 * Propagacja na kolejne powierzchnie: epik (zob. follow-up bd). Ten plik =
 * jedno źródło prawdy dla palety, żeby nie duplikować :root w każdym template.
 */
:root {
  /* Tła i powierzchnie */
  --em-bg:        oklch(0.985 0.006 255);
  --em-surface:   oklch(0.998 0.003 255);

  /* Atrament (tekst) — 3 poziomy kontrastu */
  --em-ink:       oklch(0.29 0.035 258);
  --em-ink-soft:  oklch(0.52 0.022 258);
  --em-ink-faint: oklch(0.64 0.018 258);

  /* Linie / obramowania */
  --em-line:      oklch(0.915 0.010 258);
  --em-line-soft: oklch(0.955 0.007 258);

  /* Marka (granat) */
  --em-brand:      oklch(0.45 0.115 258);
  --em-brand-deep: oklch(0.36 0.105 260);
  --em-brand-wash: oklch(0.965 0.018 258);

  /* Semantyka statusów (orzeczenie / werdykt MP) */
  --em-ok:        oklch(0.42 0.11 152);
  --em-ok-wash:   oklch(0.965 0.035 152);
  --em-warn:      oklch(0.45 0.12 70);
  --em-warn-wash: oklch(0.965 0.045 82);
  --em-bad:       oklch(0.55 0.16 27);
  --em-bad-wash:  oklch(0.965 0.040 27);

  /* Kształt i głębia */
  --em-radius: 14px;
  --em-radius-sm: 9px;
  --em-shadow: 0 1px 2px oklch(0.45 0.05 258 / 0.05),
               0 6px 22px oklch(0.45 0.05 258 / 0.06);

  /* Typografia */
  --em-font-display: "Fraunces", Georgia, serif;
  --em-font-ui: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* Komponenty bazowe — opt-in (klasy `em-*`), nie nadpisują globalnych stylów. */

.em-panel {
  background: var(--em-surface);
  border: 1px solid var(--em-line);
  border-radius: var(--em-radius);
  padding: 22px 24px;
  box-shadow: var(--em-shadow);
}

.em-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 999px;
  font-family: var(--em-font-ui);
  font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
  background: var(--em-brand-wash); color: var(--em-brand-deep);
}
.em-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.em-badge.ok   { background: var(--em-ok-wash);   color: var(--em-ok); }
.em-badge.warn { background: var(--em-warn-wash); color: var(--em-warn); }
.em-badge.bad  { background: var(--em-bad-wash);  color: var(--em-bad); }