/* NOMIA – zmienne z Figmy (plik pv5jrBtxgpu46Il0KIk3WE, kolekcje primitives / semantic / dimensions).
 * Nazwy jak w Figmie: color/bg/brand_secondary → var(--color-bg-brand_secondary).
 * Plik wygenerowany z Figmy; zmiany wartości robimy w Figmie i przenosimy tutaj. */

/* Krój Inter na naszym serwerze (licencja SIL OFL, fonts/inter-OFL.txt): łaciński + polskie znaki, wagi 400/500/700 */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-regular.f8e711991b02.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-medium.a36c7a27fc2b.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-bold.dd842b7217e5.woff") format("woff"); }

:root {
  /* primitives */
  --color-primary-100: #1f1a85;
  --color-primary-90: #353191;
  --color-primary-80: #4c489d;
  --color-primary-70: #635fa9;
  --color-primary-60: #7976b6;
  --color-primary-40: #a5a3ce;
  --color-primary-20: #d2d1e7;
  --color-primary-10: #e9e8f3;
  --color-neutral-white: #ffffff;
  --color-neutral-200: #e3e3e3;
  --color-red-500: #ff383c;
  --color-red-50: #ffebec;
  --color-orange-500: #ff8d28;
  --color-orange-50: #fff4ea;
  --color-green-500: #34c759;
  --color-green-50: #ebf9ee;

  /* semantic – tych używają komponenty */
  --color-bg-surface: var(--color-neutral-white);
  --color-bg-brand: var(--color-primary-100);
  --color-bg-brand_secondary: var(--color-primary-90);
  --color-bg-accent: var(--color-primary-80);
  --color-bg-brand_tertiary: var(--color-primary-60);
  --color-bg-disabled: var(--color-primary-40);
  --color-bg-selected: var(--color-primary-20);
  --color-bg-subtle: var(--color-primary-10);
  --color-bg-placeholder: var(--color-neutral-200);
  --color-bg-error: var(--color-red-500);
  --color-bg-error_subtle: var(--color-red-50);
  --color-bg-warning: var(--color-orange-500);
  --color-bg-warning_subtle: var(--color-orange-50);
  --color-bg-success: var(--color-green-500);
  --color-bg-success_subtle: var(--color-green-50);
  --color-bg-scrim: rgb(0 0 0 / 25%); /* przyciemnienie pod oknami (jak tło nakładki w prototypie Figmy) */
  --color-bg-bar_1: var(--color-primary-90); /* belki pod nagłówkiem: każda kolejna o stopień jaśniejsza */
  --color-bg-bar_2: var(--color-primary-80);
  --color-bg-bar_3: var(--color-primary-70);
  --color-bg-bar_4: var(--color-primary-60); /* czwarta belka (14 października 2026) */
  --color-text-on_brand: var(--color-neutral-white);
  --color-text-primary: var(--color-primary-100);
  --color-text-brand_secondary: var(--color-primary-90);
  --color-text-secondary: var(--color-primary-80);
  --color-text-tertiary: var(--color-primary-60);
  --color-text-disabled: var(--color-primary-40);
  --color-text-subtle: var(--color-primary-20);
  --color-text-error: var(--color-red-500);
  --color-text-warning: var(--color-orange-500);
  --color-text-success: var(--color-green-500);
  --color-text-offline: #ffd60a; /* color/yellow/400 – znacznik „off-line” na tle marki (217) */
  --color-icon-on_brand: var(--color-neutral-white);
  --color-icon-primary: var(--color-primary-100);
  --color-icon-default: var(--color-primary-80);
  --color-icon-muted: var(--color-primary-60);
  --color-icon-disabled: var(--color-primary-40);
  --color-icon-subtle: var(--color-primary-20);
  --color-icon-error: var(--color-red-500);
  --color-icon-warning: var(--color-orange-500);
  --color-icon-success: var(--color-green-500);
  --color-border-on_brand: var(--color-neutral-white);
  --color-border-primary: var(--color-primary-100);
  --color-border-strong: var(--color-primary-80);
  --color-border-default: var(--color-primary-60);
  --color-border-disabled: var(--color-primary-40);
  --color-border-subtle: var(--color-primary-20);
  --color-border-faint: var(--color-primary-10);
  --color-border-error: var(--color-red-500);
  --color-border-warning: var(--color-orange-500);
  --color-border-success: var(--color-green-500);

  /* dimensions */
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-40: 40px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;
  --size-touch_min: 48px;
  --border_width-thin: 1px;
  --border_width-regular: 2px;
  --border_width-thick: 3px;

  /* typografia: Inter, wagi regular 400 / medium 500 / bold 700, wysokość linii auto */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --line-height-auto: 1.21;
}

/* style tekstu text/{rozmiar}_{waga} */
.text-14_regular { font: 400 14px/var(--line-height-auto) var(--font-family); }
.text-14_medium { font: 500 14px/var(--line-height-auto) var(--font-family); }
.text-14_bold { font: 700 14px/var(--line-height-auto) var(--font-family); }
.text-16_regular { font: 400 16px/var(--line-height-auto) var(--font-family); }
.text-16_medium { font: 500 16px/var(--line-height-auto) var(--font-family); }
.text-16_bold { font: 700 16px/var(--line-height-auto) var(--font-family); }
.text-20_regular { font: 400 20px/var(--line-height-auto) var(--font-family); }
.text-20_medium { font: 500 20px/var(--line-height-auto) var(--font-family); }
.text-20_bold { font: 700 20px/var(--line-height-auto) var(--font-family); }
.text-24_regular { font: 400 24px/var(--line-height-auto) var(--font-family); }
.text-24_medium { font: 500 24px/var(--line-height-auto) var(--font-family); }
.text-24_bold { font: 700 24px/var(--line-height-auto) var(--font-family); }
.text-30_regular { font: 400 30px/var(--line-height-auto) var(--font-family); }
.text-30_medium { font: 500 30px/var(--line-height-auto) var(--font-family); }
.text-30_bold { font: 700 30px/var(--line-height-auto) var(--font-family); }
.text-40_regular { font: 400 40px/var(--line-height-auto) var(--font-family); }
.text-40_medium { font: 500 40px/var(--line-height-auto) var(--font-family); }
.text-40_bold { font: 700 40px/var(--line-height-auto) var(--font-family); }