/* ===== TOKENS.CSS — tokeny design systemu Flowpeek =====
 *
 * Jedyne źródło wartości wizualnych panelu (docs/design-system.md).
 * Ładowany jako PIERWSZY arkusz (includes/style_registry.php) — każdy
 * kolor, promień i cień w pozostałych arkuszach powinien wskazywać
 * na token `--fp-*` zamiast powtarzać wartość.
 *
 * Sekcja "aliasy legacy" utrzymuje historyczne nazwy zmiennych
 * (--primary, --text-primary, --gray-*, --shadow-*), których używa
 * starszy kod — wszystkie wskazują na tokeny systemowe.
 */

:root {
    /* --- Typografia --- */
    --fp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* --- Tekst --- */
    --fp-ink: #101319;          /* tekst główny */
    --fp-muted: #667085;        /* tekst drugorzędny */
    --fp-faint: #98A2B3;        /* osie, etykiety, nagłówki tabel */

    /* --- Tła i powierzchnie --- */
    --fp-bg: #F7F8FA;           /* tło strony i sidebara */
    --fp-surface: #FFFFFF;      /* karta */
    --fp-border: #E7EAF0;       /* ramka karty, linia osi X, separatory mocne */
    --fp-grid: #EEF1F5;         /* siatka wykresów, separatory wierszy, tła subtle */
    --fp-hover: rgba(63, 95, 134, 0.045); /* hover wierszy tabel */

    /* --- Akcent UI (przyciski, linki, aktywne stany) --- */
    --fp-accent: #3F5F86;
    --fp-accent-strong: #2E4A6A;
    --fp-accent-soft: #6B86A6;
    --fp-accent-bg: rgba(63, 95, 134, 0.12);
    --fp-focus-ring: rgba(63, 95, 134, 0.18);

    /* --- Statusy: jedna para dobrze/źle + warning/info --- */
    --fp-positive: #1F9D6C;
    --fp-positive-strong: #177A54;      /* tekst na tintach */
    --fp-positive-bg: #E4F5EE;
    --fp-negative: #D64545;
    --fp-negative-strong: #B23838;
    --fp-negative-bg: #FBEAEA;
    --fp-warning: #B18846;
    --fp-warning-strong: #8A6116;   /* tekst na tintach */
    --fp-warning-bg: #FBF3E4;
    --fp-info: #4D739D;

    /* --- Paleta danych (window.FlowpeekChartPalette, ta sama kolejność) --- */
    --fp-data-1: #6D8FC7;
    --fp-data-2: #55A48C;
    --fp-data-3: #C99E58;
    --fp-data-4: #7A6BB5;
    --fp-data-5: #B56A66;
    --fp-data-6: #5E9FB8;
    --fp-data-7: #8B8F5C;
    --fp-data-8: #A671A6;

    /* --- Promienie --- */
    --fp-radius-card: 18px;     /* karty */
    --fp-radius: 12px;          /* panele, tooltipy, inputy, przyciski */
    --fp-radius-sm: 9px;        /* chipy, małe elementy, słupki */
    --fp-radius-pill: 999px;    /* pigułki */

    /* --- Cienie --- */
    --fp-shadow-card: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --fp-shadow-pop: 0 14px 36px -14px rgba(16, 19, 25, 0.22), 0 2px 6px rgba(16, 19, 25, 0.05);

    /* ===== Aliasy legacy (starsze nazwy używane w kodzie) ===== */

    /* Primary Colors */
    --primary: var(--fp-accent);
    --primary-light: var(--fp-accent-soft);
    --primary-dark: var(--fp-accent-strong);
    --primary-hover: var(--fp-accent-strong);
    --secondary: #4C7E78;
    --accent: #B78D52;

    /* Status Colors */
    --success: var(--fp-positive);
    --warning: var(--fp-warning);
    --danger: var(--fp-negative);
    --info: var(--fp-info);

    /* Grays */
    --white: #FFFFFF;
    --gray-50: var(--fp-bg);
    --gray-100: var(--fp-grid);
    --gray-200: var(--fp-border);
    --gray-300: #D6DDE6;
    --gray-400: var(--fp-faint);
    --gray-500: var(--fp-muted);
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: var(--fp-ink);

    /* Backgrounds */
    --bg-primary: var(--fp-surface);
    --bg-secondary: var(--fp-bg);
    --bg-card: var(--fp-surface);
    --bg-hover: var(--fp-grid);
    --sidebar-bg: var(--fp-bg);

    /* Text Colors */
    --text-primary: var(--fp-ink);
    --text-secondary: var(--fp-muted);
    --text-muted: var(--fp-faint);
    --text-light: #D6DDE6;

    /* Borders */
    --border-light: var(--fp-border);
    --border-medium: #D6DDE6;
    --border-color: var(--fp-border);

    /* Shadows */
    --shadow-sm: var(--fp-shadow-card);
    --shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.06), 0 1px 1px 0 rgba(15, 23, 42, 0.04);
    --shadow-md: 0 3px 8px -2px rgba(15, 23, 42, 0.08), 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 8px 20px -6px rgba(15, 23, 42, 0.1), 0 3px 8px -3px rgba(15, 23, 42, 0.07);

    /* UI Accent Helpers */
    --primary-soft-bg: var(--fp-accent-bg);
    --focus-ring: var(--fp-focus-ring);

    /* Transitions */
    --transition-base: all 0.2s ease;
    --transition-fast: all 0.15s ease;

    /* Border Radius */
    --radius-sm: var(--fp-radius-sm);
    --radius: var(--fp-radius);
    --radius-md: 1rem;
    --radius-lg: var(--fp-radius-card);

    /* Layout */
    --sidebar-width: 20%;
    --header-height: 60px;
}