/* ------------------------------ */
/* ---------- Sladkow ----------- */
/* ------------------------------ */

@theme theme-sladkow inline {
  /* Brand palette (vibrant) */
  --color-sladkow-50: oklch(92.8% 0.08 160);
  --color-sladkow-100: oklch(88.6% 0.1 160);
  --color-sladkow-200: oklch(80.4% 0.12 160);
  --color-sladkow-300: oklch(72.4% 0.14 160);
  --color-sladkow-400: oklch(64.6% 0.16 160);
  --color-sladkow-500: oklch(57% 0.14 160);
  --color-sladkow-600: oklch(49.6% 0.12 160);
  --color-sladkow-700: oklch(42.4% 0.1 160);
  --color-sladkow-800: oklch(35.4% 0.08 160);
  --color-sladkow-900: oklch(28.6% 0.06 160);
  --color-sladkow-950: oklch(25.3% 0.05 160);

  /* Gray palette */
  --color-sladkow-gray-50: oklch(98% 0.002 160);
  --color-sladkow-gray-100: oklch(95.5% 0.004 160);
  --color-sladkow-gray-200: oklch(89.7% 0.008 160);
  --color-sladkow-gray-300: oklch(82.7% 0.012 160);
  --color-sladkow-gray-400: oklch(73% 0.018 160);
  --color-sladkow-gray-500: oklch(62.5% 0.02 160);
  --color-sladkow-gray-600: oklch(52.8% 0.016 160);
  --color-sladkow-gray-700: oklch(41.4% 0.012 160);
  --color-sladkow-gray-800: oklch(26.9% 0.006 160);
  --color-sladkow-gray-900: oklch(20.5% 0.004 160);
  --color-sladkow-gray-950: oklch(14.1% 0.002 160);

}

