/*
  DESIGN TOKENS — Rozliczenia Vistula (Premium UI)
  Jedno źródło prawdy dla kolorów, typografii, odstępów, promieni, cieni, ruchu i layoutu.
  Pozostałe arkusze (ui-base, components, app-bridge, theme-modern, shell, dashboard) wyłącznie
  odwołują się do tych zmiennych. Czcionka Inter ładowana jest z własnych plików (fonts.css).

  Punkty graniczne (media queries nie przyjmują zmiennych — wartości dokumentacyjne):
    480px  telefon (1 kolumna KPI)
    860px  tablet pionowy / telefon: sidebar → szuflada, topbar mobilny
   1100px  tablet poziomy: siatka pulpitu 2 kolumny
   1280px  desktop: siatka pulpitu 3 kolumny (wykresy + widżet statusów)
*/

:root {
  /* --- Kolor: tło i powierzchnie --- */
  --color-bg: #F4F3FB;
  --color-bg-raised: #FAFAFE;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F5F5FC;
  --color-surface-sunken: #EEF0F8;

  /* --- Kolor: obramowania --- */
  --color-border: #E9EBF3;
  --color-border-strong: #D6DAE8;
  --color-border-focus: #6D4AEE;

  /* --- Kolor: tekst (granat z chłodnym odcieniem; kontrast ≥ 4.5:1 na białym) --- */
  --color-text: #161A2E;
  --color-text-secondary: #4E5470;
  --color-text-muted: #636988;
  --color-text-on-accent: #FFFFFF;
  --color-text-link: #5B3ACF;

  /* --- Kolor: akcent (fiolet) --- */
  --color-accent: #6D4AEE;
  --color-accent-hover: #5B3ACF;
  --color-accent-active: #4A2FB0;
  --color-accent-tint: #F1EDFE;
  --color-accent-tint-strong: #E2D9FB;
  --accent-gradient: linear-gradient(135deg, #8062F7 0%, #6D4AEE 48%, #5636CF 100%);

  /* --- Kolor: stany --- */
  --color-success: #15804A;
  --color-success-tint: #E5F8EC;
  --color-success-border: #BFE9D0;

  --color-warning: #92600A;
  --color-warning-tint: #FDF1DC;
  --color-warning-border: #F2DBA8;

  --color-danger: #C22B3D;
  --color-danger-tint: #FCE9EC;
  --color-danger-border: #F5C6CE;

  --color-info: #2461B0;
  --color-info-tint: #EAF2FC;
  --color-info-border: #C7DEF7;

  --color-neutral-tint: #EFEFF6;
  --color-neutral-border: #DBDCE9;

  /* --- Kolor: kafelki kategorii (dekoracyjne, spójne w całej aplikacji) ---
     niebieski = sprzedaż, pomarańczowy = koszty, fioletowy = różnica netto,
     zielony = różnica VAT / sukces, czerwony = wartości ujemne. */
  --tile-blue-fg: #2F6FED;
  --tile-blue-bg: #EAF1FE;
  --tile-orange-fg: #C36A16;
  --tile-orange-bg: #FCEEDD;
  --tile-purple-fg: #6D4AEE;
  --tile-purple-bg: #F1ECFD;
  --tile-green-fg: #178F5E;
  --tile-green-bg: #E4F7ED;
  --tile-red-fg: #D6334F;
  --tile-red-bg: #FDE8EC;

  /* --- Gradienty: kafelki ikon (pełne) i tła kart KPI (delikatne) --- */
  --grad-blue: linear-gradient(145deg, #4F8DFB 0%, #2B63E8 100%);
  --grad-orange: linear-gradient(145deg, #FFB45E 0%, #F58220 100%);
  --grad-purple: linear-gradient(145deg, #8F73F8 0%, #5F3FDC 100%);
  --grad-green: linear-gradient(145deg, #3FD28F 0%, #14A864 100%);
  --grad-red: linear-gradient(145deg, #FF6B88 0%, #E1334F 100%);
  --grad-neutral: linear-gradient(145deg, #9CA3C4 0%, #6C7396 100%);

  --card-tint-blue: linear-gradient(135deg, #E8EFFF 0%, #F6F9FF 100%);
  --card-tint-orange: linear-gradient(135deg, #FFF0E0 0%, #FFF8F0 100%);
  --card-tint-purple: linear-gradient(135deg, #EFEAFF 0%, #F8F6FF 100%);
  --card-tint-green: linear-gradient(135deg, #E3F6EB 0%, #F2FBF6 100%);
  --card-tint-red: linear-gradient(135deg, #FFE7EC 0%, #FFF5F7 100%);

  /* --- Kolor: sidebar (granat → fiolet) --- */
  --sidebar-bg: linear-gradient(180deg, #15173D 0%, #1A1C4C 52%, #211A5B 100%);
  --sidebar-text: rgba(255, 255, 255, 0.74);
  --sidebar-text-strong: #FFFFFF;
  --sidebar-text-muted: rgba(255, 255, 255, 0.52);
  --sidebar-hover: rgba(255, 255, 255, 0.07);
  --sidebar-border: rgba(255, 255, 255, 0.09);
  --sidebar-active-gradient: linear-gradient(135deg, #8A6CF9 0%, #6D4AEE 55%, #5A3DDB 100%);
  --sidebar-active-shadow: 0 10px 22px -8px rgba(109, 74, 238, 0.75);

  /* --- Kolor: wykresy --- */
  --chart-sales: #4F86F2;
  --chart-sales-soft: #8FB2F7;
  --chart-costs: #FFA24C;
  --chart-costs-soft: #FFC48A;
  --chart-diff: #6D4AEE;
  --chart-grid: #E6E8F2;
  --chart-axis: #6A7090;
  --chart-highlight: rgba(109, 74, 238, 0.07);
  --chart-source-1: #2F6FED;
  --chart-source-2: #6D4AEE;
  --chart-source-3: #E67E22;

  /* --- Typografia --- */
  --font-ui: "Inter Variable", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --fs-2xs: 0.6875rem;   /* 11px */
  --fs-xs: 0.75rem;      /* 12px */
  --fs-sm: 0.8125rem;    /* 13px */
  --fs-base: 0.9375rem;  /* 15px */
  --fs-md: 1.0625rem;    /* 17px */
  --fs-lg: 1.25rem;      /* 20px */
  --fs-xl: 1.625rem;     /* 26px */
  --fs-2xl: 2rem;        /* 32px */
  --fs-3xl: 2.5rem;      /* 40px */

  --lh-tight: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --num-feature: var(--fw-semibold) var(--fs-2xl)/var(--lh-tight) var(--font-ui);

  /* --- Odstępy (siatka 4px) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Promienie i cienie --- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(22, 26, 46, 0.04);
  --shadow-sm: 0 1px 2px rgba(22, 26, 46, 0.04), 0 8px 20px -8px rgba(22, 26, 46, 0.09);
  --shadow-md: 0 24px 48px -16px rgba(22, 26, 46, 0.22), 0 6px 14px rgba(22, 26, 46, 0.06);
  --shadow-card: 0 1px 2px rgba(34, 30, 84, 0.05), 0 12px 28px -14px rgba(52, 40, 130, 0.16);
  --shadow-focus: 0 0 0 4px rgba(109, 74, 238, 0.22);
  --shadow-tile-blue: 0 10px 20px -8px rgba(43, 99, 232, 0.55);
  --shadow-tile-orange: 0 10px 20px -8px rgba(245, 130, 32, 0.55);
  --shadow-tile-purple: 0 10px 20px -8px rgba(95, 63, 220, 0.55);
  --shadow-tile-green: 0 10px 20px -8px rgba(20, 168, 100, 0.5);
  --shadow-tile-red: 0 10px 20px -8px rgba(225, 51, 79, 0.5);

  /* --- Warstwy --- */
  --z-nav: 100;
  --z-dropdown: 200;
  --z-modal-backdrop: 300;
  --z-modal: 310;
  --z-toast: 400;
  --z-tooltip: 500;

  /* --- Czas trwania animacji --- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* --- Layout --- */
  --sidebar-w: 268px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 68px;
  --content-max: 1480px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}