/* =============================================================================
   OTMS — _vars.css : zmienne CSS, tryb jasny/ciemny, design tokens
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* ── Marka Optimus ── */
    --brand-navy:        #0c1d3a;   /* granat głęboki (logo) */
    --brand-blue:        #2563eb;   /* niebieski Optimus (logo) */
    --brand-blue-light:  #3b82f6;
    --brand-blue-dark:   #1d4ed8;
    --brand-accent:      #60a5fa;

    /* ── Statusy operacyjne (uniwersalne) ── */
    --st-success:        #16a34a;
    --st-success-bg:     #dcfce7;
    --st-success-border: #86efac;
    --st-warning:        #f59e0b;
    --st-warning-bg:     #fef3c7;
    --st-warning-border: #fcd34d;
    --st-danger:         #dc2626;
    --st-danger-bg:      #fee2e2;
    --st-danger-border:  #fca5a5;
    --st-info:           #0ea5e9;
    --st-info-bg:        #e0f2fe;
    --st-info-border:    #7dd3fc;
    --st-customs:        #7c3aed;
    --st-customs-bg:     #ede9fe;
    --st-customs-border: #c4b5fd;
    --st-neutral:        #64748b;
    --st-neutral-bg:     #f1f5f9;
    --st-neutral-border: #cbd5e1;

    /* ── Layout / Tło / Tekst (TRYB JASNY) ── */
    --bg:                #f6f8fb;
    --bg-elevated:       #ffffff;
    --card:              #ffffff;
    --card-hover:        #fafbfc;
    --sidebar-bg:        var(--brand-navy);
    --sidebar-text:      #e2e8f0;
    --sidebar-text-dim:  #94a3b8;
    --sidebar-active-bg: rgba(255, 255, 255, .08);
    --sidebar-active-bd: var(--brand-blue-light);
    --topbar-bg:         rgba(255, 255, 255, .85);
    --topbar-border:     #e2e8f0;

    --text:              #0f172a;
    --text-soft:         #334155;
    --text-muted:        #64748b;
    --text-dim:          #94a3b8;

    --border:            #e2e8f0;
    --border-strong:     #cbd5e1;
    --line:              #e5e7eb;

    /* ── Cienie ── */
    --shadow-sm:  0 1px 2px rgba(15, 23, 42, .04);
    --shadow:     0 2px 8px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md:  0 8px 24px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
    --shadow-lg:  0 16px 48px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .06);
    --shadow-pop: 0 24px 64px rgba(37, 99, 235, .18);

    /* ── Promienie ── */
    --r-xs:  4px;
    --r-sm:  6px;
    --r:     10px;
    --r-md:  14px;
    --r-lg:  18px;
    --r-xl:  24px;

    /* ── Typografia ── */
    --font:       'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, monospace;

    /* ── Tranzycje ── */
    --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
    --t:      200ms cubic-bezier(.4, 0, .2, 1);
    --t-slow: 320ms cubic-bezier(.4, 0, .2, 1);

    /* ── Skala odstępów (premium, spójna) ── */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

    /* ── Hierarchia finansów (przychód/koszt/marża) ── */
    --fin-income:      var(--st-success);
    --fin-cost:        var(--st-danger);
    --fin-base:        var(--text);
    --fin-extra:       var(--text-muted);
    --fin-margin-pos:  #047857;
    --fin-margin-neg:  #b91c1c;

    /* ── Statusy dokumentów (różowy→żółty→niebieski→zielony) ── */
    --doc-missing:     var(--st-danger);
    --doc-missing-bg:  color-mix(in srgb, var(--st-danger) 8%, var(--card));
    --doc-entered:     #b45309;
    --doc-entered-bg:  color-mix(in srgb, var(--st-warning) 12%, var(--card));
    --doc-added:       var(--st-info);
    --doc-added-bg:    color-mix(in srgb, var(--st-info) 10%, var(--card));
    --doc-confirmed:   var(--st-success);
    --doc-confirmed-bg:color-mix(in srgb, var(--st-success) 10%, var(--card));

    /* ── Layout fixes ── */
    --sidebar-w: 232px;
    --sidebar-collapsed-w: 60px;
    --topbar-h:  56px;
}

/* ===== TRYB CIEMNY ===== */
body.theme-dark {
    --bg:                #0a0f1f;
    --bg-elevated:       #131a2b;
    --card:              #1a2238;
    --card-hover:        #1f2842;
    --sidebar-bg:        #060b18;
    --sidebar-text:      #e2e8f0;
    --sidebar-text-dim:  #64748b;
    --sidebar-active-bg: rgba(96, 165, 250, .12);
    --topbar-bg:         rgba(19, 26, 43, .85);
    --topbar-border:     #1e293b;

    --text:              #f1f5f9;
    --text-soft:         #cbd5e1;
    --text-muted:        #94a3b8;
    --text-dim:          #64748b;

    --border:            #1e293b;
    --border-strong:     #334155;
    --line:              #1e293b;

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, .3);
    --shadow:     0 2px 8px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .2);
    --shadow-md:  0 8px 24px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .25);
    --shadow-lg:  0 16px 48px rgba(0, 0, 0, .55), 0 4px 8px rgba(0, 0, 0, .35);
    --shadow-pop: 0 24px 64px rgba(96, 165, 250, .35);

    --st-success-bg:     rgba(22, 163, 74, .14);
    --st-warning-bg:     rgba(245, 158, 11, .14);
    --st-danger-bg:      rgba(220, 38, 38, .14);
    --st-info-bg:        rgba(14, 165, 233, .14);
    --st-customs-bg:     rgba(124, 58, 237, .14);
    --st-neutral-bg:     rgba(100, 116, 139, .14);
}

/* Reset minimum */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Subtelne tło z gradientami (tylko tryb jasny - ledwo widoczne) */
body:not(.theme-dark)::before {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(1200px 600px at 100% 0%, rgba(37, 99, 235, .04), transparent 50%),
        radial-gradient(800px 400px at 0% 100%, rgba(124, 58, 237, .03), transparent 50%);
    pointer-events: none;
    z-index: 0;
}
body.theme-dark::before {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(1200px 600px at 100% 0%, rgba(37, 99, 235, .08), transparent 50%),
        radial-gradient(800px 400px at 0% 100%, rgba(124, 58, 237, .06), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

a { color: var(--brand-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
code, kbd { font-family: var(--font-mono); font-size: .9em; }

/* Scroll - subtelny */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 5px;
    border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }