/* ============================================================================
   NexusFlow — DESIGN TOKENS (jedyne źródło prawdy motywu).
   Chcesz zmienić wygląd w przyszłości? Edytuj wartości tutaj — reszta CSS
   korzysta wyłącznie z tych zmiennych (Material Design 3, motyw „Clarity & Momentum").
   ========================================================================== */
:root {
    /* Powierzchnie (jasne, „airy neutrals") */
    --surface: #f7f9fb;
    --surface-dim: #d8dadc;
    --surface-bright: #f7f9fb;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f2f4f6;
    --surface-container: #eceef0;
    --surface-container-high: #e6e8ea;
    --surface-container-highest: #e0e3e5;
    --background: #f7f9fb;

    /* Treść / kontury */
    --on-surface: #191c1e;
    --on-surface-variant: #3f4850;
    --on-background: #191c1e;
    --outline: #707881;
    --outline-variant: #bfc7d2;
    --inverse-surface: #2d3133;
    --inverse-on-surface: #eff1f3;

    /* Primary — Ocean Blue (akcje, nawigacja, zadania) */
    --primary: #006194;
    --on-primary: #ffffff;
    --primary-container: #007bb9;
    --on-primary-container: #fdfcff;
    --primary-fixed: #cce5ff;
    --primary-fixed-dim: #93ccff;
    --on-primary-fixed: #001d31;
    --on-primary-fixed-variant: #004b73;
    --inverse-primary: #93ccff;

    /* Secondary — Emerald (sukces, ukończenie, postęp) */
    --secondary: #006c4a;
    --on-secondary: #ffffff;
    --secondary-container: #82f5c1;
    --on-secondary-container: #00714e;
    --secondary-fixed: #85f8c4;
    --secondary-fixed-dim: #68dba9;
    --on-secondary-fixed: #002114;

    /* Tertiary — Soft Pink (finanse, akcent) */
    --tertiary: #b5005d;
    --on-tertiary: #ffffff;
    --tertiary-container: #da2676;
    --tertiary-fixed: #ffd9e2;
    --tertiary-fixed-dim: #ffb1c7;
    --on-tertiary-fixed: #3f001c;
    --on-tertiary-fixed-variant: #8e0048;

    /* Stany */
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;
    --warning: #9a6700;
    --warning-container: #ffe6b8;
    --on-warning-container: #5c3d00;
    --success: var(--secondary);

    /* Promienie */
    --r-xs: 0.25rem;
    --r-sm: 0.5rem;
    --r-md: 0.75rem;
    --r-lg: 1rem;
    --r-xl: 1.5rem;
    --r-pill: 9999px;

    /* Cienie (Floating / Ambient) */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.08);
    --ring: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);

    /* Odstępy (8px base grid) */
    --sp-xs: 4px;
    --sp-sm: 12px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;
    --sp-xxl: 48px;

    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sidebar-w: 256px;
    --topbar-h: 64px;

    /* Priorytety (czytelne na jasnym tle, biały tekst na wypełnieniu) */
    --c-low: #707881;
    --c-medium: #006194;
    --c-high: #9a6700;
    --c-critical: #ba1a1a;

    /* ---- Aliasy zgodności ze starymi nazwami (--c-*), zmapowane na jasny motyw.
       Dzięki temu pozostałe reguły/inline-style nie pękają w trakcie migracji. ---- */
    --c-bg: var(--surface);
    --c-surface: var(--surface-container-lowest);
    --c-surface-2: var(--surface-container-low);
    --c-text: var(--on-surface);
    --c-text-muted: var(--on-surface-variant);
    --c-border: var(--outline-variant);
    --c-primary: var(--primary);
    --c-primary-hover: var(--on-primary-fixed-variant);
    --c-success: var(--secondary);
    --c-warning: var(--warning);
    --c-danger: var(--error);
}

/* ============================================================================
   BASE / RESET
   ========================================================================== */
* { box-sizing: border-box; margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100dvh;
    background: var(--background);
    color: var(--on-surface);
    font: 400 15px/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

::selection { background: var(--primary-fixed); color: var(--on-primary-fixed); }

/* Tytuły / tekst pomocniczy */
.muted { color: var(--on-surface-variant); font-size: 14px; }
.h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--on-surface); }
.h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 24px 0 12px; color: var(--on-surface); }

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    user-select: none;
}

/* Pasek przewijania (subtelny, jasny) */
* { scrollbar-width: thin; scrollbar-color: var(--outline-variant) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: var(--r-pill); }
*::-webkit-scrollbar-track { background: transparent; }

/* Dostępność: focus widoczny */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }