/* Tokeny wyglądu — jedyne źródło kolorów i wymiarów w aplikacji.
   Wartości przeniesione z mockupu Karoliny (docs/24-frontend/ui-propozycje/).
   W kodzie ekranów używamy wyłącznie var(--nazwa), nigdy wartości wprost. */

:root {
  --navbar-h: 53px;
  --sidebar-w-collapsed: 60px;
  --sidebar-w-expanded: 250px;
  --sidebar-w: var(--sidebar-w-expanded);
  --sidebar-pad: 0.5rem;

  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --font: "Roboto Flex", system-ui, sans-serif;

  --primary: #159de0;
  --primary-ink: #7dd3f5;
  --accent-deep: #0a465d;
  --success: #3dd68c;
  --warn: #f0b429;
  --danger: #f07178;

  --space-1: 0.35rem;
  --space-2: 0.65rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;

  --focus-w: 2px;
  --focus-offset: 2px;
}

html[data-sidebar-expanded="0"] { --sidebar-w: var(--sidebar-w-collapsed); }
html[data-sidebar-expanded="1"] { --sidebar-w: var(--sidebar-w-expanded); }

/* Motyw ciemny */
html[data-theme="dark"] {
  --bg: #0b1520;
  --bg-elevated: #121f2c;
  --ink: #e8eef4;
  --ink-muted: #9aadbc;
  --glass-bg: color-mix(in srgb, #121f2c 62%, transparent);
  --glass-border: color-mix(in srgb, #fff 8%, transparent);
  --glass-border-strong: color-mix(in srgb, #fff 16%, transparent);
  --sidebar-bg: color-mix(in srgb, #0d1824 88%, transparent);
  --sidebar-border: color-mix(in srgb, #fff 8%, transparent);
  --sidebtn-hover: color-mix(in srgb, var(--primary) 14%, transparent);
  --sidebtn-active: color-mix(in srgb, var(--primary) 22%, transparent);
  --nav-btn-border: color-mix(in srgb, #fff 18%, transparent);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.28);
  --input-bg: color-mix(in srgb, #0b1520 70%, transparent);
  --focus: var(--primary-ink);
  --success-ink: var(--success);
  --warn-ink: var(--warn);
  --danger-ink: var(--danger);
  --greet-line: linear-gradient(180deg, #fff 0%, #c5d0dc 100%);
  --nav-glass-sky: color-mix(in srgb, var(--primary) 34%, transparent);
  --nav-glass-deep: color-mix(in srgb, var(--accent-deep) 55%, transparent);
  --nav-glass-moss: color-mix(in srgb, var(--success) 20%, transparent);
  --nav-glass-amber: color-mix(in srgb, var(--warn) 16%, transparent);
  --nav-glass-rose: color-mix(in srgb, var(--danger) 14%, transparent);
  --nav-glass-slate: color-mix(in srgb, var(--ink) 7%, transparent);
  --nav-glass-lead: color-mix(in srgb, #02080c 62%, var(--bg));
  --nav-glass-veil: color-mix(in srgb, var(--bg) 48%, transparent);
}

/* Motyw jasny */
html[data-theme="light"] {
  --bg: #f2f6f9;
  --bg-elevated: #ffffff;
  --ink: #13202b;
  --ink-muted: #5a7183;
  --primary-ink: #0a6a94;
  --glass-bg: color-mix(in srgb, #fff 78%, transparent);
  --glass-border: color-mix(in srgb, #0a465d 10%, transparent);
  --glass-border-strong: color-mix(in srgb, #0a465d 18%, transparent);
  --sidebar-bg: color-mix(in srgb, #ffffff 92%, transparent);
  --sidebar-border: color-mix(in srgb, #0a465d 12%, transparent);
  --sidebtn-hover: color-mix(in srgb, var(--primary) 12%, #fff);
  --sidebtn-active: color-mix(in srgb, var(--primary) 18%, #fff);
  --nav-btn-border: color-mix(in srgb, #0a465d 16%, transparent);
  --shadow-sm: 0 8px 24px rgba(10, 70, 93, 0.12);
  --input-bg: #ffffff;
  --focus: var(--primary);
  /* barwy stanów na białym tle muszą być ciemniejsze — inaczej etykiet nie da się przeczytać */
  --success-ink: #0f7a4f;
  --warn-ink: #8a5a00;
  --danger-ink: #b3242c;
  --greet-line: linear-gradient(180deg, #13202b 0%, #3d5566 100%);
  --nav-glass-sky: color-mix(in srgb, var(--primary) 20%, transparent);
  --nav-glass-deep: color-mix(in srgb, var(--accent-deep) 22%, transparent);
  --nav-glass-moss: color-mix(in srgb, var(--success) 14%, transparent);
  --nav-glass-amber: color-mix(in srgb, var(--warn) 12%, transparent);
  --nav-glass-rose: color-mix(in srgb, var(--danger) 10%, transparent);
  --nav-glass-slate: color-mix(in srgb, var(--accent-deep) 6%, transparent);
  --nav-glass-lead: color-mix(in srgb, var(--accent-deep) 28%, #fff);
  --nav-glass-veil: color-mix(in srgb, #fff 56%, transparent);
}