/* ==========================================
   🎨 CSS VARIABLES - GLOBALNE ZMIENNE
   CENTRALNE ZARZĄDZANIE KOLORAMI - LIGHT & DARK MODE
   ========================================== */

:root {
    /* ==========================================
       🎯 NADPISANIE ZMIENNYCH ASTRA (PRIORYTET)
       Astra używa --ast-global-color-* dla tła kontenerów.
       Nadpisujemy je aby dziedziczyły nasze globalne tło.
       ========================================== */
    --ast-global-color-4: transparent;
    --ast-global-color-5: transparent;
    
    /* ==========================================
       📝 TYPOGRAFIA - CZCIONKI
       System fonts dla maksymalnej wydajności i natywnego wyglądu
       ========================================== */
    
    /* Główna czcionka - UI Text */
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* Czcionka dla kodu/danych technicznych */
    --font-mono: 'Courier New', Consolas, Monaco, monospace;
    
    /* Czcionka dla emoji (flagi państw, etc.) */
    --font-emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    
    /* ==========================================
       📏 TYPOGRAFIA - WIELKOŚCI CZCIONEK
       Skala oparta na modular scale (1.25 - Major Third)
       Bazowa wielkość: 16px (1rem)
       ========================================== */
    
    /* Tekst */
    --fs-xs: 0.75rem;    /* 12px - tekst bardzo mały (meta, timestamps) */
    --fs-sm: 0.875rem;   /* 14px - tekst mały (opisy, labels) */
    --fs-base: 1rem;     /* 16px - tekst bazowy (paragrafy, body) */
    --fs-md: 1.125rem;   /* 18px - tekst średni (lead, intro) */
    --fs-lg: 1.25rem;    /* 20px - tekst duży (podtytuły) */
    
    /* Nagłówki */
    --fs-h6: 1rem;       /* 16px - h6 */
    --fs-h5: 1.125rem;   /* 18px - h5 */
    --fs-h4: 1.25rem;    /* 20px - h4 */
    --fs-h3: 1.5rem;     /* 24px - h3 */
    --fs-h2: 1.875rem;   /* 30px - h2 */
    --fs-h1: 2.25rem;    /* 36px - h1 */
    
    /* Hero/Display */
    --fs-display-sm: 2.625rem;  /* 42px - hero małe */
    --fs-display-md: 3rem;      /* 48px - hero średnie */
    --fs-display-lg: 3.75rem;   /* 60px - hero duże */
    
    /* ==========================================
       📐 TYPOGRAFIA - LINE HEIGHT
       Optymalne dla czytelności
       ========================================== */
    --lh-tight: 1.25;    /* Nagłówki */
    --lh-normal: 1.6;    /* Tekst bazowy */
    --lh-relaxed: 1.75;  /* Długie paragrafy */
    
    /* ==========================================
       🎨 HERO SECTIONS - GLOBALNE STYLE
       Centralne zarządzanie wyglądem wszystkich hero sections
       ========================================== */
    --hero-padding: 50px 30px;
    --hero-padding-sm: 30px 20px;  /* mobile */
    --hero-margin-bottom: 30px;
    --hero-border-radius: var(--border-radius-lg);
    --hero-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    --hero-text-color: #ffffff;    /* ⭐ Kolor tekstu w hero - LIGHT MODE */
    
    /* Hero Text Styles - H1 */
    --hero-h1-size: 2.8rem;        /* 44.8px - desktop */
    --hero-h1-weight: 700;
    --hero-h1-line-height: 1.2;
    --hero-h1-margin: 15px;
    
    /* Hero Text Styles - Paragraph */
    --hero-p-size: 1rem;           /* 16px - desktop */
    --hero-p-opacity: 0.9;
    --hero-p-line-height: 1.5;
    
    /* Hero Responsive - Tablet (1024px) */
    --hero-h1-size-tablet: 2.2rem;   /* 35.2px */
    --hero-p-size-tablet: 0.95rem;   /* 15.2px */
    
    /* Hero Responsive - Mobile (768px) */
    --hero-h1-size-mobile: 2rem;     /* 32px */
    --hero-p-size-mobile: 0.9rem;    /* 14.4px */
    
    /* Hero Responsive - Small (480px) */
    --hero-h1-size-small: 1.5rem;    /* 24px */
    --hero-p-size-small: 0.85rem;    /* 13.6px */
    
    /* ==========================================
       🌞 LIGHT MODE - KOLORY PODSTAWOWE
       ========================================== */
    
    /* Kolory akcentowe */
    --primary-color: #667eea;
    --primary-dark: #5568d3;
    --secondary-color: #764ba2;
    --accent-color: #4a9eff;
    
    /* ==========================================
       📝 KOLORY TEKSTU - LIGHT MODE
       ========================================== */
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #a0aec0;
    --text-inverse: #ffffff;
    
    /* ==========================================
       🎨 KOLORY TŁA - LIGHT MODE
       ========================================== */
    --bg-page: #f8f9fa; /* Jasnoszare tło dla całej strony */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-navbar: #ffffff;
    --bg-hover: #f7fafc;
    --section-bg: #f9fafb;
    
    /* ==========================================
       🎨 GRADIENTY - LIGHT MODE
       ========================================== */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --hero-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* ==========================================
       ✅ KOLORY STATUSÓW - LIGHT MODE
       ========================================== */
    --success-color: #48bb78;
    --success-bg: rgba(72, 187, 120, 0.1);
    --warning-color: #ed8936;
    --warning-bg: rgba(237, 137, 54, 0.1);
    --danger-color: #f56565;
    --error-color: #f56565;
    --error-bg: rgba(245, 101, 101, 0.1);
    --info-color: #4299e1;
    --info-bg: rgba(66, 153, 225, 0.1);
    
    /* ==========================================
       🔲 KOLORY BORDER - LIGHT MODE
       ========================================== */
    --border-color: #e2e8f0;
    --border-color-light: #edf2f7;
    --border-light: #edf2f7;
    --border-strong: #cbd5e0;
    
    /* ==========================================
       🔗 KOLORY LINKÓW - LIGHT MODE
       ========================================== */
    --link-color: #4a9eff;
    --link-hover: #3182ce;
    
    /* ==========================================
       🌑 CIENIE - LIGHT MODE
       ========================================== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
    
    /* ==========================================
       📐 BORDER RADIUS SYSTEM - 8 POZIOMÓW (v4.0)
       Single Source of Truth dla wszystkich zaokrągleń
       ========================================== */
    
    /* Full spectrum - od sharp do full rounded */
    --radius-none: 0;           /* 0px - sharp edges, dividers */
    --radius-xs: 2px;           /* 2px - subtle, badges, tags */
    --radius-sm: 4px;           /* 4px - small elements, inputs */
    --radius-md: 8px;           /* 8px - base, buttons, cards (DEFAULT) */
    --radius-lg: 12px;          /* 12px - large cards, modals */
    --radius-xl: 16px;          /* 16px - hero sections, panels */
    --radius-2xl: 24px;         /* 24px - special features */
    --radius-full: 9999px;      /* pill shape, circles, avatars */
    
    /* Semantic aliases - łatwiejsze do zapamiętania */
    --radius-button: var(--radius-sm);      /* 4px - przyciski */
    --radius-card: var(--radius-sm);        /* 4px - karty */
    --radius-input: var(--radius-sm);       /* 4px - inputy */
    --radius-modal: var(--radius-md);       /* 8px - modale */
    --radius-badge: var(--radius-sm);       /* 4px - badge'e */
    --radius-avatar: var(--radius-full);    /* circle - awatary */
    
    /* Backward compatibility - istniejące zmienne (deprecated but working) */
    --border-radius-sm: var(--radius-sm);   /* 4px - DEPRECATED: użyj --radius-sm */
    --border-radius: var(--radius-md);      /* 8px - DEPRECATED: użyj --radius-md */
    --border-radius-lg: var(--radius-sm);   /* 4px - DEPRECATED: użyj --radius-sm */
    
    /* ==========================================
       ⚡ TRANSITION - UNIWERSALNE
       ========================================== */
    --transition: all 0.3s ease;
    
    /* ==========================================
       📦 COMPONENT PADDING SYSTEM (v4.0)
       Consistent spacing dla wszystkich komponentów
       ========================================== */
    
    /* Button padding - 5 rozmiarów */
    --btn-padding-xs: 6px 12px;       /* Extra small - inline buttons */
    --btn-padding-sm: 8px 16px;       /* Small buttons */
    --btn-padding-md: 12px 24px;      /* Base size (DEFAULT) */
    --btn-padding-lg: 16px 32px;      /* Large buttons */
    --btn-padding-xl: 20px 40px;      /* Extra large - CTA buttons */
    
    /* Card padding - 5 rozmiarów */
    --card-padding-sm: 12px;          /* Compact cards */
    --card-padding-md: 20px;          /* Base cards (DEFAULT) */
    --card-padding-compact: 25px;     /* Compact-medium - między md(20px) a lg(30px) */
    --card-padding-lg: 30px;          /* Spacious cards */
    --card-padding-xl: 40px;          /* Hero cards, features */
    
    /* Input padding - vertical & horizontal */
    --input-padding-y: 10px;          /* Vertical padding */
    --input-padding-x: 15px;          /* Horizontal padding */
    --input-padding: var(--input-padding-y) var(--input-padding-x);
    
    /* Modal padding */
    --modal-padding-sm: 20px;         /* Mobile modals */
    --modal-padding-md: 30px;         /* Desktop modals (DEFAULT) */
    --modal-padding-lg: 40px;         /* Large modals */
    
    /* Badge padding */
    --badge-padding-xs: 2px 6px;      /* Tiny badges */
    --badge-padding-sm: 4px 8px;      /* Small badges */
    --badge-padding-md: 6px 12px;     /* Base badges (DEFAULT) */

    /* Spacing - Global (existing) */
    --global-padding: 20px;
    --section-margin-top: 40px; /* Nowa zmienna dla spójnego odstępu od góry */
    
    /* ==========================================
       📐 SIDEBAR DIMENSIONS
       Globalne szerokości dla różnych typów sidebarów
       ========================================== */
    
    /* Desktop widths - semantic names */
    --sidebar-width-sm: 260px;   /* Compact sidebar (settings, filters compact) */
    --sidebar-width-md: 300px;   /* Standard sidebar (default) */
    --sidebar-width-lg: 350px;   /* Wide sidebar (filters, offers) */
    
    /* Mobile - zawsze pełna szerokość */
    --sidebar-width-mobile: 100%;
    
    /* Sidebar spacing */
    --sidebar-gap: 30px;         /* Odstęp od głównego contentu */
    --sidebar-padding: var(--card-padding-compact);  /* 25px - default padding */
    
    /* ==========================================
       📦 PAGE CONTAINER SYSTEM - GLOBALNE ZARZĄDZANIE
       Wszystkie główne kontenery stron używają tych zmiennych
       Standard: 1400px max-width + 20px padding = 1360px content width
       ========================================== */
    
    --container-max-width: 1400px;      /* Maksymalna szerokość kontenera */
    --container-padding: 20px;          /* Padding kontenera (lewa/prawa strona) */
    --container-content-width: 1360px;  /* Rzeczywista szerokość contentu (1400 - 40) */
    
    /* Kontenery używające tego systemu:
       - .portal-offers-container (oferty-pracy)
       - .portal-front-page-container (strona główna)
       - footer (global-footer)
       - navbar (.navbar-container)
       - .company-page-container (strony firm)
       - .auth-container (logowanie/rejestracja)
       - .dashboard-container (panele użytkownika)
       - i wszystkie inne główne kontenery stron */
    
    /* ==========================================
       📏 COMPONENT SIZING SYSTEM (v4.0)
       Heights & widths dla consistent UI
       ========================================== */
    
    /* Button heights - accessibility compliant (min 44px) */
    --btn-height-xs: 28px;            /* Extra small - density UI */
    --btn-height-sm: 36px;            /* Small buttons */
    --btn-height-md: 44px;            /* Base (DEFAULT) - WCAG compliant */
    --btn-height-lg: 52px;            /* Large buttons */
    --btn-height-xl: 60px;            /* Extra large - hero CTAs */
    
    /* Input heights - accessibility compliant */
    --input-height-sm: 36px;          /* Compact inputs */
    --input-height-md: 44px;          /* Base (DEFAULT) - WCAG compliant */
    --input-height-lg: 52px;          /* Large inputs */
    
    /* Icon sizes - consistent scaling */
    --icon-xs: 12px;                  /* Tiny icons */
    --icon-sm: 16px;                  /* Small icons */
    --icon-md: 20px;                  /* Base icons (DEFAULT) */
    --icon-lg: 24px;                  /* Large icons */
    --icon-xl: 32px;                  /* Extra large icons */
    --icon-2xl: 48px;                 /* Huge icons */
    
    /* Avatar sizes */
    --avatar-xs: 24px;                /* Tiny avatar */
    --avatar-sm: 32px;                /* Small avatar */
    --avatar-md: 40px;                /* Base avatar (DEFAULT) */
    --avatar-lg: 48px;                /* Large avatar */
    --avatar-xl: 64px;                /* Extra large avatar */
    --avatar-2xl: 96px;               /* Profile avatar */
    
    /* Container max-widths - layout system */
    --container-xs: 320px;            /* Mobile small */
    --container-sm: 384px;            /* Mobile */
    --container-md: 448px;            /* Tablet portrait */
    --container-lg: 512px;            /* Tablet landscape (DEFAULT) */
    --container-xl: 576px;            /* Desktop small */
    --container-2xl: 672px;           /* Desktop */
    --container-3xl: 768px;           /* Desktop large */
    --container-4xl: 896px;           /* Desktop XL */
    --container-5xl: 1024px;          /* Desktop 2XL */
    --container-full: 1280px;         /* Full width container */
    
    /* ==========================================
       🔲 COMPONENT GAP SYSTEM (v4.0)
       Semantic aliases dla existing spacing scale
       ========================================== */
    
    /* Gap dla flexbox/grid - semantic names */
    --gap-xs: var(--space-1);         /* 4px - tight */
    --gap-sm: var(--space-2);         /* 8px - compact */
    --gap-md: var(--space-4);         /* 16px - base (DEFAULT) */
    --gap-lg: var(--space-6);         /* 24px - comfortable */
    --gap-xl: var(--space-8);         /* 32px - spacious */
    
    /* Stack spacing - vertical rhythm */
    --stack-xs: var(--space-2);       /* 8px */
    --stack-sm: var(--space-4);       /* 16px */
    --stack-md: var(--space-6);       /* 24px (DEFAULT) */
    --stack-lg: var(--space-8);       /* 32px */
    --stack-xl: var(--space-12);      /* 48px */
    
    /* ==========================================
       📐 PAGE CONTAINER SPACING SYSTEM v1.0
       Single Source of Truth dla odstępów od góry
       ========================================== */
    
    /* Desktop (default) - 80px standard spacing */
    --page-margin-top: 80px;
    
    /* Responsive breakpoints */
    --page-margin-top-lg: 80px;        /* Tablet landscape (≤1200px) - TEN SAM jak desktop */
    --page-margin-top-md: 65px;        /* Tablet portrait (≤768px) */
    --page-margin-top-sm: 60px;        /* Mobile (≤480px) */
    --page-margin-top-xs: 55px;        /* Mobile small (≤375px) */
    
    /* Special cases */
    --page-padding-top: 20px;          /* Dla paneli (dashboard, settings) */
    
    /* ==========================================
       📐 FOOTER SPACING SYSTEM v1.0
       Single Source of Truth dla odstępu content → footer
       Analogia do Page Container System (margin-top)
       ========================================== */
    
    /* Desktop (default) */
    --page-margin-bottom: 10px;       /* Golden value - balans między przestrzenią a kompaktem */
    
    /* Responsive breakpoints */
    --page-margin-bottom-lg: 0px;    /* Tablet landscape ≤1200px */
    --page-margin-bottom-md: 0px;    /* Tablet portrait ≤768px */
    --page-margin-bottom-sm: 0px;    /* Mobile ≤480px */
    --page-margin-bottom-xs: 0px;    /* Mobile small ≤375px */
    
    /* ==========================================
       📐 SECTION SPACING SYSTEM v1.0
       Single Source of Truth dla wewnętrznych odstępów
       Analogia do Page Container + Footer Spacing
       Base unit: 8px (zgodne z 8-point grid)
       ========================================== */
    
    /* Section spacing - między sekcjami */
    --section-spacing-xs: 16px;           /* 2× base - tight (elementy powiązane) */
    --section-spacing-sm: 24px;           /* 3× base - compact (karty, listy) */
    --section-spacing-md: 32px;           /* 4× base - standard (DEFAULT) */
    --section-spacing-lg: 48px;           /* 6× base - spacious (duże sekcje) */
    --section-spacing-xl: 64px;           /* 8× base - generous (hero → content) */
    
    /* Section spacing - mobile (proporcjonalne zmniejszenie) */
    --section-spacing-xs-mobile: 12px;    /* 1.5× base */
    --section-spacing-sm-mobile: 16px;    /* 2× base */
    --section-spacing-md-mobile: 24px;    /* 3× base (DEFAULT mobile) */
    --section-spacing-lg-mobile: 32px;    /* 4× base */
    --section-spacing-xl-mobile: 48px;    /* 6× base */
    
    /* Component spacing - wewnątrz komponentów */
    --component-spacing-xs: 8px;          /* 1× base - tight (labels, badges) */
    --component-spacing-sm: 12px;         /* 1.5× base - compact (form fields) */
    --component-spacing-md: 16px;         /* 2× base - standard (DEFAULT) */
    --component-spacing-lg: 24px;         /* 3× base - spacious */
    
    /* Card spacing */
    --card-padding: 24px;                 /* Padding wewnątrz kart */
    --card-padding-compact: 16px;         /* Compact cards */
    --card-padding-mobile: 16px;          /* Mobile cards */
    --card-gap: 24px;                     /* Gap między kartami (desktop) */
    --card-gap-tablet: 20px;              /* Gap na tablet */
    --card-gap-mobile: 16px;              /* Gap na mobile */
    
    /* Grid gaps - dla layoutów grid/flex */
    --grid-gap-xs: 8px;                   /* Tight grid */
    --grid-gap-sm: 16px;                  /* Compact grid */
    --grid-gap-md: 24px;                  /* Standard grid (DEFAULT) */
    --grid-gap-lg: 32px;                  /* Spacious grid */
    --grid-gap-xl: 48px;                  /* Wide grid */
    
    /* ==========================================
       📱 RESPONSIVE BREAKPOINTS - ROZSZERZONE
       Synchronizowane z portal-responsive.js
       ========================================== */
    
    /* ISTNIEJĄCE - zachowane dla backward compatibility */
    --breakpoint-sm: 480px;   /* Small mobile */
    --breakpoint-md: 768px;   /* Tablet portrait */
    --breakpoint-lg: 1024px;  /* Desktop / Tablet landscape */
    --breakpoint-xl: 1200px;  /* Large desktop */
    
    /* ⭐ NOWE - mobile precision */
    --breakpoint-xxs: 360px;  /* Android małe telefony */
    --breakpoint-xs: 375px;   /* iPhone SE, małe telefony */
    --breakpoint-mobile-landscape: 667px; /* iPhone w landscape */
    
    /* ⭐ NOWE - tablet precision */
    --breakpoint-tablet-sm: 600px;  /* Małe tablety portrait */
    --breakpoint-tablet-md: 820px;  /* iPad Air, Galaxy Tab */
    
    /* ⭐ NOWE - spacing dla różnych rozdzielczości */
    --spacing-mobile-xs: 8px;    /* 360px */
    --spacing-mobile-sm: 10px;   /* 375px-480px */
    --spacing-mobile-md: 15px;   /* 480px-768px */
    --spacing-tablet: 20px;      /* 768px-1024px */
    --spacing-desktop: 40px;     /* 1024px+ */
    
    /* ⭐ NOWE - loading states */
    --skeleton-base: #f0f0f0;
    --skeleton-highlight: #e0e0e0;
    
    /* ⭐ NOWE - disabled states */
    --input-disabled-bg: #f5f5f5;
    --input-disabled-text: #999;
    
    /* ⭐ NOWE - progress */
    --progress-bg: #e9ecef;
    --progress-fill: var(--primary-color);
    
    /* ==========================================
       🎨 FAZA C: EXTENDED CSS VARIABLES SYSTEM
       Semantic colors, spacing scale, transitions
       ========================================== */
    
    /* ==========================================
       SEMANTIC COLOR PALETTE - Gray Scale
       Dla UI elements (buttons, borders, backgrounds)
       ========================================== */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* ==========================================
       SEMANTIC COLOR PALETTE - Blue Scale
       Dla info messages i links
       ========================================== */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    --blue-950: #172554;
    
    /* ==========================================
       SEMANTIC COLOR PALETTE - Green Scale
       Dla success states i positive feedback
       ========================================== */
    --green-50: #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-300: #86efac;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;
    --green-800: #166534;
    --green-900: #14532d;
    --green-950: #052e16;
    
    /* ==========================================
       SEMANTIC COLOR PALETTE - Red Scale
       Dla errors, danger states i destructive actions
       ========================================== */
    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-300: #fca5a5;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --red-900: #7f1d1d;
    --red-950: #450a0a;
    
    /* ==========================================
       SEMANTIC COLOR PALETTE - Yellow Scale
       Dla warnings i caution states
       ========================================== */
    --yellow-50: #fefce8;
    --yellow-100: #fef9c3;
    --yellow-200: #fef08a;
    --yellow-300: #fde047;
    --yellow-400: #facc15;
    --yellow-500: #eab308;
    --yellow-600: #ca8a04;
    --yellow-700: #a16207;
    --yellow-800: #854d0e;
    --yellow-900: #713f12;
    --yellow-950: #422006;
    
    /* ==========================================
       SEMANTIC COLOR PALETTE - Purple Scale
       Dla primary colors i accent elements
       ========================================== */
    --purple-50: #faf5ff;
    --purple-100: #f3e8ff;
    --purple-200: #e9d5ff;
    --purple-300: #d8b4fe;
    --purple-400: #c084fc;
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    --purple-700: #7e22ce;
    --purple-800: #6b21a8;
    --purple-900: #581c87;
    
    /* ==========================================
       SPACING SCALE
       Consistent spacing dla margin i padding
       ========================================== */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;  /* 2px */
    --space-1: 0.25rem;     /* 4px */
    --space-1-5: 0.375rem;  /* 6px */
    --space-2: 0.5rem;      /* 8px */
    --space-2-5: 0.625rem;  /* 10px */
    --space-3: 0.75rem;     /* 12px */
    --space-3-5: 0.875rem;  /* 14px */
    --space-4: 1rem;        /* 16px */
    --space-5: 1.25rem;     /* 20px */
    --space-6: 1.5rem;      /* 24px */
    --space-7: 1.75rem;     /* 28px */
    --space-8: 2rem;        /* 32px */
    --space-9: 2.25rem;     /* 36px */
    --space-10: 2.5rem;     /* 40px */
    --space-11: 2.75rem;    /* 44px */
    --space-12: 3rem;       /* 48px */
    --space-14: 3.5rem;     /* 56px */
    --space-16: 4rem;       /* 64px */
    --space-20: 5rem;       /* 80px */
    --space-24: 6rem;       /* 96px */
    --space-28: 7rem;       /* 112px */
    --space-32: 8rem;       /* 128px */
    
    /* ==========================================
       TRANSITION SYSTEM
       Duration, easing functions, i preset transitions
       ========================================== */
    --duration-75: 75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;
    --duration-700: 700ms;
    --duration-1000: 1000ms;
    
    /* Easing functions */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Preset transitions */
    --transition-fast: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-colors: color 150ms, background-color 150ms, border-color 150ms;
    --transition-opacity: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-transform: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-shadow: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ==========================================
       EXTENDED SHADOW SYSTEM
       8-level shadow scale dla depth i elevation
       ========================================== */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    --shadow-outline: 0 0 0 3px rgba(66, 153, 225, 0.5);
    
    /* ==========================================
       Z-INDEX SCALE
       Layering system dla overlays i modals
       ========================================== */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-offcanvas: 1060;
    --z-popover: 1070;
    --z-tooltip: 1080;
    
    /* ==========================================
       OPACITY SCALE
       15-level opacity scale dla transparency effects
       ========================================== */
    --opacity-0: 0;
    --opacity-5: 0.05;
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-25: 0.25;
    --opacity-30: 0.3;
    --opacity-40: 0.4;
    --opacity-50: 0.5;
    --opacity-60: 0.6;
    --opacity-70: 0.7;
    --opacity-75: 0.75;
    --opacity-80: 0.8;
    --opacity-90: 0.9;
    --opacity-95: 0.95;
    --opacity-100: 1;
    
    /* ==========================================
       EXTENDED STATUS COLORS
       Color variants dla success, warning, error, info states
       ========================================== */
    --success-light: var(--green-100);
    --success-lighter: var(--green-50);
    --success-dark: var(--green-700);
    --success-darker: var(--green-800);
    --success-text: var(--green-900);
    --success-border: var(--green-300);
    
    /* Warning variants */
    --warning-light: var(--yellow-100);
    --warning-lighter: var(--yellow-50);
    --warning-dark: var(--yellow-700);
    --warning-darker: var(--yellow-800);
    --warning-text: var(--yellow-900);
    --warning-border: var(--yellow-300);
    
    /* Error variants */
    --error-light: var(--red-100);
    --error-lighter: var(--red-50);
    --error-dark: var(--red-700);
    --error-darker: var(--red-800);
    --error-text: var(--red-900);
    --error-border: var(--red-300);
    
    /* Info variants */
    --info-light: var(--blue-100);
    --info-lighter: var(--blue-50);
    --info-dark: var(--blue-700);
    --info-darker: var(--blue-800);
    --info-text: var(--blue-900);
    --info-border: var(--blue-300);
    
    /* ==========================================
       FOCUS STATES
       Focus outlines dla input validation
       ========================================== */
    --error-focus: rgba(239, 68, 68, 0.2);
    --success-focus: rgba(34, 197, 94, 0.2);
    --warning-focus: rgba(234, 179, 8, 0.1);
}

