/* ============================================================
   Design tokens — neutralna paleta narzędzia prezentacyjnego.
   Interfejs playgrounda ma nie konkurować z projektem aplikacji.
   ============================================================ */
:root {
  /* Paleta projektu — nazwy jak w bibliotece stylów.
     To one są źródłem prawdy; tokeny niżej tylko się do nich odwołują. */
  --c-black:      #121314;
  --c-gray-light: #e1e1e1;
  --c-gray-dark:  #a5a5a5;
  --c-red:        #e31418;
  --c-blue:       #22dbf3;
  /* Jaśniejszy błękit niesie jeden stan: „ten etap masz już za sobą"
     (pasek etapów w trybie klienta). */
  --c-cyan:       #68d8f0;

  /* Surfaces */
  --c-canvas:        #f4f4f3;
  --c-surface:       #ffffff;
  --c-surface-sunk:  #fbfbfa;
  --c-surface-hover: #f7f7f6;
  /* Karty (ekran, warstwa, wariant) — w jasnym motywie zlewają się
     z kolumną, w ciemnym dostają własny, jaśniejszy odcień. */
  --c-card:          var(--c-surface);
  /* Pola formularza są o stopień jaśniejsze od karty, na której leżą —
     w ciemnym motywie to jedyne, co je z niej wydziela. */
  --c-field:         var(--c-surface);
  /* Obrys pola z kursorem. W jasnym motywie akcent (prawie czerń),
     w ciemnym stonowana jasna linia — biały obrys o podwójnej grubości
     był jaśniejszy od wszystkiego dookoła. */
  --c-field-focus:   var(--c-accent);
  --c-field-focus-ring: 0 0 0 1px var(--c-accent);
  /* Zaznaczony element (karta, wątek, projekt): w jasnym motywie obrys
     akcentem, w ciemnym sama linia — biały pierścień na ciemnym tle
     przyciągał wzrok mocniej niż treść, którą oznaczał. */
  --c-selected-border: var(--c-accent);
  --c-selected-ring:   0 0 0 1px var(--c-accent);
  /* Wybrana karta: w jasnym motywie obrys akcentem, w ciemnym jaśniejsze
     tło — biała obwódka na ciemnym krzyczała bardziej niż sama treść. */
  --c-card-active:   var(--c-card);

  /* Ink */
  --c-ink:           var(--c-black);
  --c-ink-soft:      #55575d;
  --c-ink-muted:     var(--c-gray-dark);
  --c-ink-faint:     #b6b8be;

  /* Lines */
  --c-line:          var(--c-gray-light);
  --c-line-strong:   #d5d5d2;

  /* Accent — prawie-czarny; drugi akcent (błękit) niesie stan „wybrane" */
  --c-accent:        var(--c-black);
  --c-accent-ink:    #ffffff;
  --c-focus:         var(--c-black);
  --c-accent-2:      var(--c-blue);
  --c-accent-2-ink:  var(--c-black);
  --c-accent-2-hover:#20cce2;
  /* Etykieta „zatwierdzone" bez wypełnienia: na jasnym tle czytelna jest
     czerń, na ciemnym sam błękit. */
  --c-accent-2-text: var(--c-accent-2-ink);

  /* Krok przebyty. Ten sam kolor w obu motywach — błękit czyta się
     i na bieli, i na czerni, a znak w środku zostaje czarny. */
  --c-done:          var(--c-cyan);
  --c-done-ink:      var(--c-black);

  /* Przyciemnienie tła pod modalem — w ciemnym motywie musi być mocniejsze,
     bo szarość na ciemnym tle nie oddziela okna od reszty. */
  --c-scrim:         rgba(22, 23, 26, 0.18);

  /* Stany: aktywny ekran i akcja destrukcyjna */
  --c-positive:      #34c759;
  --c-danger:        var(--c-red);

  /* Odcienie pochodne — hover/active przycisków w kolorze marki */
  --c-black-hover:  #26282a;
  --c-black-active: #0b0c0d;
  --c-red-hover:    #c21115;
  --c-red-tint:     rgba(227, 20, 24, 0.08);
  --c-red-tint-soft:rgba(227, 20, 24, 0.06);

  /* Placeholder (wireframe) */
  --c-ph-fill:       #e4e4e1;
  --c-ph-fill-soft:  #ececea;
  --c-ph-line:       #dcdcd9;

  /* Typografia */
  /* Manrope hostowany lokalnie (css/fonts.css); reszta to zapas na czas
     ładowania i dla przeglądarek bez woff2. */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  /* Krój dla identyfikatorów (ID wariantu, klucz warstwy, id projektu).
     Mozilla Text nie jest krojem o stałej szerokości znaków — kolumny liczb
     nie będą się idealnie równać. Stos zapasowy zostaje monospace'owy. */
  --font-mono: "Mozilla Text", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;

  --ls-wide:  0.14em;
  --ls-mid:   0.06em;
  --ls-tight: -0.01em;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Obudowa makiety telefonu. Czarna, jak w prawdziwym urządzeniu —
     biała zlewała się z tłem panelu i ekran wyglądał, jakby pływał
     bez ramki. W ciemnym motywie zostaje czarna, ale dostaje jaśniejszy
     włos, żeby nie znikała w tle strony. */
  --phone-frame:      #16171a;
  --phone-frame-line: rgba(255, 255, 255, 0.06);

  /* Elevation — bardzo subtelna */
  --sh-1: 0 1px 2px rgba(16, 17, 26, 0.04);
  --sh-2: 0 1px 3px rgba(16, 17, 26, 0.06), 0 8px 24px rgba(16, 17, 26, 0.05);
  --sh-phone: 0 2px 6px rgba(16, 17, 26, 0.06),
              0 24px 60px rgba(16, 17, 26, 0.10),
              0 60px 120px rgba(16, 17, 26, 0.06);

  /* Motion */
  --e-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 120ms;
  --t-mid:  200ms;
  --t-slow: 320ms;

  /* Layout */
  --h-header: 64px;
  /* Panel administratora ma w nagłówku pigułki akcji — potrzebuje więcej
     powietrza niż nagłówek widoku klienta. */
  --h-header-admin: 76px;
  --w-rail:   380px;
  --w-panel:  380px;
}

