/* Motyw jasny/ciemny. Broadsheet trzyma wszystko na zmiennych, więc ciemny
   wariant to przestrojenie tokenów — nie druga wersja komponentów.
   Ramp odwrócony: krok 100 to najciemniejsza plama, 900 najjaśniejsza,
   dzięki czemu `-700` dalej znaczy „tekst w tym kolorze”, a `-100` „delikatne tło”. */

:root {
  color-scheme: light;
  /* Pokazujemy ikonę tego, co przycisk włączy — nie tego, co jest teraz. */
  --toggle-icon-sun: none;
  --toggle-icon-moon: block;

  /* Broadsheet miał te trzy kroki na tyle jasne, że drobne podpisy (10–13 px)
     schodziły do ~2,9:1 na papierze. Panel czyta się codziennie i długo,
     więc szarości drugiego planu idą w dół do 4,7–7,8:1 — hierarchia zostaje
     ta sama, tylko nic nie znika przy zmęczonych oczach. */
  --color-neutral-500: #6f6b6b;
  --color-neutral-600: #625f5f;
  --color-neutral-700: #4d4a4a;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Papier staje się farbą: ciepła czerń, nigdy #000 — mniej rażenia przy długim czytaniu. */
  --color-bg: #1b1a19;
  --color-surface: #262422;
  --color-text: #ece8e5;
  --color-divider: color-mix(in srgb, #ece8e5 20%, transparent);

  --color-neutral-100: #232120;
  --color-neutral-200: #2b2927;
  --color-neutral-300: #383634;
  --color-neutral-400: #524e4c;
  --color-neutral-500: #8f8986;
  --color-neutral-600: #a09a97;
  --color-neutral-700: #bdb7b3;
  --color-neutral-800: #d6d0cc;
  --color-neutral-900: #ebe6e2;

  --color-accent: #3ba9d1;
  --color-accent-100: #10303c;
  --color-accent-200: #123f50;
  --color-accent-300: #1a5c74;
  --color-accent-400: #2a7f9f;
  --color-accent-500: #3ba9d1;
  --color-accent-600: #5ec2e6;
  --color-accent-700: #8fd9f5;
  --color-accent-800: #b8e6fa;
  --color-accent-900: #e0f5ff;

  --color-accent-2: #f24d8b;
  --color-accent-2-100: #45121f;
  --color-accent-2-200: #5e1a2c;
  --color-accent-2-300: #8a2246;
  --color-accent-2-400: #c02d63;
  --color-accent-2-500: #f24d8b;
  --color-accent-2-600: #ff7aa8;
  --color-accent-2-700: #ffa1c0;
  --color-accent-2-800: #ffc9d9;
  --color-accent-2-900: #ffe8ef;

  /* Na ciemnym tle cień sam z siebie nie odcina — dochodzi hairline na .dialog niżej. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 3px 10px rgba(0, 0, 0, .55);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, .65);

  --toggle-icon-sun: block;
  --toggle-icon-moon: none;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  transition: background-color .18s ease, color .18s ease;
}

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-500); text-decoration: underline; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-neutral-300); }
::-webkit-scrollbar-track { background: var(--color-bg); }
::selection { background: var(--color-accent-200); color: var(--color-text); }

/* Dialog na ciemnym: przyciemniona zasłona i włos krawędzi zamiast samego cienia. */
:root[data-theme="dark"] .dialog-backdrop { background: rgba(8, 7, 7, .74); }
:root[data-theme="dark"] .dialog { border: 1px solid var(--color-divider); }
:root[data-theme="dark"] .input { background: var(--color-neutral-200); }

/* — przełącznik motywu — */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex: none;
  cursor: pointer; color: var(--color-neutral-700);
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.theme-toggle:hover {
  color: var(--color-accent-700);
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.theme-toggle svg { display: block; width: 18px; height: 18px; fill: currentColor; }
.theme-toggle .icon-sun { display: var(--toggle-icon-sun); }
.theme-toggle .icon-moon { display: var(--toggle-icon-moon); }

@media (prefers-reduced-motion: reduce) {
  body, .theme-toggle { transition: none; }
}