/* trener/tokens.css — v1.0.0 (2026-08-26)
   Design tokens OGNIWO Voice Control — 3 warstwy wg AUDYT-UIUX-VOICE-CONTROL-FABLE-2026-08-25.md §8.1
   i AUDYT-…-ZALACZNIKI.md Z-B2 (doradca-strateg-standaryzacji-design-tokens).

   WARSTWA 1 — prymitywy marki: JEDYNE miejsce z surowymi wartościami (hex/rgb/nazwa fontu/
   promień bazowy/skala pisma). White-label nadpisuje WYŁĄCZNIE zmienne --og-* (patrz TOKENY.md
   i brand-przyklad.css) przez [data-brand="…"].
   WARSTWA 2 — semantyka: jedyne zmienne, do których wolno się odwoływać w regułach komponentów
   w panel.css. Nazwy podwójne tam, gdzie handoff (V4a) i raport (§8.1) użyły różnych konwencji —
   obie wskazują na tę samą wartość, więc każdy z dwóch torów (front/API) może użyć jednej z nich.
   WARSTWA 3 — komponentowe: tylko aliasy do warstwy 2, gdy komponent ma własną, nazwaną decyzję
   (np. próg promienia chipa, kolor obwódki przycisku danger).

   Reguła kaskady: te trzy bloki :root muszą zostać PRZED każdą regułą komponentu w panel.css i
   NIE mogą być nadpisywane później w żadnym pliku poza brand-<partner>.css (który nadpisuje
   tylko warstwę 1, przez selektor [data-brand], czyli wyższą specyficznością niż :root — to
   jedyne dopuszczalne "nadpisanie w kaskadzie").
*/

/* ============================== WARSTWA 1 — prymitywy ============================== */
:root {
  /* marka — pomarańcz (akcja główna, nawigacja aktywna) */
  --og-brand-500: #ff6a1a;
  --og-brand-300: #ff9d4d;
  --og-brand-950: #210b02;

  /* limonka — WYŁĄCZNIE sygnał "live" i podświetlenie danych (patrz warstwa 2, reguła (b)) */
  --og-lime-400: #c8ff62;
  --og-lime-300: #d6ff89;
  --og-lime-950: #18210a;

  /* akcenty stanu */
  --og-amber-300: #ffca64;
  --og-red-300: #ff776f;
  --og-blue-300: #83b9ff;
  --og-green-400: #60d394;

  /* Ciemne wypełnienia stanów (recenzja Codexa #13 — F-25): wartości przeniesione
     1:1 z panel.css, gdzie stały jako surowe heksy poza warstwą tokenów. NIE są to
     wyniki `color-mix` z odpowiedników -bg (te dają inne barwy, sprawdzone
     przeliczeniem), więc dostają własne prymitywy — zero zmiany pikseli. */
  --og-amber-950: #2c2415;
  --og-green-950: #173022;
  --og-red-900: #66312e;

  /* neutralny stopień pośredni: obwódka karty-przycisku w stanie :hover */
  --og-neutral-600: #3b463d;

  /* neutralne (skala ciemna) */
  --og-neutral-950: #0a0c0b;
  --og-neutral-900: #111512;
  --og-neutral-850: #171c18;
  --og-neutral-800: #1e241f;
  --og-neutral-700: #2a322c;
  --og-neutral-750: #202621;
  --og-neutral-400: #97a199;
  --og-neutral-300: #c9d0ca;
  --og-neutral-50: #f2f4ef;

  /* typografia i kształt — punkty theme white-label */
  --og-font-family:
    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --og-font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --og-radius-base: 18px;
  /* --og-logo: brak pliku logo w repo dziś — punkt theme zarezerwowany, patrz TOKENY.md */
}

/* ============================== WARSTWA 2 — semantyka ============================== */
:root {
  /* tło (nazwy wg V4a: --color-bg-*; alias 1:1 do --color-surface-* z §8.1 raportu) */
  --color-bg-canvas: var(--og-neutral-950);
  --color-bg-base: var(--og-neutral-900);
  --color-bg-raised: var(--og-neutral-850);
  --color-bg-overlay: var(--og-neutral-800);
  --color-surface-canvas: var(--color-bg-canvas);
  --color-surface-base: var(--color-bg-base);
  --color-surface-raised: var(--color-bg-raised);
  --color-surface-overlay: var(--color-bg-overlay);

  /* tekst */
  --color-text-primary: var(--og-neutral-50);
  --color-text-secondary: var(--og-neutral-400);
  --color-text-tertiary: var(--og-neutral-300);

  /* obramowania */
  --color-border-default: var(--og-neutral-700);
  --color-border-subtle: var(--og-neutral-750);
  --color-border-hover: color-mix(in srgb, var(--og-neutral-400) 25%, var(--og-neutral-700));
  --color-border-strong: color-mix(in srgb, var(--og-neutral-400) 45%, var(--og-neutral-700));
  --color-border-hover-strong: var(--og-neutral-600);

  /* akcje — D7: pauza/„Zatrzymaj odsłuch” = bursztyn (warning), tylko akcje nieodwracalne/
     zewnętrzne („Odwołaj spotkanie”, „Odrzuć kandydata”) = czerwień (danger) */
  --color-action-primary: var(--og-brand-500);
  --color-action-primary-hover: var(--og-brand-300);
  --color-action-primary-on: var(--og-brand-950);

  --color-action-warning-bg: color-mix(in srgb, var(--og-amber-300) 16%, var(--og-neutral-900));
  --color-action-warning-fg: var(--og-amber-300);
  --color-action-warning-border: color-mix(
    in srgb,
    var(--og-amber-300) 34%,
    var(--og-neutral-900)
  );

  --color-action-danger-bg: color-mix(in srgb, var(--og-red-300) 14%, var(--og-neutral-900));
  --color-action-danger-fg: var(--og-red-300);
  --color-action-danger-border: color-mix(in srgb, var(--og-red-300) 30%, var(--og-neutral-900));

  --color-nav-active: var(--og-brand-500);
  --color-nav-active-on: var(--og-brand-950);

  /* limonka — WYŁĄCZNIE: puls „Trwa”, dock live, wave, chip severity=live.
     Karta KPI („Realne dialogi”) używa OSOBNEGO tokenu (ta sama wartość dziś, rola inna — patrz
     Z-B2: "dwa tokeny semantyczne o tej samej wartości, live≠success, nigdy odwrotnie"). */
  --color-signal-live: var(--og-lime-400);
  --color-signal-live-on: var(--og-lime-950);
  --color-data-highlight: var(--og-lime-300);
  --color-data-highlight-strong: var(--og-lime-400);
  --color-data-highlight-on: var(--og-lime-950);

  /* statusy — nazewnictwo §8.1 (success/warning/critical/info/neutral) + aliasy skrótowe z V4a
     (ok/warn/danger/info) wskazujące na te same wartości, żeby oba tory mogły użyć jednej formy */
  --color-status-success-fg: var(--og-green-400);
  --color-status-success-bg: color-mix(in srgb, var(--og-green-400) 14%, var(--og-neutral-900));
  --color-status-warning-fg: var(--og-amber-300);
  --color-status-warning-bg: color-mix(in srgb, var(--og-amber-300) 16%, var(--og-neutral-900));
  --color-status-critical-fg: var(--og-red-300);
  --color-status-critical-bg: color-mix(in srgb, var(--og-red-300) 14%, var(--og-neutral-900));
  --color-status-info-fg: var(--og-blue-300);
  --color-status-info-bg: color-mix(in srgb, var(--og-blue-300) 14%, var(--og-neutral-900));
  /* dodane przy weryfikacji: .alert--info w panel.css odwoływał się wprost do --og-blue-300
     (warstwa 1) w color-mix(), łamiąc regułę "komponenty tylko przez warstwę 2" z nagłówka tego
     pliku — ten token zamyka lukę, wartość identyczna z poprzednim inline'em (0 zmiany pikseli) */
  --color-status-info-border: color-mix(in srgb, var(--og-blue-300) 30%, var(--color-border-subtle));
  --color-status-neutral-fg: var(--og-neutral-300);
  --color-status-neutral-bg: var(--og-neutral-800);
  --color-status-success-border: color-mix(in srgb, var(--og-green-400) 30%, var(--og-neutral-900));

  /* Warianty „solid" (pełne, nieprzezroczyste tło) tam, gdzie komponent nie może użyć
     `color-mix` z tłem — plakietka „szkic niezapisany", kropki osi gotowości — oraz
     mocniejsza obwódka błędu synchronizacji dostawcy. */
  --color-status-warning-bg-solid: var(--og-amber-950);
  --color-status-success-bg-solid: var(--og-green-950);
  --color-status-critical-border-strong: var(--og-red-900);

  /* akcent marki, wyciszony na ciemnym tle — karta KPI „primary” w Finansach, aktywny krok
     kreatora, notatka z lewym paskiem marki (setup-note); NIE dotyczy przycisków (te mają swoje
     --color-action-primary-*) */
  --color-action-primary-tint-bg: color-mix(in srgb, var(--og-brand-500) 12%, var(--og-neutral-900));
  --color-action-primary-tint-border: color-mix(
    in srgb,
    var(--og-brand-500) 35%,
    var(--og-neutral-900)
  );

  --color-status-ok-fg: var(--color-status-success-fg);
  --color-status-ok-bg: var(--color-status-success-bg);
  --color-status-warn-fg: var(--color-status-warning-fg);
  --color-status-warn-bg: var(--color-status-warning-bg);
  --color-status-danger-fg: var(--color-status-critical-fg);
  --color-status-danger-bg: var(--color-status-critical-bg);
  --color-status-info-fg-alt: var(--color-status-info-fg);

  /* fokus — NIGDY w kolorze marki (pomarańcz #ff9d4d na #ff6a1a = 1,39:1, poniżej 3:1).
     Kontrast policzony w tests/ui/kontrast-fokusu.js (raport w tekście finalnym). */
  --color-focus-ring: var(--og-neutral-50);
  --color-focus-halo: var(--og-neutral-950);

  /* skala pisma — 100..900, siatka 4px (§8.1/§8.2). Zastosowanie w tej paczce: MINIMUM — tylko
     elementy < 11px podniesione do skali; pełny remap ról typograficznych odłożony (patrz raport
     końcowy, „Odstępstwa”). */
  --font-size-100: 11px;
  --font-size-200: 12px;
  --font-size-300: 13px;
  --font-size-400: 14px;
  --font-size-500: 16px;
  --font-size-600: 20px;
  --font-size-700: 24px;
  --font-size-800: 32px;
  --font-size-900: 44px;
  --line-height-tight: 1.15;
  --line-height-body: 1.5;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-lg: var(--og-radius-base);
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --shadow-overlay: 0 18px 70px rgba(0, 0, 0, 0.36);
  --z-topbar: 15;
  --z-sidebar: 20;
  --z-nav-mobile: 30;
  --z-drawer: 45;
  --z-modal: 50;
  --z-dock: 70;
  --z-toast: 80;

  --layout-sidebar: 240px;
  --layout-sidebar-collapsed: 64px;
  --layout-topbar: 77px;
  --layout-nav-mobile: 64px;
  --layout-dock: 72px;
  /* wspólna wysokość dolnych warstw (nav mobile + dock) — patrz panel.css pkt 5 (mobile);
     content-padding-bottom i #liveDock.bottom liczą się z tej jednej zmiennej */
  --bottom-stack-h: var(--layout-nav-mobile);

  /* === zgodność wsteczna: STARE nazwy zmiennych używane w panel.css (bez rename >150 miejsc w
     jednej paczce, ryzyko regresji kaskady — patrz CLAUDE.md „poprawka jest nowym kodem”).
     Każda z nich jest TYLKO aliasem do warstwy 2/1 powyżej — nowy kod (widoki, komponenty) ma
     używać nazw kanonicznych powyżej, nie tych. */
  --ink: var(--color-bg-canvas);
  --surface: var(--color-bg-base);
  --surface-2: var(--color-bg-raised);
  --surface-3: var(--color-bg-overlay);
  --line: var(--color-border-default);
  --line-soft: var(--color-border-subtle);
  --text: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --brand: var(--color-action-primary);
  --brand-soft: var(--color-action-primary-hover);
  --brand-ink: var(--color-action-primary-on);
  --lime: var(--color-signal-live);
  --lime-ink: var(--color-signal-live-on);
  --amber: var(--color-status-warning-fg);
  --red: var(--color-status-critical-fg);
  --blue: var(--color-status-info-fg);
  --green: var(--color-status-success-fg);
  --radius: var(--radius-lg);
  --shadow: var(--shadow-overlay);
  --sidebar: var(--layout-sidebar);
}

