/* ==========================================================================
   Wyglad Huba: tokeny (ADR-0020, ADR-0021) — jedyne zrodlo kolorow i skali.

   Kazda apka dziedziczy wyglad stad: powloka (`templates/base.html`) i uklady
   poza nia (telefon Trade) laduja ten plik przed swoimi arkuszami, a arkusze
   apek uzywaja tylko tokenow i wspolnych komponentow z `app.css`. Zmiana
   tutaj zmienia wszystkie apki naraz. Kolor wpisany na sztywno poza tym
   plikiem zatrzymuje test `config.tests.StyleTokenGuardTests`.

   Kazdy kolor ma jedna role:
   - cyan SMARTII (`--accent`) = dzialanie: glowny przycisk, link, obwodka fokusu;
   - kolor apki (`--app`, z `body[data-app]`) = "gdzie jestem": znak apki
     w panelu bocznym i ikona aktywnej pozycji menu, nigdy status;
   - piec tonow (`--tone-*`) = stan, ten sam slownik we wszystkich apkach;
   - kolor organizacji (`--org-color`) = wylacznie jej monogram w pasku gornym.
   ========================================================================== */
:root {
    --font-sans: "Inter Variable", Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --control-h: 36px;
    --control-h-sm: 30px;
    --sidebar-w: 224px;
    --sidebar-w-collapsed: 60px;
    --topbar-h: 52px;

    /* Skala tekstu w apkach (powloka ma 14 px). */
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-title: 1.4rem;

    /* Cien elementow wysuwanych nad trescia: menu, podpowiedzi, przyklejone
       paski. Karty i panele sa plaskie (linia 1 px), bez cienia. */
    --shadow-pop: 0 12px 32px rgba(3, 9, 21, 0.22);
    /* Przyciemnienie ekranu wokol podswietlonego elementu w samouczku (ADR-0022). */
    --scrim: rgba(3, 9, 21, 0.62);

    --surface-bg: #07111d;
    --surface-side: #0a1321;
    --surface-card: #0f1727;
    --surface-raised: #162033;
    --surface-head: #0d1524;
    --line: #1c2940;
    --line-strong: #2a3a57;
    --text: #eef3fb;
    --text-muted: #8b9ab4;
    --text-faint: #5f6f8a;
    --accent: #11c5f4;
    --accent-hover: #3dd2f7;
    --accent-ink: #03121a;
    /* Tekst na pelnym wypelnieniu tonem (licznik, zaznaczone pole wyboru). */
    --on-fill: #03121a;
    --link: #5fd4f6;
    --link-hover: #9be6fa;
    --focus-ring: rgba(17, 197, 244, 0.35);
    --nav-active: #162033;
    --nav-active-ring: transparent;
    --app: #11c5f4;

    /* Kolor kazdej apki: znak apki w powloce (`--app`) i jej kafelek na pulpicie. */
    --app-flow: #8ab4ff;
    --app-relations: #6fe0c4;
    --app-workspace: #e0b189;
    --app-horeca: #46d789;
    --app-trade: #ffb066;
    --app-factory: #9d86ff;
    --app-services: #ff9a7e;
    --app-data_model: #34d3e6;
    --app-knowledge: #dd9bec;
    --app-order_assist: #e8c547;

    --tone-ok: #3ecf8e;
    --tone-info: #6aa8ff;
    --tone-warn: #f2b23a;
    --tone-danger: #ff6b78;
    --tone-violet: #a98bff;

    /* Suwaki, listy rozwijane i pola daty w barwach motywu. */
    color-scheme: dark;
}

body.theme-light {
    --surface-bg: #f5f7fa;
    --surface-side: #eef2f7;
    --surface-card: #ffffff;
    --surface-raised: #f1f4f9;
    --surface-head: #f8fafc;
    --line: #e3e8ef;
    --line-strong: #d3dbe6;
    --text: #152033;
    --text-muted: #5b6b82;
    --text-faint: #8794a8;
    --accent-hover: #0fb3de;
    --link: #087a99;
    --on-fill: #ffffff;
    --link-hover: #055a72;
    --focus-ring: rgba(8, 122, 153, 0.3);
    --nav-active: #ffffff;
    --nav-active-ring: #e3e8ef;
    --app: #087a99;
    --scrim: rgba(21, 32, 51, 0.42);

    /* Ciemniejszy odcien koloru apki, czytelny na jasnym tle. */
    --app-flow: #2f62c9;
    --app-relations: #0f7f66;
    --app-workspace: #9a5f2a;
    --app-horeca: #18803f;
    --app-trade: #c96a12;
    --app-factory: #5a3fcf;
    --app-services: #b8462a;
    --app-data_model: #0a7f90;
    --app-knowledge: #8e3aa6;
    --app-order_assist: #8a6d00;

    --tone-ok: #12805c;
    --tone-info: #2463c9;
    --tone-warn: #a15c07;
    --tone-danger: #c42f3d;
    --tone-violet: #6b3fd4;

    color-scheme: light;
}

/* Pasek przewijania calej strony bierze `color-scheme` z <html>, nie z <body>. */
:root:has(> body.theme-light) {
    color-scheme: light;
}

/* Znak apki w powloce bierze jej kolor (`--app-<kod>` wyzej, w obu motywach);
   kafelek na pulpicie bierze ten sam token (`.hub-app-card--<kod>` w app.css).
   Apka bez wpisu (sam Hub, Log Viewer) bierze cyan SMARTII. */
body[data-app="flow"] { --app: var(--app-flow); }
body[data-app="relations"] { --app: var(--app-relations); }
body[data-app="workspace"] { --app: var(--app-workspace); }
body[data-app="horeca"] { --app: var(--app-horeca); }
body[data-app="trade"] { --app: var(--app-trade); }
body[data-app="factory"] { --app: var(--app-factory); }
body[data-app="services"] { --app: var(--app-services); }
body[data-app="data_model"] { --app: var(--app-data_model); }
body[data-app="knowledge"] { --app: var(--app-knowledge); }
body[data-app="order_assist"] { --app: var(--app-order_assist); }

/* Kolor apki dopisuje kazda apka z kafelkiem na pulpicie: `--app-<kod>` w obu
   motywach i wpis `body[data-app]` wyzej (pilnuje
   `config.tests.StyleTokenGuardTests.test_every_dashboard_app_has_its_colour_in_both_themes`). */

/* Dawne nazwy zmiennych (arkusze sprzed ADR-0020) wskazuja na tokeny. Stoja na
   <body>, bo tam przelacza sie motyw - alias policzony na :root zostalby przy
   ciemnych wartosciach. */
body {
    --color-bg: var(--surface-bg);
    --color-surface: var(--surface-card);
    --color-surface-2: var(--surface-raised);
    --color-text: var(--text);
    --color-accent: var(--accent);
    --color-accent-hover: var(--accent-hover);
    --color-accent-secondary: #8b4dff;
}