/* =====================================================================
   Wspólny motyw usług cyfrowych Urzędu Miasta Legionowo
   ---------------------------------------------------------------------
   Jedno źródło prawdy dla kolorów, obramowań i cieni wszystkich usług.
   Wartości pochodzą z aplikacji Grafiki (frontend/src/index.css), która
   jest wzorcem wyglądu — zmiana tutaj zmienia paletę we wszystkich
   usługach naraz.

   Serwowane pod /wspolne/legionowo.css (patrz legionowo-edge:
   conf.d/locations/00-wspolne.conf). Aplikacja dołącza go PRZED własnym
   arkuszem i mapuje swoje nazwy zmiennych na te tokeny.

   Kontrast dobrany pod WCAG 2.2 AA/AAA — nie zmieniać kolorów tekstu i
   obramowań "na oko", bo panele są używane przez urzędników przez cały
   dzień i podlegają wymogom dostępności.
   ===================================================================== */

:root {
  /* Kolory urzędowe (wysoki kontrast) */
  --lgn-primary: #0F3C7E;              /* Głęboki błękit urzędowy */
  --lgn-primary-hover: #0B2A58;
  --lgn-primary-soft: rgba(15, 60, 126, 0.08);

  /* Powierzchnie */
  --lgn-bg: #F3F4F6;                   /* Tło strony */
  --lgn-card-bg: #FFFFFF;              /* Karty, panele */
  --lgn-surface-muted: #F9FAFB;        /* Nagłówki tabel, paski narzędzi */

  /* Tekst */
  --lgn-text-main: #111827;
  --lgn-text-muted: #374151;           /* Kontrast > 4.7:1 */

  /* Obramowania — dwa poziomy.
     `control` dla elementów interaktywnych (pola, przyciski), musi trzymać
     kontrast >= 3:1 wg WCAG 1.4.11. `subtle` to linie dekoracyjne. */
  --lgn-border-control: #6B7280;
  --lgn-border-subtle: #E2E5EA;

  /* Cienie */
  --lgn-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 16px -6px rgba(16, 24, 40, 0.12);
  --lgn-shadow-raised: 0 2px 4px rgba(16, 24, 40, 0.06), 0 12px 24px -10px rgba(16, 24, 40, 0.18);

  /* Stany */
  --lgn-success: #047857;
  --lgn-success-hover: #064E3B;
  --lgn-success-soft: rgba(4, 120, 87, 0.10);
  --lgn-warning: #92400E;
  --lgn-warning-soft: rgba(180, 83, 9, 0.12);
  --lgn-danger: #B91C1C;
  --lgn-danger-hover: #991B1B;
  --lgn-danger-soft: rgba(185, 28, 28, 0.09);

  /* Pozostałe */
  --lgn-focus-ring: #1D4ED8;
  --lgn-info-bg: #EFF6FF;
  --lgn-info-border: #1D4ED8;
  --lgn-track: #DDE1E7;

  /* Zaokrąglenia */
  --lgn-radius-sm: 6px;
  --lgn-radius: 10px;
  --lgn-radius-lg: 14px;
}

/* ---------------------------------------------------------------------
   Motyw ciemny. Wartości z Grafik (body.dark-theme). Wystawiony pod dwoma
   przełącznikami, bo usługi wybierają różnie: Grafiki dają użytkownikowi
   klasę `dark-theme`, a Śmieci idą za ustawieniem systemu operacyjnego.
   Oba prowadzą do tych samych tokenów.
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --lgn-primary: #60A5FA;
    --lgn-primary-hover: #93C5FD;
    --lgn-primary-soft: rgba(96, 165, 250, 0.14);
    --lgn-bg: #0B0F19;
    --lgn-card-bg: #111827;
    --lgn-surface-muted: #1B2331;
    --lgn-text-main: #F9FAFB;
    --lgn-text-muted: #9CA3AF;
    --lgn-border-control: #6B7280;
    --lgn-border-subtle: #2A3546;
    --lgn-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 20px -8px rgba(0, 0, 0, 0.6);
    --lgn-shadow-raised: 0 4px 8px rgba(0, 0, 0, 0.5), 0 16px 32px -12px rgba(0, 0, 0, 0.7);
    --lgn-success: #34D399;
    --lgn-success-hover: #6EE7B7;
    --lgn-success-soft: rgba(16, 185, 129, 0.16);
    --lgn-warning: #FBBF24;
    --lgn-warning-soft: rgba(251, 191, 36, 0.16);
    --lgn-danger: #F87171;
    --lgn-danger-hover: #FCA5A5;
    --lgn-danger-soft: rgba(248, 113, 113, 0.16);
    --lgn-focus-ring: #3B82F6;
    --lgn-info-bg: #1E293B;
    --lgn-info-border: #3B82F6;
    --lgn-track: #2A3546;
  }
}

body.dark-theme {
  --lgn-primary: #60A5FA;
  --lgn-primary-hover: #93C5FD;
  --lgn-primary-soft: rgba(96, 165, 250, 0.14);
  --lgn-bg: #0B0F19;
  --lgn-card-bg: #111827;
  --lgn-surface-muted: #1B2331;
  --lgn-text-main: #F9FAFB;
  --lgn-text-muted: #9CA3AF;
  --lgn-border-subtle: #2A3546;
  --lgn-success: #34D399;
  --lgn-warning: #FBBF24;
  --lgn-danger: #F87171;
  --lgn-focus-ring: #3B82F6;
}

/* Wskaźnik fokusa — wymóg WCAG 2.2, wspólny dla wszystkich usług. */
*:focus-visible {
  outline: 3px solid var(--lgn-focus-ring);
  outline-offset: 2px;
}