/* ==========================================================================
   yourServer — design tokens
   Kolejność warstw kaskady dla całej aplikacji.
   ========================================================================== */
/* Powłoka (layout) nadpisuje komponenty — np. przyciski w zwiniętym menu bocznym */
@layer reset, base, components, layout, pages, utilities;

:root {
  color-scheme: light;

  /* --- Paleta (jasny motyw) ------------------------------------------- */
  --bg: #f3f5f3;            /* tło aplikacji */
  --surface: #ffffff;       /* karty, panele */
  --surface-2: #f7f9f8;     /* nagłówki tabel, pola */
  --surface-3: #edf1ee;     /* hover */
  --surface-inverse: #0f1512;
  --border: #e1e6e2;
  --border-strong: #c9d1cb;
  --text: #0f1512;
  --text-2: #46514b;
  --text-3: #75807a;
  --text-inverse: #f3f6f4;

  --accent: #0a8a5f;        /* jade */
  --accent-hover: #077350;
  --accent-soft: #e2f3eb;
  --accent-ink: #065c40;
  --on-accent: #ffffff;

  --ok: #178a4e;
  --ok-soft: #e3f4ea;
  --warn: #a86400;
  --warn-strong: #f5a524;
  --warn-soft: #fff3dc;
  --danger: #c8261c;
  --danger-soft: #fdecea;
  --info: #2459c2;
  --info-soft: #e7eefb;
  --violet: #6d4bd8;
  --violet-soft: #efeafd;

  --backdrop: rgb(12 18 15 / 0.42);
  --code-bg: #0f1613;
  --code-text: #d7e3dc;

  --shadow-xs: 0 1px 2px rgb(15 24 20 / 0.05);
  --shadow-sm: 0 1px 2px rgb(15 24 20 / 0.05), 0 2px 6px -2px rgb(15 24 20 / 0.06);
  --shadow-md: 0 10px 28px -10px rgb(15 24 20 / 0.18), 0 2px 6px rgb(15 24 20 / 0.05);
  --shadow-lg: 0 24px 64px -16px rgb(15 24 20 / 0.28), 0 4px 12px rgb(15 24 20 / 0.06);

  /* --- Typografia ------------------------------------------------------ */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-34: 2.125rem;

  /* --- Przestrzeń, promienie, ruch ------------------------------------ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  --sidebar-w: 268px;
  --sidebar-rail: 76px;
  --topbar-h: 64px;
  --content-max: 1480px;
  --gutter: 28px;

  --z-sticky: 20;
  --z-sidebar: 40;
  --z-drawer: 60;
  --z-popover: 80;
  --z-toast: 100;
}

/* --- Ciemny motyw: preferencja systemu (gdy brak jawnego wyboru „jasny”) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b100e;
    --surface: #121916;
    --surface-2: #161e1a;
    --surface-3: #1c2621;
    --surface-inverse: #eef3f0;
    --border: #243029;
    --border-strong: #34443b;
    --text: #e6ece8;
    --text-2: #aab6af;
    --text-3: #7f8c85;
    --text-inverse: #0f1512;
    --accent: #34c08a;
    --accent-hover: #52d3a2;
    --accent-soft: #11301f;
    --accent-ink: #86e3bd;
    --on-accent: #04140c;
    --ok: #45c984;
    --ok-soft: #0f2c1c;
    --warn: #f0a63a;
    --warn-strong: #f5b04a;
    --warn-soft: #30230b;
    --danger: #ff6d61;
    --danger-soft: #3a1512;
    --info: #79a6ff;
    --info-soft: #14223d;
    --violet: #a58cff;
    --violet-soft: #221a3d;
    --backdrop: rgb(0 0 0 / 0.58);
    --code-bg: #090d0b;
    --code-text: #d7e3dc;
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px -2px rgb(0 0 0 / 0.35);
    --shadow-md: 0 12px 32px -10px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 28px 72px -16px rgb(0 0 0 / 0.7), 0 4px 12px rgb(0 0 0 / 0.35);
  }
}

/* --- Ciemny motyw: jawny wybór (wygrywa z systemem w obu kierunkach) --- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b100e;
  --surface: #121916;
  --surface-2: #161e1a;
  --surface-3: #1c2621;
  --surface-inverse: #eef3f0;
  --border: #243029;
  --border-strong: #34443b;
  --text: #e6ece8;
  --text-2: #aab6af;
  --text-3: #7f8c85;
  --text-inverse: #0f1512;
  --accent: #34c08a;
  --accent-hover: #52d3a2;
  --accent-soft: #11301f;
  --accent-ink: #86e3bd;
  --on-accent: #04140c;
  --ok: #45c984;
  --ok-soft: #0f2c1c;
  --warn: #f0a63a;
  --warn-strong: #f5b04a;
  --warn-soft: #30230b;
  --danger: #ff6d61;
  --danger-soft: #3a1512;
  --info: #79a6ff;
  --info-soft: #14223d;
  --violet: #a58cff;
  --violet-soft: #221a3d;
  --backdrop: rgb(0 0 0 / 0.58);
  --code-bg: #090d0b;
  --code-text: #d7e3dc;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px -2px rgb(0 0 0 / 0.35);
  --shadow-md: 0 12px 32px -10px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 28px 72px -16px rgb(0 0 0 / 0.7), 0 4px 12px rgb(0 0 0 / 0.35);
}

@media (max-width: 720px) {
  :root { --gutter: 16px; --topbar-h: 58px; }
}

/* --- Większy kontrast (ustawienie systemu): wyraźniejsze obramowania i drugorzędny tekst w obu motywach --- */
@media (prefers-contrast: more) {
  :root:root:root { --border: var(--border-strong); --text-3: var(--text-2); }
}