/* Tokeny wyglądu Surprise Me: jedyne źródło kolorów, czcionek i odstępów.
   Kolory wzięte z logo Jacka (SurpriseMe/Logo): granat nocy + kropki róż, błękit, cyjan, żółty.
   Nowy kolor = nowy token tutaj, nigdy wartość wpisana w styl.css. */
:root {
  color-scheme: dark; /* strona jest ciemna z założenia: przeglądarka ma jej nie przyciemniać po swojemu */
  /* tło i powierzchnie */
  --tlo: #0a0d1f;
  --tlo-2: #10142b;
  --tlo-polprzezroczyste: rgba(10, 13, 31, 0.75);
  --karta: #151a36;
  --karta-2: #1c2246;
  --linia: rgba(255, 255, 255, 0.08);
  --linia-mocna: rgba(255, 255, 255, 0.18);

  /* tekst */
  --tekst: #eef0ff;
  --tekst-2: #a6acd0;
  --na-gradiencie: #ffffff;
  --tekst-3: #8a91bd; /* kontrast ≥ 5:1 na każdym tle (WCAG AA) */

  /* kolory logo */
  --roz: #ff3e9a;
  --fiolet: #7b5cff;
  --blekit: #2f6bff;
  --cyjan: #29d3ff;
  --zolty: #ffc93c;

  /* znaczenia */
  --akcent: var(--roz);
  --sukces: #3ee08f;
  --uwaga: var(--zolty);
  --blad: #ff6b6b;
  --gradient-logo: linear-gradient(100deg, var(--roz) 0%, var(--fiolet) 45%, var(--blekit) 75%, var(--cyjan) 100%);

  /* mapa (wariant "wieczór", wybrany przez Jacka 2026-10-14); ulice w jednej tonacji, główne nieco jaśniejsze */
  --mapa-tlo: #272c62;
  --mapa-zabudowa: #2d3372;
  --mapa-zielen: #2e6a80;
  --mapa-woda: #29b8f0;
  --mapa-budynki: #363d86;
  --mapa-ulica: #4f58ab;
  --mapa-ulica-srednia: #5d67bd;
  --mapa-ulica-glowna: #6c77d0;
  --mapa-tory: #474d93;

  /* niebo na kartach pogody (zapowiedź): dzień, zmierzch, noc */
  --niebo-dzien: #1f3170;
  --niebo-zmierzch: #3b2457;
  --niebo-noc: #0c0f2b;
  --gwiazdy: rgba(238, 240, 255, 0.55);

  /* czcionki */
  --font-tytul: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-tekst: "Manrope", "Segoe UI", system-ui, sans-serif;

  /* skala */
  --r-maly: 10px;
  --r: 16px;
  --r-duzy: 24px;
  --odstep-1: 4px;
  --odstep-2: 8px;
  --odstep-3: 12px;
  --odstep-4: 16px;
  --odstep-5: 24px;
  --odstep-6: 32px;
  --odstep-7: 48px;
  --przycisk-h: 56px;
  --nawigacja-h: 72px; /* dolny pasek nawigacji (bez strefy bezpiecznej) */
  --rolka-h: 44px; /* wysokość jednej pozycji rolki godzin */
  --szerokosc: 480px;
  --ruch: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}