/* =========================================================================== AERO — Mobile Gateway. Design tokens. Implementacja: dołącz ten plik raz; używaj var(--aero-*) w stylach. Motyw przełączasz atrybutem na lub kontenerze: data-theme="dark". =========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap'); :root, [data-theme="light"] { /* — Powierzchnie / tło — */ --aero-bg: #f7f7f8; /* tło aplikacji */ --aero-surface: #ffffff; /* karty, tabele, panele */ --aero-surface-2: #f4f4f5; /* subtelne tło (hover, th) */ --aero-surface-3: #ececee; /* mocniejsze wypełnienie */ --aero-overlay: rgba(9,9,11,.45); /* tło modala */ /* — Obrysy — */ --aero-border: #e4e4e7; --aero-border-strong: #d4d4d8; /* — Tekst — */ --aero-text: #18181b; /* podstawowy */ --aero-text-2: #52525b; /* drugorzędny */ --aero-text-3: #8b8b93; /* wyciszony / placeholder */ --aero-text-inv: #fafafa; /* na ciemnym tle */ /* — Akcent marki (grafit / mono) — */ --aero-primary: #18181b; --aero-primary-hover: #2b2b30; --aero-primary-text: #ffffff; --aero-focus: #18181b; /* pierścień focus */ --aero-link: #18181b; /* — Semantyczne: kolor bazowy / tło badge / tekst badge — */ --aero-success: #16a34a; --aero-success-bg: #dcfce7; --aero-success-text: #15803d; --aero-danger: #dc2626; --aero-danger-bg: #fee2e2; --aero-danger-text: #b91c1c; --aero-warning: #d97706; --aero-warning-bg: #fef3c7; --aero-warning-text: #b45309; --aero-info: #2563eb; --aero-info-bg: #dbeafe; --aero-info-text: #1d4ed8; --aero-neutral: #71717a; --aero-neutral-bg: #f4f4f5; --aero-neutral-text: #3f3f46; /* — Akcenty wykresów (stacked bary, serie) — */ --aero-chart-1: #16a34a; /* dostarczone */ --aero-chart-2: #2563eb; /* w drodze */ --aero-chart-3: #d97706; /* w kolejce */ --aero-chart-4: #dc2626; /* błędy */ --aero-chart-track: #ececee; /* tor paska */ --aero-shadow-sm: 0 1px 2px rgba(9,9,11,.06); --aero-shadow-md: 0 2px 6px rgba(9,9,11,.07), 0 1px 2px rgba(9,9,11,.05); --aero-shadow-lg: 0 12px 32px rgba(9,9,11,.14), 0 2px 8px rgba(9,9,11,.08); } /* Mostek ciemnego motywu: na stronach EasyAdmin ciemny tryb sygnalizuje `body.ea-dark-scheme` (i/lub [data-bs-theme="dark"]), a custom-strony używają [data-theme="dark"]. Wszystkie aktywują te same tokeny AERO, więc wspólny sidebar jest identycznie ciemny na każdej podstronie. */ [data-theme="dark"], [data-bs-theme="dark"], body.ea-dark-scheme { --aero-bg: #0a0a0b; --aero-surface: #141416; --aero-surface-2: #1c1c1f; --aero-surface-3: #26262a; --aero-overlay: rgba(0,0,0,.6); --aero-border: #27272a; --aero-border-strong: #3a3a3f; --aero-text: #fafafa; --aero-text-2: #a1a1aa; --aero-text-3: #6b6b73; --aero-text-inv: #18181b; --aero-primary: #fafafa; --aero-primary-hover: #e4e4e7; --aero-primary-text: #18181b; --aero-focus: #d4d4d8; --aero-link: #fafafa; --aero-success: #22c55e; --aero-success-bg: #052e16; --aero-success-text: #4ade80; --aero-danger: #ef4444; --aero-danger-bg: #2a0d0d; --aero-danger-text: #f87171; --aero-warning: #f59e0b; --aero-warning-bg: #2a1c05; --aero-warning-text: #fbbf24; --aero-info: #3b82f6; --aero-info-bg: #0c1d3d; --aero-info-text: #60a5fa; --aero-neutral: #a1a1aa; --aero-neutral-bg: #27272a; --aero-neutral-text: #d4d4d8; --aero-chart-1: #22c55e; --aero-chart-2: #3b82f6; --aero-chart-3: #f59e0b; --aero-chart-4: #ef4444; --aero-chart-track: #26262a; --aero-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --aero-shadow-md: 0 2px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4); --aero-shadow-lg: 0 12px 32px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.5); } /* =========================================================================== Skale (stałe — nie zmieniają się z motywem) --------------------------------------------------------------------------- */ :root { /* Typografia */ --aero-font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --aero-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; --aero-fs-display: 24px; --aero-lh-display: 30px; --aero-fs-h1: 19px; --aero-lh-h1: 26px; --aero-fs-h2: 15px; --aero-lh-h2: 22px; --aero-fs-body: 13px; --aero-lh-body: 20px; --aero-fs-sm: 12px; --aero-lh-sm: 16px; --aero-fs-xs: 11px; --aero-lh-xs: 14px; /* Spacing (4px baza) */ --aero-s1: 4px; --aero-s2: 8px; --aero-s3: 12px; --aero-s4: 16px; --aero-s5: 20px; --aero-s6: 24px; --aero-s8: 32px; --aero-s10: 40px; --aero-s12: 48px; /* Promienie */ --aero-r-sm: 4px; --aero-r-md: 6px; --aero-r-lg: 8px; --aero-r-xl: 12px; --aero-r-full: 999px; /* Wymiary układu */ --aero-sidebar-w: 230px; /* = szerokość gridu sidebara EA (sidebar-width: normal) */ --aero-topbar-h: 52px; }