/* ==========================================
   GLOBALNE STYLE BODY - WSZYSTKIE STRONY
   Selektor z klasami WordPress ma wyższą specyficzność niż .ast-* kontenery
   ========================================== */
body,
body.home,
body.page,
body.single,
body.archive,
body.blog,
body.search,
body.error404 {
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    background-color: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   GLOBALNA TYPOGRAFIA - NAGŁÓWKI
   Bazowe style dla wszystkich nagłówków
   Każdy komponent może je nadpisać swoimi stylami
   ========================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    line-height: var(--lh-tight);
    color: var(--text-primary);
    font-weight: 600;
    margin: 0; /* Reset - każdy komponent ustawi swoje marginesy */
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

/* ==========================================
   GLOBALNA TYPOGRAFIA - TEKST
   ========================================== */
p {
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    margin: 0; /* Reset - każdy komponent ustawi swoje marginesy */
}

/* ==========================================
   GLOBALNA TYPOGRAFIA - ELEMENTY SPECJALNE
   ========================================== */
code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em; /* Lekko mniejsze od otaczającego tekstu */
}

/* Inline code */
code {
    background: var(--bg-secondary);
    padding: 0.2em 0.4em;
    border-radius: var(--border-radius-sm);
}

/* Code blocks */
pre {
    background: var(--bg-secondary);
    padding: 1em;
    border-radius: var(--border-radius);
    overflow-x: auto;
}

pre code {
    background: none;
    padding: 0;
}

/* ==========================================
   GLOBALNE STYLE HERO SECTIONS - WSZYSTKIE STRONY
   Single Source of Truth - !important zapobiega nadpisaniom lokalnych CSS
   Bazowe style dla wszystkich sekcji hero na portalach
   ========================================== */

/* Główne hero sections - !important TYLKO dla background i color (krytyczne) */
.hero-section,
.main-hero,
.page-header,
.banner-section,
.portal-offers-header,
.settings-header,
.dashboard-welcome,
.payment-success-card {
    /* ⭐ CRITICAL - !important zapobiega nadpisaniom z lokalnych CSS */
    background: var(--hero-gradient) !important;
    color: var(--hero-text-color) !important;  /* ⭐ Kontrolowane osobno dla light/dark */
    
    /* Pozostałe bez !important - mogą być dostosowane lokalnie jeśli potrzeba */
    border-radius: var(--hero-border-radius);
    margin-bottom: var(--hero-margin-bottom);
    padding: var(--hero-padding);
    box-shadow: var(--hero-shadow);
    position: relative;
    overflow: hidden;
}

/* Wszystkie elementy wewnątrz hero dziedziczą kolor - też z !important */
.hero-section *,
.main-hero *,
.page-header *,
.banner-section *,
.portal-offers-header *,
.settings-header *,
.dashboard-welcome *,
.payment-success-card * {
    color: var(--hero-text-color) !important;  /* ⭐ Kontrolowane osobno dla light/dark */
}

/* Responsive - mobile */
@media (max-width: 768px) {
    .hero-section,
    .main-hero,
    .page-header,
    .banner-section,
    .portal-offers-header {
        padding: var(--hero-padding-sm);
    }
}

/* ==========================================
   🌙 DARK MODE VARIABLES
   WSZYSTKIE ZMIENNE NADPISANE DLA CIEMNEGO TRYBU
   ========================================== */

[data-theme="dark"] {
    /* ==========================================
       🌙 DARK MODE - KOLORY PODSTAWOWE
       ========================================== */
    
    /* Kolory akcentowe - jaśniejsze w dark mode */
    --primary-color: #818cf8;
    --primary-dark: #6366f1;
    --secondary-color: #a78bfa;
    --accent-color: #60a5fa;
    
    /* ==========================================
       📝 KOLORY TEKSTU - DARK MODE
       ========================================== */
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #ffffff;
    
    /* ==========================================
       🎨 KOLORY TŁA - DARK MODE
       ========================================== */
    --bg-page: #1a1a1a;
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-card: #2d2d2d;
    --bg-input: #333333;
    --bg-navbar: #1a1a1a;
    --bg-hover: #333333;
    --section-bg: #2d2d2d;
    
    /* ==========================================
       🎨 GRADIENTY - DARK MODE
       ========================================== */
    --primary-gradient: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    --hero-gradient: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    --hero-text-color: #ffffff;    /* ⭐ Kolor tekstu w hero - DARK MODE */
    
    /* ==========================================
       ✅ KOLORY STATUSÓW - DARK MODE
       ========================================== */
    --success-color: #10b981;
    --success-bg: rgba(16, 185, 129, 0.1);
    --warning-color: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --danger-color: #ef4444;
    --error-color: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.1);
    --info-color: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.1);
    
    /* ==========================================
       🔲 KOLORY BORDER - DARK MODE
       ========================================== */
    --border-color: #2a2a2a;
    --border-color-light: #252525;
    --border-light: #252525;
    --border-strong: #333333;
    
    /* ==========================================
       🔗 KOLORY LINKÓW - DARK MODE
       ========================================== */
    --link-color: #60a5fa;
    --link-hover: #93c5fd;
    
    /* Border radius, transition i shadows są dziedziczone z :root lub nadpisane w html[data-theme="dark"] */
}

/* ==========================================
   🌙 DARK MODE VARIABLES - OVERRIDE (FAZA 1: GLOBAL MANAGEMENT)
   Dodatkowe zmienne dla globalnego zarządzania dark mode
   ========================================== */

html[data-theme="dark"] {
    /* Tło */
    --bg-page: #121212;
    --bg-card: #1e1e1e;
    --bg-secondary: #2a2a2a;
    --bg-hover: #333333;
    --bg-input: #2d2d2d;
    --section-bg: #1a1a1a;
    
    /* Tekst */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;
    --text-inverse: #1a1a1a;
    
    /* Borders */
    --border-color: #3a3a3a;
    --border-light: #2a2a2a;
    --border-strong: #4a4a4a;
    
    /* Status colors dla dark mode */
    --success-color: #48bb78;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;
    --info-color: #3498db;
    
    /* Loading states dla dark mode */
    --skeleton-base: #2d2d2d;
    --skeleton-highlight: #3a3a3a;
    
    /* Disabled states dla dark mode */
    --input-disabled-bg: #333333;
    --input-disabled-text: #666666;
    
    /* Progress dla dark mode */
    --progress-bg: #2d2d2d;
    
    /* ==========================================
       FAZA C: DARK MODE OVERRIDES
       Extended variables dla dark theme
       ========================================== */
    
    /* Gray Scale - inverted dla dark mode */
    --gray-50: #18181b;
    --gray-100: #27272a;
    --gray-200: #3f3f46;
    --gray-300: #52525b;
    --gray-400: #71717a;
    --gray-500: #a1a1aa;
    --gray-600: #d4d4d8;
    --gray-700: #e4e4e7;
    --gray-800: #f4f4f5;
    --gray-900: #fafafa;
    
    /* Extended shadows - stronger dla dark mode */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7), 0 4px 6px -4px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.4);
    --shadow-outline: 0 0 0 3px rgba(96, 165, 250, 0.5);
    
    /* Extended status colors - inverted dla dark mode */
    --success-light: var(--green-900);
    --success-lighter: var(--green-950);
    --success-dark: var(--green-300);
    --success-darker: var(--green-200);
    --success-text: var(--green-100);
    --success-border: var(--green-700);
    
    --warning-light: var(--yellow-900);
    --warning-lighter: var(--yellow-950);
    --warning-dark: var(--yellow-300);
    --warning-darker: var(--yellow-200);
    --warning-text: var(--yellow-100);
    --warning-border: var(--yellow-700);
    
    --error-light: var(--red-900);
    --error-lighter: var(--red-950);
    --error-dark: var(--red-300);
    --error-darker: var(--red-200);
    --error-text: var(--red-100);
    --error-border: var(--red-700);
    
    --info-light: var(--blue-900);
    --info-lighter: var(--blue-950);
    --info-dark: var(--blue-300);
    --info-darker: var(--blue-200);
    --info-text: var(--blue-100);
    --info-border: var(--blue-700);
    
    /* Focus states dla dark mode - stronger dla lepszej widoczności */
    --error-focus: rgba(239, 68, 68, 0.3);
    --success-focus: rgba(34, 197, 94, 0.3);
    --warning-focus: rgba(234, 179, 8, 0.2);
}

/* ==========================================
   🎯 GLOBALNE REGUŁY KOMPONENTÓW (v4.0)
   Single Source of Truth - automatyczne zastosowanie
   Wzorowane na Hero Sections v3.0 pattern
   ========================================== */

/* ==========================================
   PRZYCISKI - BASE STYLES
   Automatyczne zastosowanie dla wszystkich przycisków
   ========================================== */

/* Przyciski - base size */
.btn,
.button,
button[type="button"],
button[type="submit"],
.wp-block-button__link {
    border-radius: var(--radius-button) !important;
    padding: var(--btn-padding-md) !important;
    min-height: var(--btn-height-md) !important;
}

/* Małe przyciski */
.btn-sm,
.btn-small,
.button-small {
    border-radius: var(--radius-button) !important;
    padding: var(--btn-padding-sm) !important;
    min-height: var(--btn-height-sm) !important;
}

/* Duże przyciski */
.btn-lg,
.btn-large,
.button-large {
    border-radius: var(--radius-button) !important;
    padding: var(--btn-padding-lg) !important;
    min-height: var(--btn-height-lg) !important;
}

/* Extra duże przyciski (hero CTAs) */
.btn-xl,
.btn-extra-large {
    border-radius: var(--radius-button) !important;
    padding: var(--btn-padding-xl) !important;
    min-height: var(--btn-height-xl) !important;
}

/* ==========================================
   KARTY - BASE STYLES
   ========================================== */

.card,
.panel,
.box,
.widget,
.dashboard-card {
    border-radius: var(--radius-card) !important;
    padding: var(--card-padding-md);
}

/* Małe karty */
.card-sm,
.card-compact {
    padding: var(--card-padding-sm);
}

/* Duże karty */
.card-lg,
.card-spacious {
    padding: var(--card-padding-lg);
}

/* ==========================================
   INPUTY - BASE STYLES
   ========================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select,
.form-control,
.input {
    border-radius: var(--radius-input) !important;
    padding: var(--input-padding) !important;
    min-height: var(--input-height-md);
}

/* Małe inputy */
input.input-sm,
select.input-sm,
.form-control-sm {
    min-height: var(--input-height-sm);
}

/* Duże inputy */
input.input-lg,
select.input-lg,
.form-control-lg {
    min-height: var(--input-height-lg);
}

/* ==========================================
   BADGES - BASE STYLES
   ========================================== */

.badge,
.tag,
.pill,
.label {
    border-radius: var(--radius-badge) !important;
    padding: var(--badge-padding-md);
}

/* Małe badges */
.badge-sm,
.tag-sm {
    padding: var(--badge-padding-sm);
}

/* Tiny badges */
.badge-xs,
.tag-xs {
    padding: var(--badge-padding-xs);
}

/* ==========================================
   MODALE - BASE STYLES
   ========================================== */

.modal-content,
.dialog,
.popup,
.portal-modal .modal-body {
    border-radius: var(--radius-modal) !important;
    padding: var(--modal-padding-md);
}

/* Małe modale (mobile) */
.modal-sm .modal-content,
.modal-content.modal-sm {
    padding: var(--modal-padding-sm);
}

/* Duże modale */
.modal-lg .modal-content,
.modal-content.modal-lg {
    padding: var(--modal-padding-lg);
}

/* ==========================================
   AWATARY - BASE STYLES
   ========================================== */

.avatar,
.user-avatar,
.profile-picture {
    border-radius: var(--radius-avatar) !important;
    width: var(--avatar-md);
    height: var(--avatar-md);
}

/* Małe awatary */
.avatar-sm {
    width: var(--avatar-sm);
    height: var(--avatar-sm);
}

/* Duże awatary */
.avatar-lg {
    width: var(--avatar-lg);
    height: var(--avatar-lg);
}

/* Extra duże awatary (profile) */
.avatar-xl {
    width: var(--avatar-xl);
    height: var(--avatar-xl);
}

/* ==========================================
   RESPONSIVE - MOBILE OVERRIDES
   Na mobile niektóre paddingi są za duże
   ========================================== */

@media (max-width: 768px) {
    /* Przyciski na mobile - lekko mniejszy padding */
    .btn,
    .button,
    button[type="button"],
    button[type="submit"] {
        padding: var(--btn-padding-sm) !important;
    }
    
    /* Karty na mobile - mniejszy padding */
    .card,
    .panel,
    .box,
    .widget {
        padding: var(--card-padding-sm);
    }
    
    /* Modale na mobile - mniejszy padding */
    .modal-content,
    .dialog,
    .popup {
        padding: var(--modal-padding-sm);
    }
}