@import url('../tokens.css');
/* e-mobilni Connect — design tokens
   Jedno źródło prawdy dla paneli (operator, e-mobilni) i apki użytkownika.
   Nazwy po angielsku, komentarze po polsku. Wartości hex; jasny motyw jako podstawa. */

:root {
  color-scheme: light;

  /* ---------- Neutrals (chłodna szarość, jak papier biurowy) ---------- */
  --n-0:   #ffffff;
  --n-25:  #fafbfc;
  --n-50:  #f6f8fa;
  --n-100: #eef1f5;
  --n-200: #e3e8ee;
  --n-300: #c9d2dc;
  --n-400: #9aa8b8;
  --n-500: #5d6c7e;
  --n-600: #4f5d6f;
  --n-700: #3a4756;
  --n-800: #243040;
  --n-900: #141b24;

  /* ---------- Akcent marki (jeden; akcje główne, zaznaczenie, linki) ---------- */
  --accent-50:  #eef0ff;
  --accent-100: #dfe3ff;
  --accent-500: #4f5bd5;
  --accent-600: #4249c4;
  --accent-700: #353ba6;

  /* ---------- Stany gniazda i systemu (słownik semantyczny) ---------- */
  --ok-50:   #e9f8ef;   /* wolne / online / sukces */
  --ok-500:  #17a34a;
  --ok-700:  #12793a;
  --busy-50:  #e8f1fe;  /* zajęte / sesja trwa */
  --busy-500: #2467e6;
  --busy-700: #1a4db0;
  --warn-50:  #fef4e6;  /* ostrzeżenie: blisko limitu, temperatura */
  --warn-500: #d97706;
  --warn-700: #a45a04;
  --err-50:   #fdecec;  /* awaria / odcięcie / RCD */
  --err-500:  #dc2626;
  --err-700:  #a81b1b;
  --off-500:  #8a97a8;  /* offline / wyłączone */

  /* ---------- Klasy mocy gniazd (chipy; nie kolidują ze stanami) ---------- */
  --class-micro-bg:    #e6f6f5;  --class-micro-fg:    #0f6f6a;  /* Mikro 500 W */
  --class-standard-bg: #efeafd;  --class-standard-fg: #5b3fb8;  /* Standard 1000 W */
  --class-service-bg:  #fff0e3;  --class-service-fg:  #b4520a;  /* Serwis 2000 W */

  /* ---------- Semantyka powierzchni ---------- */
  --bg:            var(--n-50);     /* tło aplikacji */
  --bg-panel:      var(--n-0);      /* karty, tabele, formularze */
  --bg-sunken:     var(--n-100);    /* nagłówki tabel, pola nieaktywne */
  --bg-sidebar:    var(--n-25);     /* boczne menu: minimalnie chłodniejsze */
  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --fg:            var(--n-900);
  --fg-muted:      var(--n-600);
  --fg-subtle:     var(--n-500);
  --fg-on-accent:  #ffffff;
  --link:          var(--accent-600);
  --focus-ring:    0 0 0 3px var(--accent-100), 0 0 0 1px var(--accent-500);
  --selection-bg:  var(--accent-100);

  /* ---------- Typografia ---------- */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-data: "Inter", system-ui, sans-serif; /* dane liczbowe: ta sama rodzina + tabular-nums */

  /* skala rem, ratio 1.125 (produkt, nie marketing) */
  --text-xs:   0.75rem;   /* 12px etykiety, metadane */
  --text-sm:   0.875rem;  /* 14px tabele, formularze */
  --text-md:   1rem;      /* 16px body */
  --text-lg:   1.125rem;  /* 18px nagłówki sekcji */
  --text-xl:   1.375rem;  /* 22px nagłówek strony */
  --text-2xl:  1.75rem;   /* 28px liczby kluczowe, tytuł apki */
  --text-3xl:  2.25rem;   /* 36px odliczanie sesji w apce */

  --leading-tight: 1.2;
  --leading-body:  1.5;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --tracking-caps: 0.04em;

  /* ---------- Odstępy (siatka 4 px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ---------- Promienie ---------- */
  --radius-sm: 6px;   /* chipy, pola */
  --radius-md: 8px;   /* przyciski, karty */
  --radius-lg: 12px;  /* karty apki, arkusze */
  --radius-full: 999px;

  /* ---------- Cienie (offset + miękki blur, nigdy halo) ---------- */
  --shadow-sm: 0 1px 2px rgba(20, 27, 36, 0.06), 0 1px 3px rgba(20, 27, 36, 0.04);
  --shadow-md: 0 2px 6px rgba(20, 27, 36, 0.08), 0 8px 20px rgba(20, 27, 36, 0.06);
  --shadow-lg: 0 6px 16px rgba(20, 27, 36, 0.12), 0 20px 40px rgba(20, 27, 36, 0.10);

  /* ---------- Ruch (stan, nie dekoracja) ---------- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Wymiary ---------- */
  --touch-min: 48px;      /* apka użytkownika: rękawiczki */
  --control-h: 36px;      /* panel: przyciski i pola */
  --control-h-lg: 44px;
  --sidebar-w: 240px;
  --content-max: 1200px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}

/* Connect v0.2: kompatybilne role dla wszystkich istniejących ekranów. */
:root {
  --n-0: var(--color-paper);
  --n-25: oklch(98% 0.004 265);
  --n-50: var(--color-paper-2);
  --n-100: oklch(94% 0.008 265);
  --n-200: var(--color-rule);
  --n-300: oklch(65% 0.019 265);
  --n-400: oklch(58% 0.02 265);
  --n-500: oklch(47% 0.02 265);
  --n-600: var(--color-ink-2);
  --n-900: var(--color-ink);
  --accent-50: oklch(95% 0.022 273);
  --accent-100: oklch(89% 0.052 273);
  --accent-500: var(--color-accent);
  --accent-600: oklch(43% 0.18 273);
  --accent-700: oklch(38% 0.15 273);
  --bg-sidebar: var(--color-rail);
  --fg-on-accent: var(--color-accent-ink);
  --sidebar-w: 224px;
  --content-max: 1440px;
  --control-h: 40px;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px oklch(20% 0.025 265 / .08);
  --shadow-lg: 0 16px 48px oklch(20% 0.025 265 / .16);
}