/* ============================================================ QR3 — Design tokens (jedyne źródło zmiennych motywu) Light-first, dark mode przez [data-theme="dark"] na . Ładowany w base.html PRZED base.css i wszystkimi warstwami. Zasada: kolor/spacing/radius/shadow definiowany TYLKO tutaj. W warstwach (base/guest/admin) i plikach per-widok używaj var(--token) bez fallbacku — fallback maskuje literówkę w nazwie tokenu. ============================================================ */ /* ---- Light mode (default) ---- */ :root { --bg-primary: #ffffff; --bg-surface: #f8f9fc; --bg-surface-2: #f1f4f9; --bg-surface-3: #e8edf5; --accent: #4f46e5; --accent-2: #7c3aed; --accent-light: rgba(79, 70, 229, 0.08); --accent-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); --text-primary: #111827; --text-muted: #6b7280; --text-faint: #9ca3af; --border: rgba(0, 0, 0, 0.08); --border-hover: rgba(0, 0, 0, 0.16); --border-strong: rgba(0, 0, 0, 0.20); --shadow-xs: 0 1px 2px rgba(0,0,0,0.06); --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05); --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06); --shadow-lg: 0 8px 32px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06); --shadow-accent: 0 4px 20px rgba(79,70,229,0.30); --font-heading: 'Outfit', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1); --nav-height: 64px; /* Maksymalna szerokość treści w widoku wydarzenia (gość). Węższa niż panel admina (1080px), bo to układ mobile-first z dolną nawigacją — na szerokim monitorze rozciągnięta na całą szerokość wyglądałaby jak błąd. */ --event-max-width: 900px; --topbar-bg: rgba(255,255,255,0.92); --event-nav-bg: rgba(255,255,255,0.96); /* --- Kolor stanu błędu/niebezpieczeństwa (brak odpowiednika wyżej) --- */ --color-danger: #dc2626; /* --- Aliasy zgodności --------------------------------------------------- Nazwy używane historycznie w plikach per-widok (i w dawnym main.css) z twardym fallbackiem — dotąd fallback leciał ZAWSZE (tokeny nie istniały), więc dark mode w tych widokach nie działał. Alias kieruje je na token motywu, który sam się przełącza. Docelowo: użycia przepisać na token kanoniczny i te aliasy usunąć. */ --primary: var(--accent); --primary-color: var(--accent); --bg-card: var(--bg-primary); --bg-page: var(--bg-surface); --bg-secondary: var(--bg-surface-2); --bg-subtle: var(--bg-surface-2); --text-color: var(--text-primary); --text-secondary: var(--text-muted); --border-color: var(--border); --border-subtle: var(--border); } /* ---- Dark mode ---- */ [data-theme="dark"] { --bg-primary: #0f1117; --bg-surface: #1a1d27; --bg-surface-2: #22263a; --bg-surface-3: #2a2f48; --accent: #818cf8; --accent-2: #a78bfa; --accent-light: rgba(129, 140, 248, 0.12); --accent-grad: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%); --text-primary: #f1f5f9; --text-muted: #94a3b8; --text-faint: #64748b; --border: rgba(255,255,255,0.08); --border-hover: rgba(255,255,255,0.16); --border-strong: rgba(255,255,255,0.22); --shadow-xs: 0 1px 2px rgba(0,0,0,0.3); --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3); --shadow-accent: 0 4px 20px rgba(129,140,248,0.30); --topbar-bg: rgba(15,17,23,0.92); --event-nav-bg: rgba(15,17,23,0.96); --color-danger: #f87171; /* Aliasy zgodności dziedziczą var(--*) — przełączają się automatycznie wraz z tokenem kanonicznym, nie trzeba ich tu powtarzać. */ }