/* Dewellux: system projektowy, wersja 2 (S006, 13 października 2026).
   Kierunek na prośbę Darka: szata graficzna w stylu Localo (Nunito, jasne
   szaroniebieskie tło, białe karty z dużym zaokrągleniem, niebieski akcent,
   przyciski i pola w kształcie pigułek, odznaki pozycji w kolorach). Marka,
   logo i ilustracje własne Dewellux. Komponenty w kokpit.css wyłącznie
   tokenami stąd. Zero długich myślników w kodzie i treści.
*/

/* ---------- Tokeny: motyw jasny ---------- */
:root{
  --font-display: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;

  --bg:        #F4F6FB;
  --surface:   #FFFFFF;
  --surface-2: #EEF1FA;
  --ink:       #14162B;
  --ink-soft:  #4A4F66;
  --muted:     #6B7089;
  --line:      #E3E7F2;
  --line-soft: #EDF0F7;

  /* Akcent: niebieski (kontrast białego tekstu na akcencie 5,2:1) */
  --accent:      #3D5EF0;
  --accent-soft: #2F4FDB;
  --accent-tlo:  #EAEFFF;
  --on-accent:   #FFFFFF;

  --ok:     #0E7434;
  --warn:   #B35A00;
  --danger: #C62828;

  /* Odznaki pozycji (tekst na jasnym tle) */
  --poz-top-tlo:    #E3F6EA; --poz-top:    #11793A;
  --poz-srodek-tlo: #FFF0DD; --poz-srodek: #A35200;
  --poz-dol-tlo:    #FDE8E8; --poz-dol:    #B42323;
  --poz-brak-tlo:   #EEF0F5; --poz-brak:   #50566E;

  /* Mapa ciepła i znaczniki na mapie: 1-3, 4-10, 11-20, brak, błąd */
  --mapa-top:    #4CC97A;
  --mapa-srodek: #FFC24D;
  --mapa-dol:    #FF8A5C;
  --mapa-brak:   #E3E6EF;
  --mapa-blad:   #C9CDD9;
  --on-mapa:     #14162B;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --fs-xs: 0.78rem; --fs-sm: 0.88rem; --fs-base: 1rem;
  --fs-lg: 1.2rem; --fs-xl: 1.4rem; --fs-2xl: 1.75rem; --fs-3xl: 2.1rem;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --cien: 0 1px 2px rgb(20 22 43 / 0.04);
  --ring: rgb(61 94 240 / 0.45);
  --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300;
  --z-modal: 400; --z-toast: 500;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:        #0E1120;
    --surface:   #161A2D;
    --surface-2: #1F2440;
    --ink:       #EEF0F8;
    --ink-soft:  #B7BCD3;
    --muted:     #8C92AB;
    --line:      #2A3050;
    --line-soft: #222842;
    --accent:      #8AA2FF;
    --accent-soft: #A8BAFF;
    --accent-tlo:  #232B52;
    --on-accent:   #0B0F22;
    --ok:     #5DD68D;
    --warn:   #FFB45C;
    --danger: #FF7B7B;
    --poz-top-tlo:    #143524; --poz-top:    #6FE09B;
    --poz-srodek-tlo: #3A2A12; --poz-srodek: #FFC170;
    --poz-dol-tlo:    #3D1A1F; --poz-dol:    #FF9C9C;
    --poz-brak-tlo:   #232842; --poz-brak:   #B7BCD3;
    --mapa-top:    #3FB36B;
    --mapa-srodek: #E0A93A;
    --mapa-dol:    #E5774D;
    --mapa-brak:   #2A3050;
    --mapa-blad:   #3A4060;
    --on-mapa:     #0B0F22;
    --cien: none;
    --ring: rgb(138 162 255 / 0.55);
  }
}

:root[data-theme="dark"]{
  --bg:        #0E1120;
  --surface:   #161A2D;
  --surface-2: #1F2440;
  --ink:       #EEF0F8;
  --ink-soft:  #B7BCD3;
  --muted:     #8C92AB;
  --line:      #2A3050;
  --line-soft: #222842;
  --accent:      #8AA2FF;
  --accent-soft: #A8BAFF;
  --accent-tlo:  #232B52;
  --on-accent:   #0B0F22;
  --ok:     #5DD68D;
  --warn:   #FFB45C;
  --danger: #FF7B7B;
  --poz-top-tlo:    #143524; --poz-top:    #6FE09B;
  --poz-srodek-tlo: #3A2A12; --poz-srodek: #FFC170;
  --poz-dol-tlo:    #3D1A1F; --poz-dol:    #FF9C9C;
  --poz-brak-tlo:   #232842; --poz-brak:   #B7BCD3;
  --mapa-top:    #3FB36B;
  --mapa-srodek: #E0A93A;
  --mapa-dol:    #E5774D;
  --mapa-brak:   #2A3050;
  --mapa-blad:   #3A4060;
  --on-mapa:     #0B0F22;
  --cien: none;
  --ring: rgb(138 162 255 / 0.55);
}

/* ---------- Baza ---------- */
*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family: var(--font-display); line-height: 1.2; text-wrap: balance; margin: 0; font-weight: 800; }
h1{ font-size: var(--fs-3xl); letter-spacing: -0.01em; }
h2{ font-size: var(--fs-xl); }
h3{ font-size: var(--fs-lg); font-weight: 700; }
.measure{ max-width: 65ch; }
a{ color: var(--accent); text-underline-offset: 2px; }
a:hover{ color: var(--accent-soft); }
img{ max-width: 100%; height: auto; }

button, input, select, textarea{ font: inherit; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
button{ cursor: pointer; background: none; border-color: transparent; }
input, select, textarea{ background: var(--surface); padding: 8px 16px; }
::placeholder{ color: var(--muted); opacity: 1; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.scroll-x{ overflow-x: auto; }
.tnum{ font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
     transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

:root{ --kreska: 1px; --kreska-2: 2px; }
:root{ --mapa-top-poswiata: rgb(76 201 122 / 0.2); --mapa-dol-poswiata: rgb(255 138 92 / 0.2); }