/* =====================================================================
   Tokeny projektu: kolory, fonty, promienie i wymiary układu.
   Akcje i stany wyboru: grafit (ink), akcent niebieski dla fokusu,
   linków i znaczników. Motyw: jasny domyślnie, ciemny wg systemu albo
   wybrany przez użytkownika (atrybut data-theme na <html>).
   Dokument ofertowy ma własne kolory (offer.css) i zawsze jest jasny.
   ===================================================================== */
:root {
  --ink: #111418;            /* Perla Nera */
  --ink-2: #2A3038;
  --surface: #FFFFFF;        /* Okenite */
  --rail: #F5F6F8;
  --canvas: #E4E8EC;         /* posadzka salonu za arkuszami */
  --line: #DADFE5;
  --line-strong: #BCC3CB;
  --muted: #5A646F;
  --faint: #8C959F;
  --accent: #0B6C9C;         /* Niebieski Obsession */
  --accent-soft: #E3F0F7;
  --on-ink: #FFFFFF;
  --ok: #1D6E45; --ok-soft: #E4F2EA;
  --warn: #8F5400; --warn-soft: #FBF0DC;
  --danger: #A8261E; --danger-soft: #FBE7E5;
  --shadow-sheet: 0 1px 2px rgba(17, 24, 33, .10), 0 12px 32px rgba(17, 24, 33, .12);
  --shadow-pop: 0 18px 50px rgba(17, 24, 33, .22);
  --display: 'Saira Variable', 'Saira', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --text: 'IBM Plex Sans', 'Segoe UI', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --rail-w: 468px;
  --top-h: 60px;
  --side-w: 252px;
  --info: #0B6C9C; --info-soft: #E3F0F7;
  --row-hover: #F7F8FA;
  color-scheme: light;
}

/* Ciemny motyw wg ustawień systemu (o ile użytkownik nie wybrał jasnego) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #EEF1F4; --ink-2: #C9D0D7; --surface: #171B20; --rail: #12161A; --canvas: #0B0D10;
    --line: #2A3038; --line-strong: #3B434D; --muted: #A5AEB8; --faint: #7D8691;
    --accent: #58B4E4; --accent-soft: #10283A; --on-ink: #0E1114;
    --ok: #63C795; --ok-soft: #123224; --warn: #E5A647; --warn-soft: #33260F; --danger: #F08A82; --danger-soft: #3A1714;
    --info: #58B4E4; --info-soft: #10283A; --row-hover: #1C2127;
    --shadow-sheet: 0 1px 2px rgba(0,0,0,.5), 0 14px 40px rgba(0,0,0,.55);
    --shadow-pop: 0 18px 50px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

/* Ciemny motyw wybrany ręcznie w ustawieniach */
:root[data-theme="dark"] {
  --ink: #EEF1F4; --ink-2: #C9D0D7; --surface: #171B20; --rail: #12161A; --canvas: #0B0D10;
  --line: #2A3038; --line-strong: #3B434D; --muted: #A5AEB8; --faint: #7D8691;
  --accent: #58B4E4; --accent-soft: #10283A; --on-ink: #0E1114;
  --ok: #63C795; --ok-soft: #123224; --warn: #E5A647; --warn-soft: #33260F; --danger: #F08A82; --danger-soft: #3A1714;
  --info: #58B4E4; --info-soft: #10283A; --row-hover: #1C2127;
  --shadow-sheet: 0 1px 2px rgba(0,0,0,.5), 0 14px 40px rgba(0,0,0,.55);
  --shadow-pop: 0 18px 50px rgba(0,0,0,.6);
  color-scheme: dark;
}