/* Kwadrans.map 3.0 „Pracownia” · warstwa gęstości nad tokens.css (PROJEKT-3 §4.6; SPEC-UX-v2 §12, §17 pkt 5),
 * włączana atrybutem <html data-density="pro">. Właściciel: WP-S1-A (przejęte od szkicu WP-UX).
 *
 * Dwa poziomy gęstości – <html data-view="simple|detailed"> (zmiana kontraktu §17 pkt 5, zatwierdzona na CP-1):
 * - Widok prosty: UI 14/20, kontrolki 36 (małe 32), wiersze 36 (dwuliniowe 52), nagłówki paneli 48, pasek górny 48,
 *   paleta 44, dopełnienie paneli 16, odstęp grup 24, promień kontrolki 8;
 * - Widok szczegółowy: UI 13/18, kontrolki 32 (28), wiersze 28 (44), nagłówki 40, pasek górny 44, paleta 40,
 *   dopełnienie 12, odstęp 16, promień 6.
 * Wartości bazowe poniżej (bez data-view) to Widok szczegółowy – zgodnie z §4.6 kontraktu dla stron spoza pracowni.
 *
 * Zasady:
 * - kolory marki biorą się wyłącznie z tokens.css (wygenerowanego z brand-core.json); tutaj są tylko role kolorów gęstego
 *   interfejsu (chrom, panel, separator, wiersz zaznaczony) jako aliasy tokenów marki, bez nowych wartości szesnastkowych;
 * - typografia: Inter w UI, Atkinson w rozmowie asystenta i w treści raportu, cyfry tabelaryczne;
 * - kontrast (tekst ≥ 4,5 : 1, granice kontrolek ≥ 3 : 1) liczony skryptem dla obu motywów – tabela w docs/UX-PRACOWNIA.md §7;
 * - ruch: czasy z tokenów marki (--dur-*, --ease-*), skala czasu 1 : 600; tryb ruchu ustawia <html data-motion>:
 *   full (pełny), reduced (ograniczony: przemieszczenia od razu, przenikania ≤ 150 ms), off (wyłączony: wszystko od razu).
 */
:root[data-density="pro"] {
  /* typografia */
  --pro-fs-ui: 13px;
  --pro-lh-ui: 18px;
  --pro-fs-body: 14px;
  --pro-lh-body: 20px;
  --pro-fs-cap: 12px;
  --pro-lh-cap: 16px;
  --pro-fs-h1: 15px;
  --pro-lh-h1: 20px;
  --pro-fs-h2: 13px;
  --pro-lh-h2: 18px;
  --pro-fs-num: 16px;
  --pro-lh-num: 22px;
  --pro-fs-chat: 14px;
  --pro-lh-chat: 21px;
  --pro-fw-h: 600;
  --pro-fw-ui: 450;
  --pro-tr-ui: -0.003em;
  --pro-num: tabular-nums;

  /* rozmiary kontrolek i regionów (§4.2, §4.6) */
  --pro-ctl: 32px;
  --pro-ctl-sm: 28px;
  --pro-hit: 24px;
  --pro-icon: 16px;
  --pro-icon-lg: 20px;
  --pro-row: 28px;
  --pro-row2: 44px;
  --pro-head: 40px;
  --pro-tabs: 32px;
  --pro-top: 44px;
  --pro-status: 24px;
  --pro-palette: 40px;
  --pro-dock: 288px;
  --pro-dock-min: 264px;
  --pro-dock-max: 320px;
  --pro-dock-rail: 44px;
  --pro-right: 356px;
  --pro-right-min: 336px;
  --pro-right-max: 380px;
  --pro-right-rail: 56px;
  --pro-drawer: 240px;
  --pro-drawer-max: 50vh;

  /* odstępy i promienie */
  --pro-s1: 4px;
  --pro-s2: 8px;
  --pro-s3: 12px;
  --pro-s4: 16px;
  --pro-s5: 24px;
  --pro-s6: 32px;
  --pro-pad: 12px;
  --pro-gap: 16px;
  --pro-r-sm: 6px;
  --pro-r: 6px;

  /* cienie: minimalne (gęste narzędzie – granice robią separatory, nie cienie) */
  --pro-sh-1: 0 1px 2px rgba(42, 35, 32, .08);
  --pro-sh-pop: 0 1px 2px rgba(42, 35, 32, .08), 0 8px 24px -8px rgba(42, 35, 32, .24);

  /* fokus: 2 px pierścień w kolorze --focus (wiśnia; w ciemnym motywie jasna wiśnia) */
  --pro-focus-w: 2px;
  --pro-focus-gap: 1px;

  /* role kolorów gęstego UI (aliasy tokenów marki) */
  --pro-chrome: var(--surface-2);   /* pasek górny, pasek stanu, paski zakładek */
  --pro-panel: var(--surface);      /* tło paneli */
  --pro-sunken: var(--bg);          /* tło list i tabel w panelach */
  --pro-sep: var(--line);           /* separatory regionów */
  --pro-sep-strong: var(--line-2);  /* krawędzie aktywnych elementów */
  --pro-hover: var(--fill);
  --pro-selected: var(--fill-2);    /* wiersz zaznaczony: tło + obrys grafitowy (zaznaczenie = grafit + poświata) */
  --pro-selected-edge: var(--ink);
  --pro-text: var(--ink);
  --pro-text-2: var(--ink-2);
  --pro-text-3: var(--ink-3);       /* podpisy 12 px – kontrast sprawdzony na --pro-panel, --pro-chrome, --pro-hover */
  --pro-ctl-edge: var(--ctl);       /* granice kontrolek ≥ 3 : 1 */
  --pro-active: var(--ink);         /* aktywne narzędzie / zakładka: grafit, nie wiśnia */
  --pro-on-active: var(--on-ink);
  --pro-primary: var(--cherry);     /* wiśnia tylko: działanie główne, propozycja, zysk, marka */
  --pro-on-primary: var(--on-cherry);

  /* ruch pracowni (§4.8) – z tokenów marki; własne tylko tam, gdzie §4.8 podaje przedział */
  --pro-dur-panel: var(--dur-medium);       /* dok, szuflada, prawa kolumna: 200–250 ms */
  --pro-dur-fade: var(--dur-short);          /* przenikanie treści Inspektora */
  --pro-dur-map-swap: 400ms;                 /* interpolacja kolorów kartogramu przy zmianie scenariusza: 300–500 ms */
  --pro-dur-drop: var(--dur-long);           /* opadanie znacznika usługi */
  --pro-ease-panel: var(--ease-standard);
  --pro-time-scale: 600;                     /* skala czasu marki 1 : 600 (kwadrans = 1,5 s) */
}