:root[data-theme="theme-sladkow"],
[data-theme="theme-sladkow"] {

  /* ============================================ */
  /* GLOBAL SURFACES + TEXT                       */
  /* ============================================ */
  
  --background: var(--color-white);
  --background-1: var(--color-sladkow-gray-50);
  --background-2: var(--color-sladkow-gray-100);
  --background-plain: var(--color-white);
  --foreground: var(--color-sladkow-gray-800);
  --foreground-inverse: var(--color-white);
  
  --inverse: var(--color-primary-950);
  
  /* ============================================ */
  /* BORDERS (Full Scale)                         */
  /* ============================================ */
  
  --border: var(--color-sladkow-gray-200);
  --border-line-inverse: var(--color-white);
  --border-line-1: var(--color-sladkow-gray-100);
  --border-line-2: var(--color-sladkow-gray-200);
  --border-line-3: var(--color-sladkow-gray-300);
  --border-line-4: var(--color-sladkow-gray-400);
  --border-line-5: var(--color-sladkow-gray-500);
  --border-line-6: var(--color-sladkow-gray-600);
  --border-line-7: var(--color-sladkow-gray-700);
  --border-line-8: var(--color-sladkow-gray-800);
  
  /* ============================================ */
  /* PRIMARY RAMP (Full 11-shade scale)           */
  /* ============================================ */
  
  --primary-50: var(--color-sladkow-50);
  --primary-100: var(--color-sladkow-100);
  --primary-200: var(--color-sladkow-200);
  --primary-300: var(--color-sladkow-300);
  --primary-400: var(--color-sladkow-400);
  --primary-500: var(--color-sladkow-500);
  --primary-600: var(--color-sladkow-600);
  --primary-700: var(--color-sladkow-700);
  --primary-800: var(--color-sladkow-800);
  --primary-900: var(--color-sladkow-900);
  --primary-950: var(--color-sladkow-950);
  
  /* PRIMARY STATES */
  --primary: var(--color-primary-600);
  --primary-line: transparent;
  --primary-foreground: var(--color-white);
  --primary-hover: var(--color-primary-700);
  --primary-focus: var(--color-primary-700);
  --primary-active: var(--color-primary-700);
  --primary-checked: var(--color-primary-600);
  
  /* ============================================ */
  /* SECONDARY                                    */
  /* ============================================ */
  
  --secondary: var(--color-sladkow-gray-900);
  --secondary-line: transparent;
  --secondary-foreground: var(--color-white);
  --secondary-hover: var(--color-sladkow-gray-800);
  --secondary-focus: var(--color-sladkow-gray-800);
  --secondary-active: var(--color-sladkow-gray-800);
  
  /* ============================================ */
  /* LAYER                                        */
  /* ============================================ */
  
  --layer: var(--background-plain);
  --layer-line: var(--border);
  --layer-foreground: var(--foreground);
  --layer-hover: var(--background-1);
  --layer-focus: var(--background-1);
  --layer-active: var(--background-1);
  
  /* ============================================ */
  /* SURFACE                                      */
  /* ============================================ */
  
  --surface: var(--color-sladkow-gray-100);
  --surface-1: var(--color-sladkow-gray-200);
  --surface-2: var(--color-sladkow-gray-300);
  --surface-3: var(--color-sladkow-gray-400);
  --surface-4: var(--color-sladkow-gray-500);
  --surface-5: var(--color-sladkow-gray-600);
  --surface-line: transparent;
  --surface-foreground: var(--color-sladkow-gray-800);
  --surface-hover: var(--color-sladkow-gray-200);
  --surface-focus: var(--color-sladkow-gray-200);
  --surface-active: var(--color-sladkow-gray-200);
  
  /* ============================================ */
  /* MUTED                                        */
  /* ============================================ */
  
  --muted: var(--color-sladkow-gray-50);
  --muted-foreground: var(--color-sladkow-gray-500);
  --muted-foreground-1: var(--color-sladkow-gray-600);
  --muted-foreground-2: var(--color-sladkow-gray-700);
  --muted-hover: var(--color-sladkow-gray-100);
  --muted-focus: var(--color-sladkow-gray-100);
  --muted-active: var(--color-sladkow-gray-100);
  
  /* ============================================ */
  /* DESTRUCTIVE                                  */
  /* ============================================ */
  
  --destructive: var(--color-red-500);
  --destructive-foreground: var(--color-white);
  --destructive-hover: var(--color-red-600);
  --destructive-focus: var(--color-red-600);
  
  /* ============================================ */
  /* NAVBAR                                       */
  /* ============================================ */
  
  --navbar: var(--background-plain);
  --navbar-line: var(--border);
  --navbar-divider: var(--border);
  --navbar-nav-foreground: var(--foreground);
  --navbar-nav-hover: var(--muted-hover);
  --navbar-nav-focus: var(--muted-hover);
  --navbar-nav-active: var(--muted-hover);
  --navbar-nav-list-divider: var(--border);
  --navbar-inverse: var(--inverse);
  
  --navbar-1: var(--background-1);
  --navbar-1-line: var(--border);
  --navbar-1-divider: var(--border);
  --navbar-1-nav-foreground: var(--foreground);
  --navbar-1-nav-hover: var(--surface-1);
  --navbar-1-nav-focus: var(--surface-1);
  --navbar-1-nav-active: var(--surface-1);
  --navbar-1-nav-list-divider: var(--border);
  
  --navbar-2: var(--background-2);
  --navbar-2-line: transparent;
  --navbar-2-divider: var(--border-line-3);
  --navbar-2-nav-foreground: var(--foreground);
  --navbar-2-nav-hover: var(--surface-1);
  --navbar-2-nav-focus: var(--surface-1);
  --navbar-2-nav-active: var(--surface-1);
  --navbar-2-nav-list-divider: var(--border);
  
  /* ============================================ */
  /* SIDEBAR                                      */
  /* ============================================ */
  
  --sidebar: var(--background-plain);
  --sidebar-line: var(--border);
  --sidebar-divider: var(--border);
  --sidebar-nav-foreground: var(--foreground);
  --sidebar-nav-hover: var(--muted-hover);
  --sidebar-nav-focus: var(--muted-hover);
  --sidebar-nav-active: var(--muted-hover);
  --sidebar-nav-list-divider: var(--border);
  --sidebar-inverse: var(--inverse);
  
  --sidebar-1: var(--background-1);
  --sidebar-1-line: var(--border);
  --sidebar-1-divider: var(--border);
  --sidebar-1-nav-foreground: var(--foreground);
  --sidebar-1-nav-hover: var(--surface-1);
  --sidebar-1-nav-focus: var(--surface-1);
  --sidebar-1-nav-active: var(--surface-1);
  --sidebar-1-nav-list-divider: var(--border);
  
  --sidebar-2: var(--background-2);
  --sidebar-2-line: transparent;
  --sidebar-2-divider: var(--border);
  --sidebar-2-nav-foreground: var(--foreground);
  --sidebar-2-nav-hover: var(--surface-1);
  --sidebar-2-nav-focus: var(--surface-1);
  --sidebar-2-nav-active: var(--surface-1);
  --sidebar-2-nav-list-divider: var(--border);
  
  /* ============================================ */
  /* CARD                                         */
  /* ============================================ */
  
  --card: var(--background-plain);
  --card-line: var(--border);
  --card-divider: var(--border);
  --card-header: var(--background-2);
  --card-footer: var(--background-2);
  --card-inverse: var(--inverse);
  
  /* ============================================ */
  /* DROPDOWN                                     */
  /* ============================================ */
  
  --dropdown: var(--background-plain);
  --dropdown-1: var(--background-plain);
  --dropdown-line: transparent;
  --dropdown-divider: var(--border);
  --dropdown-header: var(--background-2);
  --dropdown-footer: var(--background-2);
  --dropdown-item-foreground: var(--foreground);
  --dropdown-item-hover: var(--muted-hover);
  --dropdown-item-focus: var(--muted-hover);
  --dropdown-item-active: var(--muted-hover);
  --dropdown-inverse: var(--inverse);
  
  /* ============================================ */
  /* SELECT                                       */
  /* ============================================ */
  
  --select: var(--background-plain);
  --select-1: var(--background-plain);
  --select-line: transparent;
  --select-item-foreground: var(--foreground);
  --select-item-hover: var(--muted-hover);
  --select-item-focus: var(--muted-hover);
  --select-item-active: var(--muted-hover);
  --select-inverse: var(--inverse);
  
  /* ============================================ */
  /* OVERLAY                                      */
  /* ============================================ */
  
  --overlay: var(--background-plain);
  --overlay-line: transparent;
  --overlay-divider: var(--border);
  --overlay-header: var(--background-2);
  --overlay-footer: var(--background-2);
  --overlay-inverse: var(--inverse);
  
  /* ============================================ */
  /* POPOVER                                      */
  /* ============================================ */
  
  --popover: var(--background-plain);
  --popover-line: var(--border-line-1);
  
  /* ============================================ */
  /* TOOLTIP                                      */
  /* ============================================ */
  
  --tooltip: var(--inverse);
  --tooltip-foreground: var(--foreground-inverse);
  --tooltip-line: transparent;
  
  /* ============================================ */
  /* TABLE                                        */
  /* ============================================ */
  
  --table-line: var(--border);
  
  /* ============================================ */
  /* SWITCH                                       */
  /* ============================================ */
  
  --switch: var(--background-plain);
  
  /* ============================================ */
  /* FOOTER                                       */
  /* ============================================ */
  
  --footer: var(--background-plain);
  --footer-line: var(--border);
  --footer-inverse: var(--inverse);
  
  /* ============================================ */
  /* SCROLLBAR                                    */
  /* ============================================ */
  
  --scrollbar-track: var(--background-1);
  --scrollbar-thumb: var(--surface-2);
  --scrollbar-track-inverse: transparent;
  --scrollbar-thumb-inverse: var(--foreground-inverse);
  /* ============================================ */
  /* CHARTS (Apexcharts)                          */
  /* ============================================ */
  
  --chart-colors-background: var(--background-plain);
  --chart-colors-background-inverse: var(--inverse);
  --chart-colors-chart-inverse: var(--background-1);
  --chart-colors-foreground: var(--foreground);
  --chart-colors-foreground-inverse: var(--foreground-inverse);
  
  --chart-primary: var(--color-primary-600);
  --chart-colors-primary: var(--color-primary-600);
  --chart-colors-primary-inverse: var(--color-primary-300);
  --chart-colors-primary-hex: var(--color-primary-600);
  --chart-colors-primary-hex-inverse: var(--color-primary-300);
  --chart-1: var(--color-primary-50);
  --chart-colors-chart-1: var(--color-primary-50);
  --chart-colors-chart-1-inverse: var(--color-primary-100);
  --chart-colors-chart-1-hex: var(--color-primary-50);
  --chart-colors-chart-1-hex-inverse: var(--color-primary-100);
  --chart-2: var(--color-primary-200);
  --chart-colors-chart-2: var(--color-primary-200);
  --chart-colors-chart-2-inverse: var(--color-primary-300);
  --chart-colors-chart-2-hex: var(--color-primary-200);
  --chart-colors-chart-2-hex-inverse: var(--color-primary-300);
  --chart-3: var(--color-primary-400);
  --chart-colors-chart-3: var(--color-primary-400);
  --chart-colors-chart-3-inverse: var(--color-primary-500);
  --chart-colors-chart-3-hex: var(--color-primary-400);
  --chart-colors-chart-3-hex-inverse: var(--color-primary-500);
  --chart-4: var(--color-primary-700);
  --chart-colors-chart-4: var(--color-primary-700);
  --chart-colors-chart-4-inverse: var(--color-primary-500);
  --chart-colors-chart-4-hex: var(--color-primary-700);
  --chart-colors-chart-4-hex-inverse: var(--color-primary-500);
  --chart-5: var(--color-primary-900);
  --chart-colors-chart-5: var(--color-primary-900);
  --chart-colors-chart-5-inverse: var(--color-primary-700);
  --chart-colors-chart-5-hex: var(--color-primary-900);
  --chart-colors-chart-5-hex-inverse: var(--color-primary-700);
  --chart-6: var(--color-sky-600);
  --chart-colors-chart-6: var(--color-sky-600);
  --chart-colors-chart-6-inverse: var(--color-sky-400);
  --chart-colors-chart-6-hex: var(--color-sky-600);
  --chart-colors-chart-6-hex-inverse: var(--color-sky-400);
  --chart-7: var(--color-emerald-600);
  --chart-colors-chart-7: var(--color-emerald-600);
  --chart-colors-chart-7-inverse: var(--color-emerald-400);
  --chart-colors-chart-7-hex: var(--color-emerald-600);
  --chart-colors-chart-7-hex-inverse: var(--color-emerald-400);
  --chart-8: var(--color-violet-600);
  --chart-colors-chart-8: var(--color-violet-600);
  --chart-colors-chart-8-inverse: var(--color-violet-400);
  --chart-colors-chart-8-hex: var(--color-violet-600);
  --chart-colors-chart-8-hex-inverse: var(--color-violet-400);
  --chart-9: var(--color-rose-500);
  --chart-colors-chart-9: var(--color-rose-500);
  --chart-colors-chart-9-inverse: var(--color-rose-300);
  --chart-colors-chart-9-hex: var(--color-rose-500);
  --chart-colors-chart-9-hex-inverse: var(--color-rose-300);
  --chart-10: var(--color-sladkow-gray-300);
  --chart-colors-chart-10: var(--color-sladkow-gray-300);
  --chart-colors-chart-10-inverse: var(--color-sladkow-gray-500);
  --chart-colors-chart-10-hex: var(--color-sladkow-gray-300);
  --chart-colors-chart-10-hex-inverse: var(--color-sladkow-gray-500);
  
  --chart-colors-candlestick-upward: var(--color-green-500);
  --chart-colors-candlestick-upward-inverse: var(--color-green-400);
  --chart-colors-candlestick-downward: var(--color-red-500);
  --chart-colors-candlestick-downward-inverse: var(--color-red-400);
  
  --chart-colors-labels: var(--color-sladkow-gray-600);
  --chart-colors-labels-inverse: var(--color-sladkow-gray-400);
  --chart-colors-xaxis-labels: var(--color-sladkow-gray-500);
  --chart-colors-xaxis-labels-inverse: var(--color-sladkow-gray-400);
  --chart-colors-yaxis-labels: var(--color-sladkow-gray-500);
  --chart-colors-yaxis-labels-inverse: var(--color-sladkow-gray-400);
  
  --chart-colors-grid-border: var(--border);
  --chart-colors-grid-border-inverse: var(--color-sladkow-gray-700);
  --chart-colors-bar-ranges: var(--surface-1);
  --chart-colors-bar-ranges-inverse: var(--color-sladkow-gray-700);
  /* ============================================ */
  /* MAPS (jsvectormap)                           */
  /* ============================================ */
  
  --map-colors-primary: var(--color-primary-500);
  --map-colors-primary-inverse: var(--color-primary-300);
  --map-colors-default: var(--surface-1);
  --map-colors-default-inverse: var(--color-sladkow-gray-700);
  --map-colors-highlight: var(--color-primary-300);
  --map-colors-highlight-inverse: var(--color-primary-500);
  --map-colors-border: var(--border-line-3);
  --map-colors-border-inverse: var(--color-sladkow-gray-600);
}

