/* ═══════════════════════════════════════════════════════════════════════════
   DYSK — Gmina Latowicz | Design System
   ───────────────────────────────────────────────────────────────────────────
   Plik jest "źródłem prawdy" dla całej warstwy wizualnej. Wszystkie moduły
   (panel.css, login.php, index.html, upload.html) importują zmienne stąd.
   Zmiana koloru marki = jedna linia w :root.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Typografia — fonty self-hosted (zgodne z CSP, bez wycieku IP do Google) ──
   Poppins   → nagłówki, CTA, logo (geometryczny, profesjonalny)
   Roboto    → całe UI / body (uniwersalny, czytelny)
   Roboto Condensed → tabele, metadane, etykiety (kompaktowy)
   Subsety: latin + latin-ext (pełne wsparcie polskich znaków).          */
@import url('fonts/fonts.css?v=2');

:root {
  /* ── KOLORY MARKI (surowe) ── */
  --brand-primary:        #312A74;  /* ciemny fiolet — główny kolor marki */
  --brand-primary-rgb:    49, 42, 116;
  --brand-accent:         #fbbc33;  /* żółty — akcent, CTA */
  --brand-accent-rgb:     251, 188, 51;
  --brand-ink:            #1d1d1b;  /* prawie-czarny — tekst główny */
  --brand-ink-rgb:        29, 29, 27;
  --brand-paper:          #ffffff;  /* biel — tło główne */
  --brand-paper-rgb:      255, 255, 255;

  /* ── SKALA FIOLETU (z brand-primary) ── */
  --primary-50:  #f4f3fa;  /* najjaśniejszy odcień — tła selekcji */
  --primary-100: #e8e6f2;  /* jasny — hover na jasnym tle */
  --primary-200: #c9c5e2;
  --primary-300: #9b95c8;
  --primary-400: #6d64a7;
  --primary-500: #312A74;  /* = brand-primary */
  --primary-600: #241F55;  /* hover na primary button */
  --primary-700: #1a1740;
  --primary-800: #120e2a;

  /* ── SKALA ŻÓŁTEGO ── */
  --accent-50:  #fef9e8;
  --accent-100: #fdf0c2;
  --accent-200: #fce089;
  --accent-300: #fbd057;
  --accent-400: #fbc038;
  --accent-500: #fbbc33;  /* = brand-accent */
  --accent-600: #e5a520;  /* hover */
  --accent-700: #b37f18;

  /* ── SKALA SZAROŚCI (neutralna, oparta o brand-ink) ── */
  --gray-50:  #f8f9fa;   /* tło panelu / kart drugiego planu */
  --gray-100: #f1f3f5;   /* tło sekcji */
  --gray-200: #e9ecef;   /* border light */
  --gray-300: #dee2e6;   /* border regular */
  --gray-400: #ced4da;   /* border strong */
  --gray-500: #adb5bd;   /* muted icon */
  --gray-600: #6c757d;   /* muted text */
  --gray-700: #495057;   /* secondary text */
  --gray-800: #343a40;
  --gray-900: #1d1d1b;   /* = brand-ink */

  /* ── KOLORY SEMANTYCZNE ── */
  --danger:     #dc2626;
  --danger-bg:  #fee2e2;
  --danger-rgb: 220, 38, 38;

  --success:    #16a34a;
  --success-bg: #dcfce7;
  --success-rgb: 22, 163, 74;

  --warning:    #f59e0b;
  --warning-bg: #fef3c7;
  --warning-rgb: 245, 158, 11;

  --info:       #0ea5e9;
  --info-bg:    #e0f2fe;

  /* ── ROLE W UI (alias — używaj tych, nie surowych) ── */
  --bg:           var(--brand-paper);            /* tło głównej warstwy */
  --bg-soft:      var(--gray-50);                /* tło sekcji drugoplanowych */
  --bg-muted:     var(--gray-100);               /* tło najbardziej wyciszone */
  --bg-hover:     var(--gray-100);               /* hover dla przezroczystych przycisków */
  --bg-selected:  var(--primary-50);             /* zaznaczone/aktywne */

  --surface:      var(--brand-paper);            /* karta, modal */
  --surface-alt:  var(--gray-50);                /* karta drugoplanowa */

  --text:         var(--brand-ink);              /* tekst główny */
  --text-muted:   var(--gray-600);               /* tekst drugorzędny */
  --text-faint:   var(--gray-500);               /* tekst wyciszony */
  --text-on-primary: #ffffff;                    /* tekst na tle primary */
  --text-on-accent:  var(--brand-primary);       /* tekst na tle accent (żółte tło) */

  --border:        var(--gray-200);              /* standard border */
  --border-strong: var(--gray-300);              /* mocniejszy border */
  --border-focus:  var(--brand-primary);         /* focus ring */

  --primary:        var(--brand-primary);
  --primary-hover:  var(--primary-600);
  --primary-ghost:  rgba(var(--brand-primary-rgb), 0.08);
  --primary-ghost-hover: rgba(var(--brand-primary-rgb), 0.14);

  --accent:         var(--brand-accent);
  --accent-hover:   var(--accent-600);
  --accent-ghost:   rgba(var(--brand-accent-rgb), 0.14);
  --accent-ghost-hover: rgba(var(--brand-accent-rgb), 0.22);

  /* Kompat: poprzedni kod używa --muted zamiast --text-muted */
  --muted: var(--text-muted);
  --card:  var(--surface);
  --focus: var(--brand-accent);

  /* ── CIENIE (delikatne, dla jasnego motywu) ── */
  --shadow-xs:   0 1px 2px rgba(var(--brand-ink-rgb), 0.04);
  --shadow-sm:   0 2px 6px rgba(var(--brand-ink-rgb), 0.06);
  --shadow-md:   0 4px 14px rgba(var(--brand-ink-rgb), 0.08);
  --shadow-lg:   0 12px 32px rgba(var(--brand-ink-rgb), 0.10);
  --shadow-xl:   0 24px 60px rgba(var(--brand-ink-rgb), 0.14);
  --shadow-focus: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.18);
  /* Kompat */
  --shadow: var(--shadow-lg);

  /* ── KSZTAŁTY ── */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --radius: var(--radius-xl); /* kompat */

  /* ── TYPOGRAFIA ── */
  --font-sans:    'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono:    'Roboto Condensed', ui-monospace, 'SFMono-Regular', monospace;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.82rem;   /* ~13 */
  --fs-base: 0.92rem;   /* ~15 */
  --fs-md:   1rem;      /* 16 */
  --fs-lg:   1.15rem;   /* ~18 */
  --fs-xl:   1.4rem;    /* ~22 */
  --fs-2xl:  1.75rem;   /* 28 */

  --lh-tight:  1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  /* ── LAYOUT ── */
  --hdr: 60px;
  --sidebar-w: 252px;
  --infopanel-w: 300px;

  /* ── PRZEJŚCIA ── */
  --t-fast: 120ms ease;
  --t-normal: 180ms ease;
  --t-slow: 280ms ease;
}

/* ── RESET + DEFAULTS ── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--text);
  letter-spacing: -0.01em;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--primary-hover); }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  color: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Focus ring — spójny na całej aplikacji */
:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: rgba(var(--brand-primary-rgb), 0.18);
  color: var(--text);
}

/* Scrollbar — delikatny w jasnym motywie */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }