/*
 * 2DR3 - tokeny wygladu stron klienta (#34, Stylista).
 *
 * JEDNO zrodlo prawdy dla kolorow, typografii, odstepow, promieni i cieni. Kazda strona klienta ma ladowac
 * ten plik PRZED motyw.css. Zadnych wartosci kolorow poza tym plikiem (komponenty biora tylko var(--...)).
 *
 * MOTYW: trzy stany wybierane przelacznikiem w naglowku i zapamietywane lokalnie (patrz motyw.js):
 *   system  - brak atrybutu data-theme na <html>: decyduje prefers-color-scheme
 *   jasny   - <html data-theme="light">
 *   ciemny  - <html data-theme="dark">
 * Dlatego paleta ciemna wystepuje DWA razy (media query dla "system" i atrybut dla recznego wyboru) - CSS nie ma
 * jeszcze wygodnego wspolnego bloku. Jesli zmieniasz kolor ciemny, zmien w obu miejscach (kontrola: tests/kontrast.py).
 *
 * KONTRAST: pary tekst/tlo >= 4.5:1 (WCAG AA), elementy interfejsu i obwodka focus >= 3:1; sprawdzane skryptem
 * makiety/kontrast.py dla obu motywow.
 *
 * SPOJNOSC Z E-MAILAMI (src/mailtpl.js): granat #0b1220 (tlo ciemne i naglowek maila), blekit #38bdf8 (akcent w ciemnym),
 * #0369a1 (przycisk i link w jasnym), indygo #4338ca (plakietki wiadomosci), zielen/bursztyn jak plakietki maila.
 */

:root {
  color-scheme: light;

  /* ---- kolory: motyw jasny (domyslny) ---- */
  --c-bg:            #f3f6fb;   /* tlo strony */
  --c-bg-sunken:     #e9eef6;   /* pasek boczny, pola zaglebione */
  --c-surface:       #ffffff;   /* karty */
  --c-surface-2:     #f6f8fc;   /* wiersze, panele wewnatrz kart */
  --c-border:        #dde4ee;   /* delikatne linie */
  --c-border-strong: #7b8aa3;   /* obwodka pol formularza i kontrolek (3:1 wobec tla) */
  --c-text:          #0f1c33;
  --c-text-2:        #4a5970;   /* tekst pomocniczy */
  --c-text-3:        #5b6a82;   /* opisy, metryczki (nadal >= 4.5:1) */
  --c-accent:        #0369a1;   /* linki, aktywne pozycje */
  --c-accent-solid:  #0369a1;   /* tlo przycisku glownego */
  --c-on-accent:     #ffffff;   /* napis na przycisku glownym */
  --c-accent-soft:   #e3f1fa;   /* tlo aktywnej pozycji, tlo plakietki informacyjnej */
  --c-focus:         #0284c7;   /* obwodka klawiatury */
  --c-ok:            #13763a;  --c-ok-soft:   #e6f6ec;
  --c-warn:          #92560a;  --c-warn-soft: #fdf1dc;
  --c-bad:           #b42318;  --c-bad-soft:  #fdebea;
  --c-brand-2:       #4338ca;  --c-brand-2-soft: #edecfd;   /* indygo: plakietki planu i wiadomosci */
  --c-overlay:       rgba(15, 28, 51, .45);
  --c-thumb:         #dbe6f3;   /* plytka miniatury (bez zdjecia) */
  --c-thumb-ink:     #5b7396;

  /* ---- cienie (w ciemnym motywie zastepuja je obwodki) ---- */
  --shadow-1: 0 1px 2px rgba(15, 28, 51, .06), 0 1px 3px rgba(15, 28, 51, .06);
  --shadow-2: 0 8px 24px rgba(15, 28, 51, .14), 0 2px 6px rgba(15, 28, 51, .08);

  /* ---- typografia ---- */
  --f-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;
  --t-xs:   .75rem;      /* 12 px - plakietki, metryczki */
  --t-sm:   .8125rem;    /* 13 px - opisy */
  --t-base: .9375rem;    /* 15 px - tekst podstawowy */
  --t-md:   1.0625rem;   /* 17 px - tytuly kart */
  --t-lg:   1.25rem;     /* 20 px */
  --t-xl:   1.625rem;    /* 26 px - tytul strony */
  --lh-tight: 1.25;
  --lh-base:  1.55;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ---- odstepy (siatka 4 px), promienie, ruch ---- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --r-sm: 8px;    --r-md: 12px;   --r-lg: 16px;   --r-pill: 999px;
  --dur: 150ms;
  --ease: cubic-bezier(.2, .6, .2, 1);
  --hit: 44px;            /* minimalny cel dotyku */
  --sidebar-w: 272px;
  --content-w: 920px;
}

/* ---- motyw ciemny: "system" (brak atrybutu) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg:            #0b1220;
    --c-bg-sunken:     #080e1a;
    --c-surface:       #121b2f;
    --c-surface-2:     #17223a;
    --c-border:        #243350;
    --c-border-strong: #5b6f93;
    --c-text:          #e8eefc;
    --c-text-2:        #a9b7d1;
    --c-text-3:        #8d9dbb;
    --c-accent:        #38bdf8;
    --c-accent-solid:  #38bdf8;
    --c-on-accent:     #06283d;
    --c-accent-soft:   #0f2a40;
    --c-focus:         #7dd3fc;
    --c-ok:            #4ade80;  --c-ok-soft:   #0f2a1d;
    --c-warn:          #fbbf24;  --c-warn-soft: #2c2208;
    --c-bad:           #f87171;  --c-bad-soft:  #321414;
    --c-brand-2:       #a5b4fc;  --c-brand-2-soft: #1e2150;
    --c-overlay:       rgba(3, 7, 15, .66);
    --c-thumb:         #1b2a45;
    --c-thumb-ink:     #6f88b3;
    --shadow-1: 0 0 0 1px rgba(255, 255, 255, .02);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, .55);
  }
}

/* ---- motyw ciemny: wybor reczny ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg:            #0b1220;
  --c-bg-sunken:     #080e1a;
  --c-surface:       #121b2f;
  --c-surface-2:     #17223a;
  --c-border:        #243350;
  --c-border-strong: #5b6f93;
  --c-text:          #e8eefc;
  --c-text-2:        #a9b7d1;
  --c-text-3:        #8d9dbb;
  --c-accent:        #38bdf8;
  --c-accent-solid:  #38bdf8;
  --c-on-accent:     #06283d;
  --c-accent-soft:   #0f2a40;
  --c-focus:         #7dd3fc;
  --c-ok:            #4ade80;  --c-ok-soft:   #0f2a1d;
  --c-warn:          #fbbf24;  --c-warn-soft: #2c2208;
  --c-bad:           #f87171;  --c-bad-soft:  #321414;
  --c-brand-2:       #a5b4fc;  --c-brand-2-soft: #1e2150;
  --c-overlay:       rgba(3, 7, 15, .66);
  --c-thumb:         #1b2a45;
  --c-thumb-ink:     #6f88b3;
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, .02);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, .55);
}

/* ---- ruch: kto prosi system o mniej animacji, nie dostaje zadnych ---- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}