/* Ustawienia wyglądu — JEDYNE miejsce kolorów, czcionek, zaokrągleń i odstępów. Zmiana designu zaczyna się tutaj;
   pozostałe pliki CSS używają tylko tych zmiennych. Ciemny motyw: wybór z przełącznika ([data-theme]) albo systemu. */

:root {
  --color-bg: #F5F3EF;
  --color-surface: #FFFFFF;
  --color-ink: #16171A;
  --color-muted: #6B675F;
  --color-line: rgba(22, 23, 26, .11);
  --color-field: #F1EFEA;
  --color-focus: rgba(22, 23, 26, .35);
  --color-error: #B4382B;
  --color-on-ink: #F5F3EF;

  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --font-size: 17px;
  --line-height: 1.6;
  --weight-strong: 650;

  --radius-card: 22px;
  --radius-field: 12px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 20px;
  --space-5: 32px;
  --space-6: 56px;

  --page-width: 720px;
  --wide-width: 1040px;
  --gutter: 20px;

  color-scheme: light;
}

/* Te same wartości dwa razy: wybór ręczny i ustawienie systemu (CSS nie pozwala ich połączyć). */
:root[data-theme="dark"] {
  --color-bg: #0D0E10;
  --color-surface: #16181C;
  --color-ink: #F2F1EE;
  --color-muted: #9B9CA2;
  --color-line: rgba(255, 255, 255, .10);
  --color-field: #1F2227;
  --color-focus: rgba(242, 241, 238, .40);
  --color-error: #FF8272;
  --color-on-ink: #0D0E10;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0D0E10;
    --color-surface: #16181C;
    --color-ink: #F2F1EE;
    --color-muted: #9B9CA2;
    --color-line: rgba(255, 255, 255, .10);
    --color-field: #1F2227;
    --color-focus: rgba(242, 241, 238, .40);
    --color-error: #FF8272;
    --color-on-ink: #0D0E10;
    color-scheme: dark;
  }
}