[data-theme="theme-sladkow"].dark {

  /* ============================================ */
  /* DARK MODE - Tailwind stone */
  /* ============================================ */
  
  /* BACKGROUNDS */
  --background: var(--color-stone-800);
  --background-1: var(--color-stone-900);
  --background-2: var(--color-stone-950);
  --background-plain: var(--color-stone-800);
  
  /* TEXT */
  --foreground: var(--color-stone-200);
  --foreground-inverse: var(--color-white);
  
  --inverse: var(--color-stone-950);
  
  /* BORDERS */
  --border: var(--color-stone-700);
  --border-line-inverse: var(--color-stone-200);
  --border-line-1: var(--color-stone-800);
  --border-line-2: var(--color-stone-700);
  --border-line-3: var(--color-stone-600);
  --border-line-4: var(--color-stone-500);
  --border-line-5: var(--color-stone-400);
  --border-line-6: var(--color-stone-300);
  --border-line-7: var(--color-stone-200);
  --border-line-8: var(--color-stone-100);
  
  /* PRIMARY STATES */
  --primary: var(--color-primary-500);
  --primary-line: transparent;
  --primary-foreground: var(--color-white);
  --primary-hover: var(--color-primary-600);
  --primary-focus: var(--color-primary-600);
  --primary-active: var(--color-primary-600);
  --primary-checked: var(--color-primary-500);
  
  /* SECONDARY */
  --secondary: var(--color-white);
  --secondary-line: transparent;
  --secondary-foreground: var(--color-stone-800);
  --secondary-hover: var(--color-stone-100);
  --secondary-focus: var(--color-stone-100);
  --secondary-active: var(--color-stone-100);
  
  /* LAYER */
  --layer: var(--background);
  --layer-line: var(--border);
  --layer-foreground: var(--color-white);
  --layer-hover: var(--color-stone-700);
  --layer-focus: var(--color-stone-700);
  --layer-active: var(--color-stone-700);
  
  /* SURFACE */
  --surface: var(--color-stone-700);
  --surface-1: var(--color-stone-600);
  --surface-2: var(--color-stone-500);
  --surface-3: var(--color-stone-600);
  --surface-4: var(--color-stone-500);
  --surface-5: var(--color-stone-400);
  --surface-line: transparent;
  --surface-foreground: var(--color-stone-200);
  --surface-hover: var(--color-stone-600);
  --surface-focus: var(--color-stone-600);
  --surface-active: var(--color-stone-600);
  
  /* MUTED */
  --muted: var(--color-stone-800);
  --muted-foreground: var(--color-stone-500);
  --muted-foreground-1: var(--color-stone-400);
  --muted-foreground-2: var(--color-stone-300);
  --muted-hover: var(--color-stone-700);
  --muted-focus: var(--color-stone-700);
  --muted-active: var(--color-stone-700);
  
  /* DESTRUCTIVE */
  --destructive: var(--color-red-500);
  --destructive-foreground: var(--color-white);
  --destructive-hover: var(--color-red-600);
  --destructive-focus: var(--color-red-600);
  
  /* NAVBAR */
  --navbar: var(--background);
  --navbar-line: var(--border);
  --navbar-divider: var(--border);
  --navbar-nav-foreground: var(--foreground);
  --navbar-nav-hover: var(--muted-hover);
  --navbar-nav-focus: var(--muted-hover);
  --navbar-nav-active: var(--muted-hover);
  --navbar-nav-list-divider: var(--border);
  --navbar-inverse: var(--inverse);
  
  --navbar-1: var(--background-1);
  --navbar-1-line: var(--border);
  --navbar-1-divider: var(--border);
  --navbar-1-nav-foreground: var(--foreground);
  --navbar-1-nav-hover: var(--surface);
  --navbar-1-nav-focus: var(--surface);
  --navbar-1-nav-active: var(--surface);
  --navbar-1-nav-list-divider: var(--border);
  
  --navbar-2: var(--background-2);
  --navbar-2-line: transparent;
  --navbar-2-divider: var(--border);
  --navbar-2-nav-foreground: var(--foreground);
  --navbar-2-nav-hover: var(--surface);
  --navbar-2-nav-focus: var(--surface);
  --navbar-2-nav-active: var(--surface);
  --navbar-2-nav-list-divider: var(--border);
  
  /* SIDEBAR */
  --sidebar: var(--background);
  --sidebar-line: var(--border);
  --sidebar-divider: var(--border);
  --sidebar-nav-foreground: var(--foreground);
  --sidebar-nav-hover: var(--muted-hover);
  --sidebar-nav-focus: var(--muted-hover);
  --sidebar-nav-active: var(--muted-hover);
  --sidebar-nav-list-divider: var(--border);
  --sidebar-inverse: var(--inverse);
  
  --sidebar-1: var(--background-1);
  --sidebar-1-line: var(--border);
  --sidebar-1-divider: var(--border);
  --sidebar-1-nav-foreground: var(--foreground);
  --sidebar-1-nav-hover: var(--surface);
  --sidebar-1-nav-focus: var(--surface);
  --sidebar-1-nav-active: var(--surface);
  --sidebar-1-nav-list-divider: var(--border);
  
  --sidebar-2: var(--background-2);
  --sidebar-2-line: transparent;
  --sidebar-2-divider: var(--border);
  --sidebar-2-nav-foreground: var(--foreground);
  --sidebar-2-nav-hover: var(--surface);
  --sidebar-2-nav-focus: var(--surface);
  --sidebar-2-nav-active: var(--surface);
  --sidebar-2-nav-list-divider: var(--border);
  
  /* CARD */
  --card: var(--background);
  --card-line: var(--border);
  --card-divider: var(--border);
  --card-header: var(--surface);
  --card-footer: var(--surface);
  --card-inverse: var(--inverse);
  
  /* DROPDOWN */
  --dropdown: var(--background-1);
  --dropdown-1: var(--background-2);
  --dropdown-line: transparent;
  --dropdown-divider: var(--border);
  --dropdown-header: var(--surface);
  --dropdown-footer: var(--surface);
  --dropdown-item-foreground: var(--foreground);
  --dropdown-item-hover: var(--muted-hover);
  --dropdown-item-focus: var(--muted-hover);
  --dropdown-item-active: var(--muted-hover);
  --dropdown-inverse: var(--inverse);
  
  /* SELECT */
  --select: var(--background-1);
  --select-1: var(--background-2);
  --select-line: transparent;
  --select-item-foreground: var(--foreground);
  --select-item-hover: var(--muted-hover);
  --select-item-focus: var(--muted-hover);
  --select-item-active: var(--muted-hover);
  --select-inverse: var(--inverse);
  
  /* OVERLAY */
  --overlay: var(--background);
  --overlay-line: transparent;
  --overlay-divider: var(--border);
  --overlay-header: var(--surface);
  --overlay-footer: var(--surface);
  --overlay-inverse: var(--inverse);
  
  /* POPOVER */
  --popover: var(--background-1);
  --popover-line: var(--border);
  
  /* TOOLTIP */
  --tooltip: var(--color-white);
  --tooltip-foreground: var(--color-stone-800);
  --tooltip-line: transparent;
  
  /* TABLE */
  --table-line: var(--border);
  
  /* SWITCH */
  --switch: var(--color-white);
  
  /* FOOTER */
  --footer: var(--background);
  --footer-line: var(--border);
  --footer-inverse: var(--inverse);
  
  /* SCROLLBAR */
  --scrollbar-track: var(--surface);
  --scrollbar-thumb: var(--surface-3);
  --scrollbar-track-inverse: var(--surface-4);
  --scrollbar-thumb-inverse: var(--surface-2);
  /* CHARTS - dark mode adjustments */
  --chart-colors-background: var(--background);
  --chart-colors-background-inverse: var(--color-stone-100);
  --chart-colors-chart-inverse: var(--background-1);
  --chart-colors-foreground: var(--color-stone-300);
  --chart-colors-foreground-inverse: var(--color-white);

  --chart-primary: var(--color-primary-500);
  --chart-colors-primary: var(--color-primary-500);
  --chart-colors-primary-inverse: var(--color-primary-300);
  --chart-colors-primary-hex: var(--color-primary-500);
  --chart-colors-primary-hex-inverse: var(--color-primary-300);
  --chart-1: var(--color-primary-200);
  --chart-colors-chart-1: var(--color-primary-200);
  --chart-colors-chart-1-inverse: var(--color-primary-300);
  --chart-colors-chart-1-hex: var(--color-primary-200);
  --chart-colors-chart-1-hex-inverse: var(--color-primary-300);
  --chart-2: var(--color-primary-300);
  --chart-colors-chart-2: var(--color-primary-300);
  --chart-colors-chart-2-inverse: var(--color-primary-400);
  --chart-colors-chart-2-hex: var(--color-primary-300);
  --chart-colors-chart-2-hex-inverse: var(--color-primary-400);
  --chart-3: var(--color-primary-400);
  --chart-colors-chart-3: var(--color-primary-400);
  --chart-colors-chart-3-inverse: var(--color-primary-500);
  --chart-colors-chart-3-hex: var(--color-primary-400);
  --chart-colors-chart-3-hex-inverse: var(--color-primary-500);
  --chart-4: var(--color-primary-500);
  --chart-colors-chart-4: var(--color-primary-500);
  --chart-colors-chart-4-inverse: var(--color-primary-600);
  --chart-colors-chart-4-hex: var(--color-primary-500);
  --chart-colors-chart-4-hex-inverse: var(--color-primary-600);
  --chart-5: var(--color-primary-300);
  --chart-colors-chart-5: var(--color-primary-300);
  --chart-colors-chart-5-inverse: var(--color-primary-500);
  --chart-colors-chart-5-hex: var(--color-primary-300);
  --chart-colors-chart-5-hex-inverse: var(--color-primary-500);
  --chart-6: var(--color-sky-400);
  --chart-colors-chart-6: var(--color-sky-400);
  --chart-colors-chart-6-inverse: var(--color-sky-300);
  --chart-colors-chart-6-hex: var(--color-sky-400);
  --chart-colors-chart-6-hex-inverse: var(--color-sky-300);
  --chart-7: var(--color-emerald-400);
  --chart-colors-chart-7: var(--color-emerald-400);
  --chart-colors-chart-7-inverse: var(--color-emerald-300);
  --chart-colors-chart-7-hex: var(--color-emerald-400);
  --chart-colors-chart-7-hex-inverse: var(--color-emerald-300);
  --chart-8: var(--color-violet-400);
  --chart-colors-chart-8: var(--color-violet-400);
  --chart-colors-chart-8-inverse: var(--color-violet-300);
  --chart-colors-chart-8-hex: var(--color-violet-400);
  --chart-colors-chart-8-hex-inverse: var(--color-violet-300);
  --chart-9: var(--color-rose-400);
  --chart-colors-chart-9: var(--color-rose-400);
  --chart-colors-chart-9-inverse: var(--color-rose-300);
  --chart-colors-chart-9-hex: var(--color-rose-400);
  --chart-colors-chart-9-hex-inverse: var(--color-rose-300);
  --chart-10: var(--color-stone-300);
  --chart-colors-chart-10: var(--color-stone-300);
  --chart-colors-chart-10-inverse: var(--color-stone-500);
  --chart-colors-chart-10-hex: var(--color-stone-300);
  --chart-colors-chart-10-hex-inverse: var(--color-stone-500);

  --chart-colors-labels: var(--color-stone-400);
  --chart-colors-xaxis-labels: var(--color-stone-400);
  --chart-colors-yaxis-labels: var(--color-stone-400);
  --chart-colors-grid-border: var(--border);
  --chart-colors-bar-ranges: var(--surface);
  
  /* MAPS - dark mode adjustments */
  --map-colors-default: var(--surface);
  --map-colors-default-inverse: var(--surface-2);
  --map-colors-border: var(--border-line-3);
  --map-colors-border-inverse: var(--border-line-4);
}

/* Fixed info-bar + navbar razem zajmują ~130px na desktopie i ~80px na mobile;
   bez scroll-padding-top anchor links z menu chowają nagłówki sekcji pod paskiem. */
html {
  scroll-padding-top: 130px;
}
@media (max-width: 767px) {
  html {
    scroll-padding-top: 80px;
  }
}