/*
 * Warstwa tokenow projektowych (UX-DR1).
 *
 * JEDYNE miejsce w calym froncie, w ktorym wolno zapisac wartosc wizualna wprost.
 * Kazda liczba i kazdy kolor pochodzi z frontmattera `docs/kike/DESIGN.md` - zgodnosc
 * 1:1 jest bramka w `tests/frontends/test_design_tokens.py`, a budzety kontrastu
 * sprawdza `tests/frontends/test_design_tokens_contrast.py` (UX-DR2).
 *
 * Izba nie ma jeszcze brandingu: warstwa marki ma dac sie nadpisac bez ruszania
 * semantyki. Dlatego nazwy tokenow mowia o roli (surface, ink, status), nie o kolorze.
 */

:root {
  /* ── Powierzchnie i atrament ─────────────────────────────────────────── */
  --bsa-color-surface-page: #F6F7F9;
  --bsa-color-surface-raised: #FFFFFF;
  --bsa-color-surface-sunken: #EDEFF3;
  --bsa-color-ink-primary: #1A2129;
  --bsa-color-ink-secondary: #4A5561;
  --bsa-color-ink-muted: #5F6A78;

  /* Obrysy. `border` i `border-strong` sa wylacznie separatorami dekoracyjnymi;
     jedynym dozwolonym obrysem komponentu interaktywnego jest `border-input`
     (>= 3:1 wobec kazdej z trzech powierzchni - WCAG 1.4.11). */
  --bsa-color-border: #D8DDE3;
  --bsa-color-border-strong: #AEB6BF;
  --bsa-color-border-input: #767F8B;

  /* ── Akcja i fokus ───────────────────────────────────────────────────── */
  --bsa-color-primary: #155EA8;
  --bsa-color-primary-hover: #0F4C8A;
  --bsa-color-primary-foreground: #FFFFFF;
  --bsa-color-focus-ring: #1D6FC2;

  /* ── Szesc semantycznych par statusowych ─────────────────────────────── */
  --bsa-color-status-info: #14639E;
  --bsa-color-status-info-bg: #E3EEF9;
  --bsa-color-status-success: #1E7B34;
  --bsa-color-status-success-bg: #E4F3E8;
  --bsa-color-status-warning: #8A5A00;
  --bsa-color-status-warning-bg: #FCF0D7;
  --bsa-color-status-danger: #B3261E;
  --bsa-color-status-danger-bg: #FBE7E5;
  --bsa-color-status-neutral: #5A6472;
  --bsa-color-status-neutral-bg: #ECEEF1;
  /* Zawieszenie zegara jest stanem prawnie donioslym, nie alarmem - stad odrebna
     para, celowo rozna od `warning` (FR-074). */
  --bsa-color-status-suspended: #6B4FA1;
  --bsa-color-status-suspended-bg: #EFEAF8;

  /* ── Elewacja: cien wylacznie dla warstw plywajacych ──────────────────── */
  --bsa-shadow-floating: 0 4px 16px rgba(26, 33, 41, 0.12);

  /* ── Rodziny pisma ───────────────────────────────────────────────────────
     Obie open source i wymienne przy reskinie. Pliki webfontow beda serwowane
     z wlasnego hosta (NFR-12: zero zewnetrznych CDN-ow); do czasu ich dolozenia
     dziala zapas systemowy - patrz docs/rozbieznosci.md R-043. */
  --bsa-font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --bsa-font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;

  /* ── Rampa typograficzna ─────────────────────────────────────────────── */
  --bsa-type-page-title-size: 20px;
  --bsa-type-page-title-weight: 600;
  --bsa-type-page-title-line: 1.3;

  --bsa-type-section-title-size: 16px;
  --bsa-type-section-title-weight: 600;
  --bsa-type-section-title-line: 1.4;

  --bsa-type-body-size: 14px;
  --bsa-type-body-weight: 400;
  --bsa-type-body-line: 1.5;

  --bsa-type-label-size: 12px;
  --bsa-type-label-weight: 500;
  --bsa-type-label-line: 1.4;
  --bsa-type-label-tracking: 0.02em;

  --bsa-type-caption-size: 12px;
  --bsa-type-caption-weight: 400;
  --bsa-type-caption-line: 1.4;

  /* Wszystkie identyfikatory i wartosci maszynowe: ID Lacza, osdId/okId,
     kody odmow, stemple, odczyty zegarow. */
  --bsa-type-data-mono-size: 13px;
  --bsa-type-data-mono-weight: 400;
  --bsa-type-data-mono-line: 1.5;

  --bsa-type-kpi-value-size: 28px;
  --bsa-type-kpi-value-weight: 600;
  --bsa-type-kpi-value-line: 1.2;

  /* ── Siatka odstepow: skala czteropunktowa ───────────────────────────── */
  --bsa-space-1: 4px;
  --bsa-space-2: 8px;
  --bsa-space-3: 12px;
  --bsa-space-4: 16px;
  --bsa-space-5: 20px;
  --bsa-space-6: 24px;
  --bsa-space-8: 32px;
  --bsa-space-gutter: 24px;
  --bsa-space-page-margin: 32px;
  /* Wysokosci wierszy sa wartosciami min-height, nie height: tresc musi przezyc
     wymuszone odstepy tekstu z WCAG 1.4.12 bez obcinania. */
  --bsa-space-density-row: 40px;
  --bsa-space-density-row-compact: 32px;
  --bsa-space-touch-target-min: 24px;

  /* ── Promienie: ostro i narzedziowo ──────────────────────────────────── */
  --bsa-radius-sm: 2px;
  --bsa-radius-md: 4px;
  --bsa-radius-lg: 6px;
  --bsa-radius-full: 9999px;

  /* ── Wskaznik fokusu (komponent `focus-indicator`) ────────────────────
     Obrys 2 px w kolorze focus-ring z 2 px odstepu od krawedzi komponentu.
     Kontrast liczony do powierzchni POD SPODEM, nie do wypelnienia - dzieki
     odstepowi ring jest widoczny takze na wypelnionym `button-primary`. */
  --bsa-focus-ring-width: 2px;
  --bsa-focus-ring-offset: 2px;

  /* ── Tokeny ukladu powloki ────────────────────────────────────────────
     Wyprowadzone ze skali czteropunktowej i z DESIGN.md ("Uklad i odstepy"),
     zebrane tutaj, zeby zaden arkusz komponentu nie zapisywal wymiaru wprost. */
  --bsa-layout-side-nav-width: 240px;
  /* Stan zwiniety do ikon ponizej 1280 px: 24 + 32 = 56 px, nadal >= celu 24x24. */
  --bsa-layout-side-nav-rail: calc(var(--bsa-space-6) + var(--bsa-space-8));
  --bsa-layout-form-max-width: 640px;
  /* Szerokosc dialogu potwierdzenia (DESIGN.md `dialog`: 480 px dla potwierdzen,
     640 px dla formularzy kontekstowych - te drugie biora `form-max-width`). */
  --bsa-layout-dialog-width: 480px;
  --bsa-layout-control-height: 32px;
  --bsa-layout-hairline: 1px;
  --bsa-layout-accent-bar: 3px;
  /* Obrys kreskowany strefy wgrania pliku - DESIGN.md, komponent `file-dropzone`
     ("obrys kreskowany 2px"). Osobny token, bo nie jest to ani wlosowa linia,
     ani wskaznik fokusu. */
  --bsa-layout-dashed-border: 2px;
  /* Minimalna wysokosc kontenera mapy zasiegow (Story 2.7). Kontener bez wysokosci
     nie rysuje sie w ogole, a wartosc jest wymiarem ukladu - wiec zyje tutaj, a nie
     w arkuszu komponentu. */
  --bsa-layout-map-min-height: 320px;
}