:root {
    /* Paleta bazowa — Bywalio Design System, tokens/colors.css */
    --color-cream: #fff8ee;
    --color-white: #fffdfa;
    --color-sand: #f3e6d6;
    --color-burgundy: #641f2b;
    --color-coral: #e85f3f;
    --color-coral-text-safe: #c74328;
    --color-ink: #302724;
    --color-muted: #716762;
    --color-sage: #657154;
    --color-border: #e5d6c7;

    /* Rozszerzenie DS-a: zamiennik palety Bootstrapa na ekranach personelu — ten sam ciepły rejestr */
    --color-amber: #c9862c;
    --color-amber-text-safe: #8f5c14;
    --color-clay: #7a5a46;
    --color-clay-text-safe: #5c4432;

    /* Tekst na wypełnionych tłach sage/coral-text-safe/amber (przyciski, plakietki) — POTRZEBNE,
       bo --color-sage i --color-coral-text-safe rozjaśniają się w dark mode (żeby było je widać
       na ciemnym tle), więc twardo wpisany biały tekst traciłby kontrast poniżej WCAG AA
       (zmierzone: biały na dark --color-sage = 2.36:1, na dark --color-coral-text-safe = 2.17:1).
       Amber jest wystarczająco jasny w OBU motywach, więc --color-amber-fg nie jest nadpisywany
       w [data-theme="dark"] — ta sama ciemna wartość działa wszędzie (zmierzone: 5.48:1 jasny,
       7.67:1 ciemny; biały na jasnym amber to tylko 3.03:1, poniżej progu AA dla zwykłego tekstu). */
    --color-sage-fg: #fffdfa;
    --color-coral-fg: #fffdfa;
    --color-amber-fg: #241d18;

    /* Skala neutralna do tabel/danych — ciepły ton, nie szarość */
    --neutral-50: #faf6f0;
    --neutral-100: #f3ebe1;
    --neutral-200: #e5d6c7;
    --neutral-300: #d1bfae;
    --neutral-400: #a8917f;
    --neutral-500: #83705f;
    --neutral-600: #5f4f42;
    --neutral-700: #453a30;
    --neutral-800: #332a23;
    --neutral-900: #241d18;

    /* Semantyka — powierzchnie */
    --surface-public: var(--color-cream);
    --surface-operational: var(--color-cream);
    --surface-panel: var(--color-sand);
    --surface-card: var(--color-white);
    --surface-header: var(--color-white);
    --surface-raised: var(--color-sand);

    /* Semantyka — tekst */
    --text-body: var(--color-ink);
    --text-muted: var(--color-muted);
    --text-brand: var(--color-burgundy);
    --text-on-brand: var(--color-white);
    --text-danger: var(--color-coral-text-safe);
    --text-success: var(--color-sage);
    --text-warning: var(--color-amber-text-safe);
    --text-info: var(--color-clay-text-safe);
    --text-link: #006bb7;

    /* Semantyka — akcje i granice */
    --action-primary-bg: var(--color-burgundy);
    --action-primary-bg-hover: var(--color-ink);
    --action-primary-fg: var(--color-white);
    --action-secondary-bg: var(--color-white);
    --action-secondary-bg-hover: var(--color-sand);
    --action-secondary-fg: var(--color-burgundy);
    --border-hairline: var(--color-border);
    --border-control: var(--color-muted);
    --focus-ring-color: var(--color-coral-text-safe);

    /* Typografia — tokens/typography.css */
    --font-ui: 'Manrope', sans-serif;
    --font-display: 'DM Serif Display', 'Playfair Display', serif;

    --font-size-display: 2.25rem;
    --font-size-title: 1.75rem;
    --font-size-heading: 1.25rem;
    --font-size-lead: 1.1rem;
    --font-size-body: 1rem;
    --font-size-small: 0.9rem;
    --font-size-meta: 0.85rem;

    --font-weight-regular: 400;
    --font-weight-semibold: 600;

    --line-height-body: 1.5;
    --line-height-display: 1.15;

    /* Odstępy — tokens/spacing.css */
    --space-2xs: 0.25rem;
    --space-xs: 0.35rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.25rem;
    --space-2xl: 1.5rem;
    --space-3xl: 2rem;
    --space-4xl: 3rem;
    --space-badge-x: 0.85rem;
    --space-checkbox-gap: 0.65rem;

    /* Kształt — tokens/shape.css */
    --radius-button: 12px;
    --radius-card: 20px;
    --radius-modal: 0.5rem;
    --radius-modal-button: 4px;

    --button-height: 48px;
    --control-min-target: 48px;
    --language-link-size: 2.25rem;

    --border-width-hairline: 1px;
    --border-width-control: 1px;
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;

    --shadow-modal: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    --scrim-modal: rgba(0, 0, 0, 0.4);

    /* Ruch — tokens/motion.css (świadomie: brak przejść na przyciskach i linkach) */
    --duration-modal: 0.5s;
    --duration-slide-up: 1.5s;
    --duration-spinner: 1.5s;
    --ease-slide-up: cubic-bezier(.05, .89, .25, 1.02);
    --ease-fade: ease-in-out;
    --ease-spinner: cubic-bezier(0, 0.2, 0.8, 1);
    --transition-interactive: none;

    /* Layout — tokens/layout.css */
    --content-max-public: 640px;
    --content-max-operational: 480px;
    --panel-nav-width: 220px;
    --breakpoint-panel: 641px;
    --z-skip-link: 1000;

    /* Stan zastany Bootstrapa — tokens/bootstrap-legacy.css. Nie używać w nowych komponentach,
       tylko po to, żeby istniejące nadpisania odwoływały się do nazwanych wartości. */
    --bs-primary-bg: #1b6ec2;
    --bs-primary-border: #1861ac;
    --bs-focus-ring: #258cfb;
    --bs-valid: #26b050;
    --bs-invalid: #e50000;
    --bs-error-boundary-bg: #b32121;
    --bs-checkbox-border-dark: #929292;
}

/* Dark mode — dodatek Bywalio Design System, produkt go dziś nie ma w żadnej formie.
   Nieaktywne dopóki nic nie ustawia data-theme="dark" na korzeniu dokumentu. */
[data-theme="dark"] {
    --color-cream: #18120f;
    --color-white: #211a15;
    --color-sand: #2a221b;
    --color-burgundy: #e2703f;
    --color-coral: #f0855a;
    --color-coral-text-safe: #ff9466;
    --color-ink: #f5efe7;
    --color-muted: #a89684;
    --color-sage: #8fb377;
    --color-border: #42362c;
    --color-amber: #e0a63f;
    --color-amber-text-safe: #f3c065;
    --color-clay: #c9a37e;
    --color-clay-text-safe: #e2bd97;

    /* sage i coral-text-safe są jasne w dark mode -> tekst na nich musi być ciemny, nie biały.
       amber-fg celowo NIE jest tu nadpisywany (patrz komentarz przy definicji w :root). */
    --color-sage-fg: #241d18;
    --color-coral-fg: #241d18;

    --surface-public: var(--color-cream);
    --surface-operational: var(--color-cream);
    --surface-panel: var(--color-sand);
    --surface-card: var(--color-white);
    --surface-header: var(--color-white);
    --surface-raised: var(--color-sand);

    --text-body: var(--color-ink);
    --text-muted: var(--color-muted);
    --text-brand: var(--color-burgundy);
    --text-on-brand: #18120f;
    --text-danger: var(--color-coral-text-safe);
    --text-success: var(--color-sage);
    --text-warning: var(--color-amber-text-safe);
    --text-info: var(--color-clay-text-safe);
    --text-link: #6ea8fe;

    --action-primary-bg: var(--color-burgundy);
    --action-primary-bg-hover: var(--color-coral-text-safe);
    --action-primary-fg: #18120f;
    --action-secondary-bg: var(--color-white);
    --action-secondary-bg-hover: var(--color-sand);
    --action-secondary-fg: var(--color-burgundy);
    --border-hairline: var(--color-border);
    --border-control: var(--color-muted);
    --focus-ring-color: var(--color-coral-text-safe);

    --neutral-50: #18120f;
    --neutral-100: #211a15;
    --neutral-200: #2a221b;
    --neutral-300: #42362c;
    --neutral-400: #6b5947;
    --neutral-500: #a89684;
    --neutral-600: #c9b8a4;
    --neutral-700: #e0d3c2;
    --neutral-800: #eee3d5;
    --neutral-900: #f5efe7;
}

/* Cyrylica: Manrope ma pełne pokrycie w Google Fonts (self-hosted subset w kodzie jest węższy);
   DM Serif Display nie ma wersji z cyrylicą u żadnego dostawcy — Playfair Display jako fallback
   per-znak w --font-display, tylko dla zakresu U+0400-04FF. PL/EN nadal renderują się w DM Serif
   Display. Zobacz Bywalio Design System / BRAND_GUIDELINES.md, pytanie 8. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Playfair+Display:wght@700&display=swap");

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Serif Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/dm-serif-display/dm-serif-display-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Serif Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/dm-serif-display/dm-serif-display-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html, body {
    font-family: var(--font-ui);
}

.bw-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--button-height);
    padding: 0 1.5rem;
    border-radius: var(--radius-button);
    background-color: var(--color-burgundy);
    color: var(--color-white);
    font-family: var(--font-ui);
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.bw-button-primary:hover, .bw-button-primary:focus-visible {
    background-color: var(--color-ink);
    color: var(--color-white);
}

.bw-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--button-height);
    padding: 0 1.5rem;
    border-radius: var(--radius-button);
    background-color: var(--color-white);
    color: var(--color-burgundy);
    border: 1px solid var(--color-burgundy);
    font-family: var(--font-ui);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.bw-button-secondary:hover, .bw-button-secondary:focus-visible {
    background-color: var(--color-sand);
}

a, .btn-link {
    color: var(--text-link);
}

.btn-primary {
    color: #fff;
    background-color: var(--bs-primary-bg);
    border-color: var(--bs-primary-border);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--bs-focus-ring);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--bs-valid);
}

.invalid {
    outline: 1px solid var(--bs-invalid);
}

.validation-message {
    color: var(--bs-invalid);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--bs-error-boundary-bg);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--bs-checkbox-border-dark);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}