/* ─────────────── dwa poziomy gęstości (SPEC-UX-v2 §12) ─────────────── */
:root[data-density="pro"][data-view="simple"] {
  --pro-fs-ui: 14px; --pro-lh-ui: 20px;
  --pro-fs-body: 14px; --pro-lh-body: 21px;
  --pro-fs-cap: 12px; --pro-lh-cap: 16px;
  --pro-fs-h1: 16px; --pro-lh-h1: 22px;
  --pro-fs-h2: 14px; --pro-lh-h2: 20px;
  --pro-fs-num: 20px; --pro-lh-num: 26px;
  --pro-fs-chat: 15px; --pro-lh-chat: 22px;
  --pro-ctl: 36px; --pro-ctl-sm: 32px;
  --pro-row: 36px; --pro-row2: 52px;
  --pro-head: 48px; --pro-top: 48px; --pro-palette: 44px;
  --pro-pad: 16px; --pro-gap: 24px;
  --pro-r: 8px;
}
:root[data-density="pro"][data-view="detailed"] {
  --pro-fs-ui: 13px; --pro-lh-ui: 18px;
  --pro-fs-body: 14px; --pro-lh-body: 20px;
  --pro-fs-cap: 12px; --pro-lh-cap: 16px;
  --pro-fs-h1: 15px; --pro-lh-h1: 20px;
  --pro-fs-h2: 13px; --pro-lh-h2: 18px;
  --pro-fs-num: 16px; --pro-lh-num: 22px;
  --pro-fs-chat: 14px; --pro-lh-chat: 21px;
  --pro-ctl: 32px; --pro-ctl-sm: 28px;
  --pro-row: 28px; --pro-row2: 44px;
  --pro-head: 40px; --pro-top: 44px; --pro-palette: 40px;
  --pro-pad: 12px; --pro-gap: 16px;
  --pro-r: 6px;
}

/* tryb ruchu: ograniczony – przemieszczenia od razu, przenikania ≤ 150 ms (§4.8 „Reduced motion”) */
:root[data-density="pro"][data-motion="reduced"] {
  --dur-micro: 150ms;
  --dur-short: 150ms;
  --dur-medium: 150ms;
  --dur-long: 150ms;
  --dur-quarter: 150ms;
  --pro-dur-panel: 0ms;
  --pro-dur-fade: 150ms;
  --pro-dur-map-swap: 150ms;
  --pro-dur-drop: 0ms;
}
/* tryb ruchu: wyłączony – wszystko od razu */
:root[data-density="pro"][data-motion="off"] {
  --dur-micro: 0ms;
  --dur-short: 0ms;
  --dur-medium: 0ms;
  --dur-long: 0ms;
  --dur-quarter: 0ms;
  --pro-dur-panel: 0ms;
  --pro-dur-fade: 0ms;
  --pro-dur-map-swap: 0ms;
  --pro-dur-drop: 0ms;
}
/* pełny ruch wybrany świadomie mimo systemowego „ogranicz ruch” – przywraca czasy marki (tokens.css zeruje je w @media) */
:root[data-density="pro"][data-motion="full"] {
  --dur-micro: 150ms;
  --dur-short: 200ms;
  --dur-medium: 250ms;
  --dur-long: 300ms;
  --dur-quarter: 1500ms;
}

/* ciemny motyw: cienie na ciemnym tle muszą być mocniejsze, żeby w ogóle odcinały warstwę */
@media (prefers-color-scheme: dark) {
  :root[data-density="pro"]:not([data-theme="light"]) {
    --pro-sh-1: 0 1px 2px rgba(0, 0, 0, .40);
    --pro-sh-pop: 0 1px 2px rgba(0, 0, 0, .40), 0 10px 28px -8px rgba(0, 0, 0, .65);
  }
}
:root[data-density="pro"][data-theme="dark"] {
  --pro-sh-1: 0 1px 2px rgba(0, 0, 0, .40);
  --pro-sh-pop: 0 1px 2px rgba(0, 0, 0, .40), 0 10px 28px -8px rgba(0, 0, 0, .65);
}