/* ============================================================
   CIEMNY MOTYW

   Zmieniamy WYŁĄCZNIE interfejs narzędzia. Makieta klienta — telefon,
   okno przeglądarki, placeholdery — zostaje taka, jak ją zaprojektowano:
   ciemny playground nie może przemalowywać cudzego projektu.

   Zasada tych samych tokenów: nic poza tym blokiem nie wie o motywie,
   więc każdy nowy komponent dostaje ciemną wersję za darmo, o ile
   używa zmiennych zamiast kolorów wpisanych na sztywno.

   Akcent w jasnym motywie jest prawie czarny (przyciski główne). Na
   ciemnym tle czarny przycisk znika, więc akcent odwraca się na jasny,
   a jego tekst na czarny. Limonka zostaje bez zmian — to ona niesie
   „wybrane" w obu motywach.
   ============================================================ */

:root[data-theme="dark"] {
  --c-canvas:        #141517;
  --c-surface:       #1c1e21;
  --c-surface-sunk:  #191b1d;
  --c-surface-hover: #24272a;
  --c-card:          #222529;
  --c-field:         #2b2f34;
  --c-card-active:   #262a2f;
  --c-field-focus:   #6a6f76;
  --c-field-focus-ring: none;
  --c-selected-border: var(--c-line-strong);
  --c-selected-ring:   none;

  --c-ink:           #f3f3f1;
  --c-ink-soft:      #c3c5c9;
  --c-ink-muted:     #9a9da2;
  --c-ink-faint:     #6f7278;

  --c-line:          #2b2e31;
  --c-line-strong:   #3b3f43;

  --c-accent:        #f3f3f1;
  --c-accent-ink:    var(--c-black);
  --c-accent-2-text: var(--c-accent-2);
  --c-focus:         #f3f3f1;

  /* Hover/active przycisku w kolorze akcentu — na ciemnym rozjaśniamy */
  --c-black-hover:   #e2e2e0;
  --c-black-active:  #ffffff;

  --c-red-tint:      rgba(227, 20, 24, 0.18);
  --c-red-tint-soft: rgba(227, 20, 24, 0.12);
  --c-scrim:         rgba(0, 0, 0, 0.58);

  --phone-frame:      #0e0f11;
  --phone-frame-line: rgba(255, 255, 255, 0.14);

  /* Cień na ciemnym tle musi być głębszy, żeby w ogóle było go widać */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --sh-2: 0 1px 3px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.40);
  --sh-phone: 0 2px 6px rgba(0, 0, 0, 0.45),
              0 24px 60px rgba(0, 0, 0, 0.55),
              0 60px 120px rgba(0, 0, 0, 0.35);
}

