/* ===================================================== CSS Variables - Dark/Light Mode ===================================================== */ :root { /* === Asset version === Przy każdym deployu CSS/JS bump tę liczbę + `EXPECTED_VERSION` w index.html + wszystkie `?v=N` query stringi w index.html. Inline boot-script w czyta `--asset-version` i jeśli jest mniejsza niż `EXPECTED_VERSION`, wymusza JEDEN reload (z loop guard w sessionStorage). Dzięki temu użytkownicy nigdy nie muszą ręcznie czyścić cache. */ --asset-version: 29; /* === Fonts === */ --font-heading: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; /* === Font Sizes === */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.25rem; /* 20px */ --fs-2xl: 1.5rem; /* 24px */ --fs-3xl: 2rem; /* 32px */ --fs-4xl: 2.25rem; /* 36px - zmniejszone z 40px */ --fs-5xl: 2.5rem; /* 40px - zmniejszone z 48px */ --fs-6xl: 3rem; /* 48px - zmniejszone z 60px */ --fs-7xl: 3.5rem; /* 56px - zmniejszone z 72px */ /* === Font Weights === */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* === Spacing === */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 2.5rem; /* 40px - zmniejszone z 48px */ --space-3xl: 3.5rem; /* 56px - zmniejszone z 64px */ --space-4xl: 5rem; /* 80px - zmniejszone z 96px */ --space-5xl: 6rem; /* 96px - zmniejszone z 128px */ /* === Border Radius === */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* === Transitions === */ --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; --transition-theme: 400ms ease; /* === Z-Index Scale === */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-tooltip: 600; /* === Container === */ --container-max: 1200px; --container-padding: clamp(1rem, 4vw, 1.5rem); /* === Gradient === */ --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-primary-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%); --gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --gradient-dark: linear-gradient(180deg, #0a0a0f 0%, #1a1a2e 100%); --gradient-light: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%); /* Placeholder play icon (used as CSS background for failed thumbnails) */ --ytmark-svg: url("data:image/svg+xml;utf8,"); } /* === DARK MODE (Default) === */ [data-theme="dark"] { /* Background Colors */ --bg-primary: #0a0a0f; --bg-secondary: #12121a; --bg-tertiary: #1a1a2e; --bg-elevated: #1e1e32; /* Text Colors */ --text-primary: #ffffff; --text-secondary: #a0a0b0; --text-tertiary: #6b6b80; --text-muted: #4a4a5a; /* Border Colors */ --border-primary: rgba(255, 255, 255, 0.1); --border-secondary: rgba(255, 255, 255, 0.05); --border-accent: rgba(102, 126, 234, 0.3); /* Glass Effect */ --glass-bg: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.1); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* Glow Effects */ --glow-primary: rgba(102, 126, 234, 0.4); --glow-secondary: rgba(118, 75, 162, 0.3); --glow-accent: rgba(240, 147, 251, 0.3); /* Shadows */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6); /* Button */ --btn-primary-bg: var(--gradient-primary); --btn-primary-text: #ffffff; --btn-secondary-bg: transparent; --btn-secondary-text: #ffffff; --btn-secondary-border: rgba(255, 255, 255, 0.2); /* Form */ --input-bg: rgba(255, 255, 255, 0.05); --input-border: rgba(255, 255, 255, 0.1); --input-focus-border: rgba(102, 126, 234, 0.5); --input-text: #ffffff; --input-placeholder: #6b6b80; /* Header */ --header-bg: rgba(10, 10, 15, 0.8); --header-blur: 20px; /* Parallax layers */ --parallax-layer-1: rgba(102, 126, 234, 0.1); --parallax-layer-2: rgba(118, 75, 162, 0.08); --parallax-layer-3: rgba(240, 147, 251, 0.05); } /* === LIGHT MODE === */ [data-theme="light"] { /* Background Colors */ --bg-primary: #f8f9fa; --bg-secondary: #ffffff; --bg-tertiary: #f0f2f5; --bg-elevated: #ffffff; /* Text Colors */ --text-primary: #1a1a2e; --text-secondary: #4a4a5a; --text-tertiary: #6b6b80; --text-muted: #a0a0b0; /* Border Colors */ --border-primary: rgba(0, 0, 0, 0.1); --border-secondary: rgba(0, 0, 0, 0.05); --border-accent: rgba(102, 126, 234, 0.3); /* Glass Effect */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(255, 255, 255, 0.8); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* Glow Effects - converted to shadows for light mode */ --glow-primary: rgba(102, 126, 234, 0.2); --glow-secondary: rgba(118, 75, 162, 0.15); --glow-accent: rgba(240, 147, 251, 0.2); /* Shadows */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15); /* Button */ --btn-primary-bg: var(--gradient-primary); --btn-primary-text: #ffffff; --btn-secondary-bg: transparent; --btn-secondary-text: #1a1a2e; --btn-secondary-border: rgba(0, 0, 0, 0.15); /* Form */ --input-bg: rgba(0, 0, 0, 0.03); --input-border: rgba(0, 0, 0, 0.1); --input-focus-border: rgba(102, 126, 234, 0.5); --input-text: #1a1a2e; --input-placeholder: #a0a0b0; /* Header */ --header-bg: rgba(248, 249, 250, 0.8); --header-blur: 20px; /* Parallax layers */ --parallax-layer-1: rgba(102, 126, 234, 0.08); --parallax-layer-2: rgba(118, 75, 162, 0.05); --parallax-layer-3: rgba(240, 147, 251, 0.03); }