/* ============================== WARSTWA 3 — komponentowe ============================== */
:root {
  --btn-danger-bg: var(--color-action-danger-bg);
  --btn-danger-fg: var(--color-action-danger-fg);
  --btn-danger-border: var(--color-action-danger-border);
  --btn-warning-bg: var(--color-action-warning-bg);
  --btn-warning-fg: var(--color-action-warning-fg);
  --btn-warning-border: var(--color-action-warning-border);

  --chip-radius: var(--radius-pill);
  --chip-font-size: var(--font-size-100);
  --chip-padding: 5px 8px;

  --card-radius: var(--radius-lg);
  --card-bg: var(--color-bg-base);
  --card-border: var(--color-border-subtle);
  --card-padding: var(--space-5);

  --table-header-fg: var(--color-text-secondary);
  --table-border: var(--color-border-default);
  --table-row-border: var(--color-border-subtle);
  --table-sticky-bg: var(--color-bg-base);

  --alert-radius: var(--radius-md);

  /* dymek rozmówcy w transkrypcie (.turn.user) — wyciszony akcent zielony, żeby odróżnić turę
     rozmówcy od tury bota bez nowej roli koloru statusu */
  --color-chat-user-bg: color-mix(in srgb, var(--og-green-400) 8%, var(--og-neutral-800));
}

/* white-label: brand-<partner>.css zawiera WYŁĄCZNIE
   [data-brand="partner"]{ --og-*: …; } — zamknięta lista punktów theme w TOKENY.md */