/* Motyw Olei: jedyne miejsce, w którym definiujemy kolory.
   Komponenty (app.css) używają wyłącznie tych zmiennych. */
:root {
  --bg: #1E1F21;          /* tło strony */
  --surface: #2A2C2F;     /* karty, panele */
  --surface-2: #33363A;   /* pola, neutralne plakietki */
  --nav: #232427;         /* dolny pasek nawigacji */
  --border: #3A3C40;      /* obramowania, linie */
  --text: #EDEEE9;        /* tekst główny */
  --text-muted: #A4A79F;  /* tekst pomocniczy */
  --accent: #B8C47E;      /* jasna oliwka: przyciski główne, aktywna zakładka, linki */
  --on-accent: #1E1F21;   /* tekst na oliwkowym tle */
  --accent-tint: #353B27; /* tło oliwkowych plakietek i przycisków drugorzędnych */
  --accent-text: #CFD99A; /* tekst na --accent-tint, poprawki, trend „maleje” */
  --warn: #E2A36B;        /* najsłabsza sprawność, błędy, trend „rośnie” */
  --warn-tint: #3D3125;   /* tło ostrzeżeń */
  --warn-text: #F0BE8E;   /* tekst na --warn-tint */

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 20px;         /* zaokrąglenie kart */
  --radius-sm: 12px;      /* zaokrąglenie przycisków i pól */
  --tap: 44px;            /* minimalna wysokość elementów klikalnych */
  --nav-height: 72px;     /* wysokość dolnej nawigacji */
}