/* ═══════════════════════════════════════════════════════════════════════ KIERUNEK WIZUALNY — „Kontrola jakości” (czysty lab) Nowa warstwa frontendu KaniewskiMagazyn — plik tokenów. EVIDENCE: narzędzie operacyjne producenta spożywczego (jaja, makarony) + logistyka (magazyn, palety, jajomaty, etykiety). Główny powtarzalny ruch: skanowanie i porównywanie gęstych rekordów tabelarycznych, generowanie dokładnych etykiet, szybkie wprowadzanie danych — także z telefonu przy jajomacie. PREMISA: interfejs jak skalibrowane narzędzie pomiarowe — precyzyjny, spokojny; dane są bohaterem, a chrome znika. DIALS: ekspresja niska · gęstość normalna→zwarta · kontrast wysoki · geometria miękka (6–10px, jeden system koncentryczny) · ruch cichy. TYPE: IBM Plex Sans (400/500/600) do UI + IBM Plex Mono (400/500) dla kodów/SKU/wartości. Cyfry tabelaryczne wszędzie, gdzie dane się zmieniają. COLOR (neutralny chłodny + jeden akcent): akcent kobalt #2456D6 wydawany OSZCZĘDNIE — tylko akcja główna i stan aktywny. Reszta to neutralna skala grafitowa + stany semantyczne. ODRZUCONE: obecny „SaaS blue + karty z gradientem + emoji” (Tailwind default); „ciemny control-room” (zbyt teatralny dla narzędzia precyzji); „ciepły farm-craft” (dekoracyjny tam, gdzie liczy się dokładność). ═══════════════════════════════════════════════════════════════════════ */ :root { /* ─── NEUTRALNA SKALA (chłodny grafit) ─────────────── */ --ink-900: #1B2230; /* tekst główny */ --ink-700: #333C4E; --ink-500: #5B6577; /* tekst drugorzędny */ --ink-400: #8A93A5; /* tekst wyciszony / placeholdery */ --ink-300: #B9C0CC; --ink-200: #D7DCE4; /* obrysy / hairline */ --ink-100: #E8EBF0; --ink-50: #F5F6F8; /* tło strony */ /* ─── AKCENT (kobalt) ────────────────────────────── */ --accent-600: #1C44B0; /* hover / active */ --accent-500: #2456D6; /* primary */ --accent-100: #E9EFFF; /* tint */ --on-accent: #FFFFFF; /* ─── STANY SEMANTYCZNE ──────────────────────────── */ --success-600: #178A4C; --success-500: #1E9E5C; --success-100: #E4F4EA; --warning-600: #A5660A; --warning-500: #C2780A; --warning-100: #FCF1E0; --danger-600: #B52E2E; --danger-500: #D03A3A; --danger-100: #FBEAEA; /* ─── POWIERZCHNIE ───────────────────────────────── */ --bg-page: var(--ink-50); --bg-surface: #FFFFFF; --bg-surface-2: #F0F2F6; /* wklęsłe tło, hover wierszy */ /* ─── ELEWACJA (jeden system — obrys + warstwy) ───── */ --shadow-border: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px -1px oklch(0 0 0 / 0.06), 0 2px 4px 0 oklch(0 0 0 / 0.04); --shadow-raised: 0 0 0 1px oklch(0 0 0 / 0.05), 0 4px 10px -2px oklch(0 0 0 / 0.08), 0 12px 24px -8px oklch(0 0 0 / 0.12); /* ─── ZAOKRĄGLENIA (koncentryczne: zewn. = wewn. + padding) ── */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* ─── TYPOGRAFIA ─────────────────────────────────── */ --font-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', 'Cascadia Code', Consolas, monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --leading-tight: 1.25; --leading-normal: 1.5; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ─── ODSTĘPY (siatka 4px) ───────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ─── RUCH (cichy, ease-out) ─────────────────────── */ --ease-out: cubic-bezier(0.2, 0, 0, 1); --t-fast: 150ms; --t-base: 200ms; --t-slow: 300ms; /* ─── SHELL ──────────────────────────────────────── */ --navbar-height: 56px; /* ─── Z-INDEX ────────────────────────────────────── */ --z-dropdown: 100; --z-sticky: 200; --z-drawer: 300; --z-modal: 1000; --z-toast: 1100; /* ═══════════════════════════════════════════════════════ ALIASY LEGACY — żeby istniejące arkusze modułów (modules/*.css) działały bez zmian po podmianie. ═══════════════════════════════════════════════════════ */ --color-primary-400: var(--accent-500); --color-primary-500: var(--accent-500); --color-primary-600: var(--accent-600); --color-primary-700: var(--accent-600); --color-primary-800: var(--accent-600); --color-success-500: var(--success-500); --color-success-600: var(--success-600); --color-success-700: var(--success-600); --color-warning-500: var(--warning-500); --color-warning-600: var(--warning-600); --color-danger-500: var(--danger-500); --color-danger-600: var(--danger-600); --color-danger-700: var(--danger-600); --color-gray-50: var(--ink-50); --color-gray-100: var(--ink-100); --color-gray-200: var(--ink-200); --color-gray-300: var(--ink-300); --color-gray-400: var(--ink-400); --color-gray-500: var(--ink-500); --color-gray-600: var(--ink-500); --color-gray-700: var(--ink-700); --color-gray-800: var(--ink-900); --color-gray-900: var(--ink-900); --color-gray-950: var(--ink-900); --bg-surface-alt: var(--bg-surface-2); --bg-overlay: oklch(0.12 0.02 260 / 0.45); --text-primary: var(--ink-900); --text-secondary: var(--ink-500); --text-muted: var(--ink-400); --text-inverse: #FFFFFF; --text-link: var(--accent-500); --shadow-sm: var(--shadow-border); --shadow-md: var(--shadow-border); --shadow-lg: var(--shadow-border); --shadow-xl: var(--shadow-raised); --shadow-card-hover: var(--shadow-raised); --transition-fast: var(--t-fast) var(--ease-out); --transition-base: var(--t-base) var(--ease-out); --transition-slow: var(--t-slow) var(--ease-out); --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; }