/* ================================================
   STATUS KSEF - Design Tokens (sesja 131 v2)

   System designu z makiety #4 (Adam, 2026-04-27):
     Brand: ZIELONY #22C55E (poprzednio: gold #f2ca50)
     Font: Inter (poprzednio: Poppins/Manrope)
     Background dark: #0B1117 (poprzednio: #0d0e13)
     Surface dark: #111827 (poprzednio: #131319)

   80+ tokenow w 6 kategoriach:
     1. KOLORY (brand + state + surface + text + border)
     2. TYPOGRAFIA (Inter, 7 rol typograficznych)
     3. SPACING (8pt grid)
     4. ELEVATION (radius, shadows, glow)
     5. MOTION (duration, easing)
     6. Z-INDEX

   Aliasy backward-compat zachowane dla obecnego style.css (2336 linii).
   Tokeny ladowane PRZED style.css w index.html.
   ================================================ */

/* ============================================================
   1. KOLORY - DARK MODE (default)

   Bazowane na makiecie #4 sekcja "DARK MODE".
   ============================================================ */
:root, :root.dark {
  /* --- BRAND (zielony - sygnalizuje "system dziala stabilnie") --- */
  --brand-primary: #22C55E;          /* glowny zielony - buttony, accents, status OK */
  --brand-primary-hover: #16A34A;    /* hover state */
  --brand-primary-active: #15803D;   /* pressed state */
  --on-brand: #FFFFFF;               /* tekst na zielonym buttonie */

  /* --- BACKGROUNDS / SURFACES (4 poziomy elewacji) --- */
  --bg-base: #0B1117;                /* tlo strony - ciemny granat */
  --surface-1: #111827;              /* karty - poziom 1 (g-700) */
  --surface-2: #1F2937;              /* hover/nested - poziom 2 (g-800) */
  --surface-3: #2A3441;              /* highlight - poziom 3 */
  --surface-4: #374151;              /* tooltip/modal */
  --surface-elevated: #1F2937;       /* elevated cards w light grupie */

  /* --- TEXT (3 poziomy hierarchii) --- */
  --text-primary: #FBFAFC;           /* glowny tekst - bialy off */
  --text-secondary: #94A3B8;         /* meta, opisy */
  --text-muted: #64748B;             /* timestamps, captions */
  --text-disabled: #475569;          /* niedostepne */
  --text-on-brand: #FFFFFF;          /* tekst na zielonym (buttony) */
  --text-on-state: #FFFFFF;          /* tekst na warning/danger fill */

  /* --- BORDERS / OUTLINES --- */
  --border-subtle: #1F2937;          /* delikatne separatory */
  --border-default: #1F2937;         /* default border kart */
  --border-strong: #374151;          /* mocniejszy border */
  --border-focus: var(--brand-primary);

  /* --- STATE COLORS (4 stany SACRED + Info) --- */
  --state-ok: #22C55E;               /* zielony - sprawne (= brand-primary) */
  --state-ok-bg: rgba(34, 197, 94, 0.12);
  --state-ok-bg-strong: rgba(34, 197, 94, 0.20);

  --state-warn: #F59E0B;             /* pomaranczowy - ostrzezenie */
  --state-warn-bg: rgba(245, 158, 11, 0.12);
  --state-warn-bg-strong: rgba(245, 158, 11, 0.20);

  --state-down: #EF4444;             /* czerwony - awaria */
  --state-down-bg: rgba(239, 68, 68, 0.12);
  --state-down-bg-strong: rgba(239, 68, 68, 0.20);

  --state-maint: #3B82F6;            /* niebieski - konserwacja */
  --state-maint-bg: rgba(59, 130, 246, 0.12);
  --state-maint-bg-strong: rgba(59, 130, 246, 0.20);

  --state-info: #3B82F6;             /* niebieski - informacja (alias maint) */
  --state-info-bg: rgba(59, 130, 246, 0.12);

  /* --- INTERACTIVE --- */
  --interactive-default: var(--brand-primary);
  --interactive-hover: var(--brand-primary-hover);
  --interactive-active: var(--brand-primary-active);
  --interactive-on: var(--on-brand);

  /* --- OVERLAYS --- */
  --overlay-glass: rgba(17, 24, 39, 0.75);
  --overlay-backdrop: rgba(11, 17, 23, 0.72);
  --overlay-ghost: rgba(148, 163, 184, 0.08);
  --overlay-shimmer: rgba(255, 255, 255, 0.04);

  /* --- SCROLLBAR --- */
  --scrollbar-track: var(--bg-base);
  --scrollbar-thumb: var(--surface-3);
  --scrollbar-thumb-hover: var(--surface-4);
}

/* ============================================================
   1. KOLORY - LIGHT MODE

   Bazowane na makiecie #4 sekcja "LIGHT MODE".
   ============================================================ */
:root.light {
  /* --- BRAND --- */
  --brand-primary: #16A34A;          /* ciemniejszy zielony dla kontrastu na bialym */
  --brand-primary-hover: #15803D;
  --brand-primary-active: #166534;
  --on-brand: #FFFFFF;

  /* --- BACKGROUNDS / SURFACES --- */
  --bg-base: #FBFAFC;                /* prawie bialy - tlo strony */
  --surface-1: #FFFFFF;              /* karty - czysty bialy */
  --surface-2: #F1F5F9;              /* hover/nested */
  --surface-3: #E2E8F0;              /* highlight */
  --surface-4: #CBD5E1;              /* tooltip */
  --surface-elevated: #FFFFFF;

  /* --- TEXT --- */
  --text-primary: #0F172A;           /* prawie czarny */
  --text-secondary: #64748B;         /* meta */
  --text-muted: #94A3B8;             /* timestamps */
  --text-disabled: #CBD5E1;
  --text-on-brand: #FFFFFF;
  --text-on-state: #FFFFFF;

  /* --- BORDERS --- */
  --border-subtle: #E2E8F0;
  --border-default: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-focus: var(--brand-primary);

  /* --- STATE COLORS (lekko zmodyfikowane dla kontrastu na jasnym) --- */
  --state-ok: #16A34A;
  --state-ok-bg: rgba(22, 163, 74, 0.08);
  --state-ok-bg-strong: rgba(22, 163, 74, 0.15);

  --state-warn: #D97706;
  --state-warn-bg: rgba(217, 119, 6, 0.08);
  --state-warn-bg-strong: rgba(217, 119, 6, 0.15);

  --state-down: #DC2626;
  --state-down-bg: rgba(220, 38, 38, 0.06);
  --state-down-bg-strong: rgba(220, 38, 38, 0.12);

  --state-maint: #2563EB;
  --state-maint-bg: rgba(37, 99, 235, 0.06);
  --state-maint-bg-strong: rgba(37, 99, 235, 0.12);

  --state-info: #2563EB;
  --state-info-bg: rgba(37, 99, 235, 0.06);

  /* --- INTERACTIVE --- */
  --interactive-default: var(--brand-primary);
  --interactive-hover: var(--brand-primary-hover);
  --interactive-active: var(--brand-primary-active);
  --interactive-on: var(--on-brand);

  /* --- OVERLAYS --- */
  --overlay-glass: rgba(255, 255, 255, 0.85);
  --overlay-backdrop: rgba(15, 23, 42, 0.40);
  --overlay-ghost: rgba(15, 23, 42, 0.04);
  --overlay-shimmer: rgba(0, 0, 0, 0.02);

  /* --- SCROLLBAR --- */
  --scrollbar-track: var(--surface-2);
  --scrollbar-thumb: var(--surface-4);
  --scrollbar-thumb-hover: var(--surface-3);
}

/* ============================================================
   2. TYPOGRAFIA (Inter - oba motywy)

   Bazowane na makiecie #4 sekcja "TYPOGRAFIA".
   7 rol typograficznych z konkretnymi rozmiarami i letter-spacing.
   ============================================================ */
:root {
  /* --- FONTY --- */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-headline: var(--font-sans);     /* alias - wszystko Inter */
  --font-body: var(--font-sans);
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas, monospace;

  /* --- ROZMIARY (PIXEL based, dokladnie z makiety) --- */
  --text-h1: 32px;          /* 700 weight, -0.02em */
  --text-h2: 24px;          /* 600 weight, -0.01em */
  --text-h3: 20px;          /* 600 weight, -0.01em */
  --text-h4: 16px;          /* 600 weight, 0em */
  --text-body: 14px;        /* 400 weight, 0em (Body 1) */
  --text-body-sm: 12px;     /* 400 weight, 0.02em (Body 2) */
  --text-caption: 11px;     /* 400 weight, 0.02em */

  /* Skala harmoniczna (uzywana przez nowe komponenty + extra rozmiary) */
  --text-xs: 11px;          /* caption */
  --text-sm: 12px;          /* body small */
  --text-base: 14px;        /* body default */
  --text-md: 16px;          /* H4 / lead */
  --text-lg: 18px;          /* lead emphasis */
  --text-xl: 20px;          /* H3 */
  --text-2xl: 24px;         /* H2 */
  --text-3xl: 32px;         /* H1 */
  --text-4xl: 40px;         /* hero */
  --text-5xl: 48px;         /* mega hero */
  --text-6xl: 60px;         /* status hero */
  --text-7xl: 72px;         /* status mega */

  /* --- WAGI --- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- LINE-HEIGHT --- */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.75;

  /* --- LETTER-SPACING (z makiety #4) --- */
  --tracking-h1: -0.02em;        /* H1 */
  --tracking-h2: -0.01em;        /* H2, H3 */
  --tracking-normal: 0;          /* H4, Body 1 */
  --tracking-wide: 0.02em;       /* Body 2, Caption */
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
}

/* ============================================================
   3. SPACING (8pt grid)
   ============================================================ */
:root {
  --space-0: 0;
  --space-px: 1px;
  --space-0_5: 2px;
  --space-1: 4px;
  --space-1_5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- COMPONENT-SPECIFIC --- */
  --space-section: var(--space-16);    /* odstep miedzy sekcjami strony */
  --space-card: var(--space-6);        /* padding karty */
  --space-card-tight: var(--space-4);
  --space-stack: var(--space-4);
  --space-inline: var(--space-3);
  --space-nav: var(--space-4) var(--space-6); /* padding nav */
}

/* ============================================================
   4. ELEVATION (radius, shadow, blur)
   ============================================================ */
:root {
  /* --- RADIUS --- */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;          /* default - karty, buttony */
  --radius-lg: 12px;         /* wieksze karty */
  --radius-xl: 16px;         /* feature cards */
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;     /* pills, dots */

  /* --- SHADOWS (DARK mode - mocniejsze) --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.50);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.55);

  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.20);

  /* --- GLOW (efekty stan + brand) --- */
  --glow-brand: 0 0 24px rgba(34, 197, 94, 0.30);
  --glow-ok: 0 0 24px rgba(34, 197, 94, 0.30);
  --glow-warn: 0 0 24px rgba(245, 158, 11, 0.30);
  --glow-down: 0 0 24px rgba(239, 68, 68, 0.30);

  /* --- BLUR --- */
  --blur-xs: 4px;
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 24px;
  --blur-xl: 40px;
  --blur-glass: 16px;
}

/* SHADOWS - LIGHT mode (lzejsze) */
:root.light {
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 30px rgba(15, 23, 42, 0.10);
  --shadow-xl: 0 12px 40px rgba(15, 23, 42, 0.12);
  --shadow-2xl: 0 24px 64px rgba(15, 23, 42, 0.16);

  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.06);

  /* GLOW - delikatniejsze na jasnym */
  --glow-brand: 0 0 24px rgba(22, 163, 74, 0.20);
  --glow-ok: 0 0 24px rgba(22, 163, 74, 0.20);
  --glow-warn: 0 0 24px rgba(217, 119, 6, 0.20);
  --glow-down: 0 0 24px rgba(220, 38, 38, 0.20);
}

/* ============================================================
   5. MOTION
   ============================================================ */
:root {
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --duration-slow: 360ms;
  --duration-slower: 540ms;
  --duration-slowest: 800ms;

  --ease: cubic-bezier(0.3, 0, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   6. Z-INDEX SCALE
   ============================================================ */
:root {
  --z-base: 0;
  --z-content: 10;
  --z-overlay: 100;
  --z-dropdown: 200;
  --z-sticky: 300;
  --z-banner: 400;
  --z-nav: 500;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-popover: 1100;
  --z-tooltip: 1200;
  --z-toast: 1300;
  --z-max: 9999;
}

/* ============================================================
   ALIASY BACKWARD-COMPAT (dla style.css 2336 linii)
   Mapuja stare nazwy na nowe tokeny v2.
   USUWAC po refaktorze style.css w Krokach B-C.

   UWAGA: w sesji 131 v2 zmieniaja sie:
   - --primary:        gold (#f2ca50) → green (#22C55E)
   - --surface-lowest: #0d0e13 → #0B1117
   - --surface:        #131319 → #111827
   - font-headline/body: Poppins/Manrope → Inter
   To jest CELOWE - wymagana redesign zgodnie z makieta #4.
   ============================================================ */
:root, :root.dark {
  --surface-lowest: var(--bg-base);
  --surface: var(--surface-1);
  --surface-low: var(--surface-2);
  --surface-container: var(--surface-2);
  --surface-high: var(--surface-3);
  --surface-border: var(--border-default);

  --primary: var(--brand-primary);
  --primary-container: var(--brand-primary-hover);
  --on-primary: var(--on-brand);

  --success: var(--state-ok);
  --warning: var(--state-warn);
  --error: var(--state-down);
  --error-container: rgba(239, 68, 68, 0.20);

  --on-surface: var(--text-primary);
  --on-surface-variant: var(--text-secondary);
  --on-surface-muted: var(--text-muted);
  --on-surface-secondary: var(--text-secondary);

  --outline: var(--text-muted);
  --glass-bg: var(--overlay-glass);
  --shadow: var(--shadow-xl);
  --ghost: var(--overlay-ghost);
}

:root.light {
  --surface-lowest: var(--bg-base);
  --surface: var(--surface-1);
  --surface-low: var(--surface-2);
  --surface-container: var(--surface-2);
  --surface-high: var(--surface-3);
  --surface-border: var(--border-default);

  --primary: var(--brand-primary);
  --primary-container: var(--brand-primary-hover);
  --on-primary: var(--on-brand);

  --success: var(--state-ok);
  --warning: var(--state-warn);
  --error: var(--state-down);
  --error-container: rgba(220, 38, 38, 0.10);

  --on-surface: var(--text-primary);
  --on-surface-variant: var(--text-secondary);
  --on-surface-muted: var(--text-muted);
  --on-surface-secondary: var(--text-secondary);

  --outline: var(--text-muted);
  --glass-bg: var(--overlay-glass);
  --shadow: var(--shadow-lg);
  --ghost: var(--overlay-ghost);
}

/* ============================================================
   COLOR-SCHEME META
   ============================================================ */
:root, :root.dark { color-scheme: dark; }
:root.light { color-scheme: light; }