/* Ustawienie „System": bez atrybutu decyduje motyw urządzenia.
   Wykluczenie [data-theme="light"] sprawia, że wybór jasnego motywu
   wygrywa z ciemnym systemem — inaczej nie dałoby się go wymusić. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-canvas:        #141517;
    --c-surface:       #1c1e21;
    --c-surface-sunk:  #191b1d;
    --c-surface-hover: #24272a;
    --c-card:          #222529;
    --c-field:         #2b2f34;
    --c-card-active:   #262a2f;
    --c-field-focus:   #6a6f76;
    --c-field-focus-ring: none;
    --c-selected-border: var(--c-line-strong);
    --c-selected-ring:   none;

    --c-ink:           #f3f3f1;
    --c-ink-soft:      #c3c5c9;
    --c-ink-muted:     #9a9da2;
    --c-ink-faint:     #6f7278;

    --c-line:          #2b2e31;
    --c-line-strong:   #3b3f43;

    --c-accent:        #f3f3f1;
    --c-accent-ink:    var(--c-black);
    --c-accent-2-text: var(--c-accent-2);
    --c-focus:         #f3f3f1;

    --c-black-hover:   #e2e2e0;
    --c-black-active:  #ffffff;

    --c-red-tint:      rgba(227, 20, 24, 0.18);
    --c-red-tint-soft: rgba(227, 20, 24, 0.12);
    --c-scrim:         rgba(0, 0, 0, 0.58);

    --phone-frame:      #0e0f11;
    --phone-frame-line: rgba(255, 255, 255, 0.14);

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --sh-2: 0 1px 3px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.40);
    --sh-phone: 0 2px 6px rgba(0, 0, 0, 0.45),
                0 24px 60px rgba(0, 0, 0, 0.55),
                0 60px 120px rgba(0, 0, 0, 0.35);
  }
}

/* ============================================================
   MAKIETA POZA MOTYWEM

   Wnętrze telefonu, okna przeglądarki i miniatur to PROJEKT KLIENTA,
   nie interfejs narzędzia. Placeholdery i chrom ekranu korzystają z tych
   samych tokenów co panel, więc bez tego bloku ciemny motyw przemalowałby
   makietę: białe przyciski na białym tle, jasne linie na jasnym.

   Tokeny wracają tu do wartości z motywu jasnego — i tak zostaje.
   ============================================================ */
.phone__screen,
.browser__page,
.thumb__canvas {
  --c-ink:           #121314;
  --c-ink-soft:      #55575d;
  --c-ink-muted:     #a5a5a5;
  --c-ink-faint:     #b6b8be;

  --c-line:          #e1e1e1;
  --c-line-strong:   #d5d5d2;

  --c-surface:       #ffffff;
  --c-surface-sunk:  #fbfbfa;
  --c-surface-hover: #f7f7f6;
  /* Karty (ekran, warstwa, wariant) — w jasnym motywie zlewają się
     z kolumną, w ciemnym dostają własny, jaśniejszy odcień. */
  --c-card:          var(--c-surface);
  /* Pola formularza są o stopień jaśniejsze od karty, na której leżą —
     w ciemnym motywie to jedyne, co je z niej wydziela. */
  --c-field:         var(--c-surface);
  /* Obrys pola z kursorem. W jasnym motywie akcent (prawie czerń),
     w ciemnym stonowana jasna linia — biały obrys o podwójnej grubości
     był jaśniejszy od wszystkiego dookoła. */
  --c-field-focus:   var(--c-accent);
  --c-field-focus-ring: 0 0 0 1px var(--c-accent);
  /* Zaznaczony element (karta, wątek, projekt): w jasnym motywie obrys
     akcentem, w ciemnym sama linia — biały pierścień na ciemnym tle
     przyciągał wzrok mocniej niż treść, którą oznaczał. */
  --c-selected-border: var(--c-accent);
  --c-selected-ring:   0 0 0 1px var(--c-accent);
  /* Wybrana karta: w jasnym motywie obrys akcentem, w ciemnym jaśniejsze
     tło — biała obwódka na ciemnym krzyczała bardziej niż sama treść. */
  --c-card-active:   var(--c-card);
  --c-canvas:        #f4f4f3;

  --c-ph-fill:       #e4e4e1;
  --c-ph-fill-soft:  #ececea;
  --c-ph-line:       #dcdcd9;
}