/* ============================================================ Wycena Web — Design Tokens v2 Bazuje na GitHub Primer (dark/dim/light) — 3 motywy przełączane atrybutem [data-theme] na . Domyślny: data-theme="dim" (mniej ponury niż czysty dark) Inne: data-theme="dark", data-theme="light" Filozofia: - Każdy panel/sekcja ma subtelną tinta (cool / warm / accent) żeby wnętrze aplikacji nie wyglądało jak płaska szarość - Akcent niebieski pozostaje JEDYNY — tinty są bardzo subtelne ============================================================ */ /* ---------- Theme: DIM (default) — soft dark, less gloomy ---------- */ :root, [data-theme="dim"] { --c-bg: #1c2128; --c-surface-0: #22272e; /* page bg */ --c-surface-1: #2d333b; /* card, input */ --c-surface-2: #373e47; /* hover */ --c-surface-3: #444c56; /* border */ --c-surface-4: #545d68; /* border-strong */ /* Tinted panels — bardzo delikatne kolorowe wnętrza */ --c-panel-cool: #232a35; /* sidebar — chłodny granat */ --c-panel-warm: #2e2a26; /* params — ciepły brąz */ --c-panel-accent: #232b3d; /* selected, focused panel */ --c-panel-success:#22302a; --c-panel-warn: #322d22; --c-panel-danger: #332626; --c-text: #cdd9e5; --c-text-muted: #909dab; --c-text-subtle: #768390; --c-text-link: #539bf5; --c-text-link-2: #6cb6ff; --c-text-on-accent:#ffffff; --c-blue-400: #539bf5; --c-blue-500: #316dca; --c-blue-600: #2a5fb2; --c-blue-glow: rgba(49,109,202,.32); --c-purple-500: #986ee2; --c-purple-600: #8256d0; --c-teal-500: #2b9b9e; /* nowy akcent — info / dane techniczne */ --c-amber-500: #c69026; /* warn */ --c-emerald-500: #57ab5a; /* success */ --c-red-500: #e5534b; --c-red-600: #c93c37; /* Tinted overlays (rgba — działają nad dowolnym podkładem) */ --c-tint-blue: rgba(83,155,245,.08); --c-tint-purple: rgba(152,110,226,.08); --c-tint-amber: rgba(198,144,38,.10); --c-tint-emerald: rgba(87,171,90,.10); --c-tint-red: rgba(229,83,75,.10); /* Gradients — żywsze niż w wersji full-dark */ --grad-primary: linear-gradient(180deg, #539bf5 0%, #316dca 100%); --grad-primary-h: linear-gradient(180deg, #6cb6ff 0%, #539bf5 100%); --grad-brand: linear-gradient(135deg, #316dca 0%, #8256d0 100%); --grad-warm: linear-gradient(135deg, #c69026 0%, #e5534b 100%); --grad-cool: linear-gradient(135deg, #316dca 0%, #2b9b9e 100%); --shadow-color: 0 0 0; } /* ---------- Theme: DARK — atmosferyczna noc, nie czerń ---------- Bazowy odcień to głęboki granat-grafit, surfacy wprowadzają delikatne ocieplenie. Każdy poziom ma minimalny szum hue, żeby UI nie wyglądał jak monochrom. */ [data-theme="dark"] { --c-bg: #11151d; /* deep night-graphite, lekka nuta granatu */ --c-surface-0: #161b25; /* page bg — chłodny grafit */ --c-surface-1: #1e2430; /* card — średni grafit, lekko cieplejszy */ --c-surface-2: #2a313e; /* hover — wyraźnie wyżej */ --c-surface-3: #3a414e; /* border */ --c-surface-4: #4f5765; /* border-strong */ /* Pastele nocne — saturated bardzo lekko, żeby było czytelne */ --c-panel-cool: #172033; /* sidebar — głęboki blue dive */ --c-panel-warm: #261f1c; /* params — kakao */ --c-panel-accent: #1a2944; /* selected — atramentowy niebieski */ --c-panel-success:#162b22; /* las */ --c-panel-warn: #2b2418; /* amber dusk */ --c-panel-danger: #2b1a1c; /* wino */ --c-text: #e2e8f1; /* primary — chłodna kość słoniowa */ --c-text-muted: #94a0b3; /* muted */ --c-text-subtle: #707b8d; --c-text-link: #69a9ff; --c-text-link-2: #8cc0ff; --c-text-on-accent:#ffffff; --c-blue-400: #69a9ff; --c-blue-500: #3b82f6; --c-blue-600: #2563eb; --c-blue-glow: rgba(59,130,246,.30); --c-purple-500: #a78bfa; --c-purple-600: #8b5cf6; --c-teal-500: #4ab3b6; --c-amber-500: #e0a13b; --c-emerald-500: #5fc26c; --c-red-500: #ef625a; --c-red-600: #d94840; --c-tint-blue: rgba(59,130,246,.10); --c-tint-purple: rgba(167,139,250,.10); --c-tint-amber: rgba(224,161,59,.10); --c-tint-emerald: rgba(95,194,108,.10); --c-tint-red: rgba(239,98,90,.10); --grad-primary: linear-gradient(180deg, #4f8ef7 0%, #3b82f6 100%); --grad-primary-h: linear-gradient(180deg, #69a9ff 0%, #4f8ef7 100%); --grad-brand: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); --grad-warm: linear-gradient(135deg, #e0a13b 0%, #ef625a 100%); --grad-cool: linear-gradient(135deg, #3b82f6 0%, #4ab3b6 100%); --shadow-color: 0 0 0; } /* ---------- Theme: LIGHT — papier + chmury, nie biel ---------- Bazowy odcień to ciepła kość/papier; karty są wyniesione chłodniejszym alabastrem. Tinted panele to delikatne pastele, zaczerpnięte z palety Nordic / Linear / Material You. */ [data-theme="light"] { --c-bg: #ebeef3; /* chmurny stone — lekka chłodna mgła */ --c-surface-0: #f4f3ef; /* papier — ciepłe tło sekcji */ --c-surface-1: #fbfaf6; /* karta — kremowy alabaster */ --c-surface-2: #e6e4dd; /* hover — beżowy popiół */ --c-surface-3: #ccc8bf; /* border — warm stone */ --c-surface-4: #a8a399; /* border-strong */ /* Pastele dzienne — soft, low chroma */ --c-panel-cool: #e3edf7; /* sidebar — błękit nieba */ --c-panel-warm: #f6ecdb; /* params — kremowy sand */ --c-panel-accent: #d3e6fb; /* wybrane — sky */ --c-panel-success:#dcefdb; /* mint */ --c-panel-warn: #f4ead0; /* butter */ --c-panel-danger: #f3d9d4; /* blush */ --c-text: #1e2630; /* graphite — kontrast na papierze */ --c-text-muted: #5b6573; --c-text-subtle: #818b98; --c-text-link: #0d5dd0; --c-text-link-2: #094aa6; --c-text-on-accent:#ffffff; --c-blue-400: #2a82e8; --c-blue-500: #0d5dd0; --c-blue-600: #094aa6; --c-blue-glow: rgba(13,93,208,.25); --c-purple-500: #7a48cc; --c-purple-600: #5d36a8; --c-teal-500: #1b7c83; --c-amber-500: #9a6700; --c-emerald-500: #1a7f37; --c-red-500: #c63232; --c-red-600: #a01c1c; --c-tint-blue: rgba(13,93,208,.08); --c-tint-purple: rgba(122,72,204,.08); --c-tint-amber: rgba(154,103,0,.10); --c-tint-emerald: rgba(26,127,55,.10); --c-tint-red: rgba(198,50,50,.08); --grad-primary: linear-gradient(180deg, #2a82e8 0%, #0d5dd0 100%); --grad-primary-h: linear-gradient(180deg, #4ba3ff 0%, #2a82e8 100%); --grad-brand: linear-gradient(135deg, #0d5dd0 0%, #7a48cc 100%); --grad-warm: linear-gradient(135deg, #9a6700 0%, #c63232 100%); --grad-cool: linear-gradient(135deg, #0d5dd0 0%, #1b7c83 100%); --shadow-color: 30 38 48; } /* Auto-respect system preference if user hasn't set a theme */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --c-bg: #ebeef3; --c-surface-0: #f4f3ef; --c-surface-1: #fbfaf6; --c-surface-2: #e6e4dd; --c-surface-3: #ccc8bf; --c-surface-4: #a8a399; --c-panel-cool:#e3edf7; --c-panel-warm:#f6ecdb; --c-panel-accent:#d3e6fb; --c-panel-success:#dcefdb; --c-panel-warn:#f4ead0; --c-panel-danger:#f3d9d4; --c-text:#1e2630; --c-text-muted:#5b6573; --c-text-subtle:#818b98; --c-text-link:#0d5dd0; --c-text-link-2:#094aa6; } } :root { /* ---------- Typography ---------- */ --font-ui: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-mono: "Consolas", "Cascadia Code", "SF Mono", ui-monospace, Menlo, monospace; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px; --fs-44: 44px; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.55; --lh-loose: 1.7; /* ---------- Spacing (4px base) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px; /* ---------- Radii ---------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-2xl: 16px; --r-full: 999px; /* ---------- Borders ---------- */ --bd: 1px solid var(--c-surface-3); --bd-strong: 1px solid var(--c-surface-4); --bd-focus: 1px solid var(--c-blue-500); /* ---------- Elevation — dla light/dim/dark różnie ---------- */ --elev-card: inset 0 0 0 1px var(--c-surface-3); --elev-pop: 0 8px 24px rgba(var(--shadow-color, 0 0 0), .25), inset 0 0 0 1px var(--c-surface-3); --elev-modal: 0 24px 64px rgba(var(--shadow-color, 0 0 0), .35), inset 0 0 0 1px var(--c-surface-3); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* ---------- Layout ---------- */ --layout-max: 1440px; --layout-sidebar: 280px; --layout-panel: 340px; --layout-toolbar-h: 56px; /* ---------- Hit targets ---------- */ --hit-desktop: 36px; --hit-touch: 44px; /* ---------- Z-index ---------- */ --z-base: 1; --z-sticky: 10; --z-overlay: 100; --z-modal: 200; --z-toast: 300; } /* ---------- Base reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-ui); font-size: var(--fs-13); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } @media (max-width: 767px) { html, body { font-size: var(--fs-14); } } h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: var(--fw-semibold); letter-spacing: -.01em; } p { margin: 0; } button { font: inherit; color: inherit; } a { color: var(--c-text-link); text-decoration: none; } a:hover { color: var(--c-text-link-2); } ::selection { background: var(--c-blue-glow); color: var(--c-text); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--c-surface-3); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--c-surface-4); } :focus-visible { outline: 2px solid var(--c-blue-500); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ============================================================ Legacy aliasy (v1 → v2). app.css / niektóre szablony używają nazw semantycznych z v1 — mapujemy je na motywo-świadome tokeny v2, żeby działały we wszystkich 3 motywach bez zmiany szablonów. (źródło: design/Wycena Web/wycena-web-handoff/style/tokens.css) ============================================================ */ :root, [data-theme="dim"], [data-theme="dark"], [data-theme="light"] { --c-green-400: var(--c-emerald-500); --c-green-500: var(--c-emerald-500); --c-yellow-500: var(--c-amber-500); --c-red-400: var(--c-red-500); }