/* ========================================================================
   SIMTU Design System — CSS variables
   ------------------------------------------------------------------------
   Wartości zsynchronizowane z trunk/CLAUDE.md (single source of truth).
   Jeśli zmieniasz paletę / typografię — zmień TAM, potem tutaj.
   ======================================================================== */
:root {
    /* ── Tła (hierarchia głębokości) ──────────────────────────────────── */
    --bg-void:       #0a0a0a;                  /* titlebar, left rail */
    --bg-primary:    #111111;                  /* główne tło paneli */
    --bg-secondary:  rgba(29, 29, 29, 0.85);   /* glazed dark (panele) */
    --bg-tertiary:   rgba(255, 255, 255, 0.03);/* hover, table rows hover */
    --bg-elevated:   #242424;                  /* dropdowns, tooltips, modals */
    --bg-input:      rgba(29, 29, 29, 0.65);   /* inputy, search bary */
    --bg-module:     rgba(29, 29, 29, 0.5);    /* karty, widgety */

    /* ── Tekst ──────────────────────────────────────────────────────── */
    --text-primary:   #f0f0f0;                 /* główny tekst, labels */
    --text-secondary: #9c9c9c;                 /* opisy, meta, timestamps */
    --text-tertiary:  #555555;                 /* placeholder, disabled */
    --text-inverse:   #0e0e0e;                 /* tekst na jasnych tłach */

    /* ── Akcent (magenta) — OSZCZĘDNIE ──────────────────────────────── */
    --accent:        #FF0A78;                  /* aktywne, CTA, selected */
    --accent-hover:  #E8006A;                  /* hover na accent */
    --accent-dark:   #2a0015;                  /* subtelne tło dla accent */
    --accent-glow:   rgba(255, 10, 120, 0.12); /* highlighted bg */
    --accent-border: rgba(255, 10, 120, 0.40); /* aktywny input border */

    /* ── Statusy ────────────────────────────────────────────────────── */
    --status-success:  #22C55E;                /* Completed */
    --status-warning:  #F59E0B;                /* In Progress / Overdue */
    --status-danger:   #EF4444;                /* Overdue / Error */
    --status-info:     #3B82F6;                /* Not Started / Info */
    --status-neutral:  #6B7280;                /* All Tasks / Neutral */

    /* ── Kolory projektów (cyklicznie po project_id) ────────────────── */
    --project-green:  #22C55E;
    --project-purple: #A855F7;
    --project-pink:   #EC4899;
    --project-teal:   #14B8A6;
    --project-amber:  #F59E0B;
    --project-blue:   #3B82F6;

    /* ── Obramowania ────────────────────────────────────────────────── */
    --border-subtle:  rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.10);

    /* ── Border radius (z Figmy) ────────────────────────────────────── */
    --radius-xs:   2px;
    --radius-sm:   4px;     /* przyciski, logo area, badges, tags */
    --radius-md:   6px;     /* karty, search bar, filters */
    --radius-lg:   8px;     /* główne okno, aktywna ikona sidebar */
    --radius-full: 9999px;  /* avatary, pill badges */

    /* ── Spacing scale (base 4px) ───────────────────────────────────── */
    --space-1:  4px;        /* gap między modułami — kluczowe! */
    --space-2:  8px;
    --space-3:  12px;       /* padding paneli */
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;

    /* ── Wymiary fixed ──────────────────────────────────────────────── */
    --titlebar-h:  38px;
    --sidebar-w:   56px;
    --project-w:   280px;
    --nav-h:       44px;
    --module-gap:  4px;     /* odstęp między wszystkimi modułami / kartami */
    --panel-pad:   12px;
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: "Inter", -apple-system, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;          /* okno aplikacji, ekrany scrollują wewnątrz */
}

/* ── Scrollbar — dyskretny, w stylu SIMTU ───────────────────────────── */
::-webkit-scrollbar             { width: 8px; height: 8px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background: rgba(255,255,255,0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

/* ── Linki, focus, selection ────────────────────────────────────────── */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

::selection {
    background: var(--accent-glow);
    color: var(--text-primary);
}