/* ============================================================================
   WYSYŁKI — DESIGN TOKENS (jedyne źródło prawdy motywu).
   Zmiana wyglądu całej platformy = edycja wartości tutaj. Reszta CSS używa
   wyłącznie tych zmiennych. Motyw: jasny, stonowany fiolet + biel, akcenty różu.
   ========================================================================== */
:root {
    /* Skala fioletu (primary) */
    --violet-50:  #f6f4fd;
    --violet-100: #ece7fb;
    --violet-200: #d9cef5;
    --violet-300: #bcabec;
    --violet-400: #9b82e2;
    --violet-500: #7c5cd6;
    --violet-600: #6a49c2;
    --violet-700: #573aa1;
    --violet-800: #43317a;

    /* Skala różu (akcent) */
    --pink-300: #f9a8d0;
    --pink-400: #f472b6;
    --pink-500: #ec4899;
    --pink-600: #db2777;

    /* Powierzchnie (biel z subtelnym fioletowym podbarwieniem) */
    --background:    #faf9fe;
    --surface:       #ffffff;
    --surface-2:     #f4f1fb;
    --surface-3:     #ece7f8;
    --surface-sunken:#f6f4fd;

    /* Treść / kontury */
    --on-surface:     #211c33;
    --on-surface-mut: #6b6485;
    --outline:        #cfc7e6;
    --outline-soft:   #e8e3f4;

    /* Role semantyczne */
    --primary:           var(--violet-500);
    --primary-strong:    var(--violet-600);
    --primary-container: var(--violet-100);
    --on-primary:        #ffffff;
    --on-primary-container: var(--violet-700);

    --accent:            var(--pink-500);
    --accent-strong:     var(--pink-600);
    --accent-container:  #fde4f1;
    --on-accent:         #ffffff;

    --success:        #1f9d6b;
    --success-bg:     #dcf6ec;
    --warning:        #b97800;
    --warning-bg:     #ffeccb;
    --danger:         #d23c4e;
    --danger-bg:      #fde3e6;
    --info:           var(--violet-500);
    --info-bg:        var(--violet-100);

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

    /* Cienie (miękkie, fioletowy refleks) */
    --shadow-sm:   0 1px 2px rgba(67, 49, 122, 0.06);
    --shadow-card: 0 6px 24px rgba(67, 49, 122, 0.07);
    --shadow-pop:  0 14px 40px rgba(67, 49, 122, 0.14);
    --ring: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);

    /* Odstępy */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;

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

/* ============================================================================
   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-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

::selection { background: var(--violet-200); color: var(--violet-800); }

.muted { color: var(--on-surface-mut); font-size: 14px; }
.h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--on-surface); }
.h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 24px 0 12px; }

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

* { scrollbar-width: thin; scrollbar-color: var(--outline) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--outline); border-radius: var(--r-pill); }
*::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }