/* ============================================================ DO NOT EDIT — vendored z design handoff Źródło: design/NewDesin/wycena-web-handoff/style/tokens.css Zmiany wyłącznie przez static/css/app.css (override). ============================================================ */ /* ============================================================ 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 — pełen GitHub Primer Dark ---------- */ [data-theme="dark"] { --c-bg: #0a0d12; --c-surface-0: #0d1117; --c-surface-1: #161b22; --c-surface-2: #21262d; --c-surface-3: #30363d; --c-surface-4: #484f58; --c-panel-cool: #0f1620; --c-panel-warm: #1c1813; --c-panel-accent: #0f1a2e; --c-panel-success:#0f1f15; --c-panel-warn: #1f1a0f; --c-panel-danger: #1f1313; --c-text: #e6edf3; --c-text-muted: #8b949e; --c-text-subtle: #6e7681; --c-text-link: #58a6ff; --c-text-link-2: #79c0ff; --c-text-on-accent:#ffffff; --c-blue-400: #388bfd; --c-blue-500: #1f6feb; --c-blue-600: #1a5fd9; --c-blue-glow: rgba(31,111,235,.35); --c-purple-500: #8957e5; --c-purple-600: #6e40c9; --c-teal-500: #1f8a8c; --c-amber-500: #d29922; --c-emerald-500: #3fb950; --c-red-500: #f85149; --c-red-600: #da3633; --c-tint-blue: rgba(31,111,235,.10); --c-tint-purple: rgba(137,87,229,.10); --c-tint-amber: rgba(210,153,34,.10); --c-tint-emerald: rgba(63,185,80,.10); --c-tint-red: rgba(248,81,73,.10); --grad-primary: linear-gradient(180deg, #388bfd 0%, #1f6feb 100%); --grad-primary-h: linear-gradient(180deg, #58a6ff 0%, #388bfd 100%); --grad-brand: linear-gradient(135deg, #1f6feb 0%, #6e40c9 100%); --grad-warm: linear-gradient(135deg, #d29922 0%, #f85149 100%); --grad-cool: linear-gradient(135deg, #1f6feb 0%, #1f8a8c 100%); --shadow-color: 0 0 0; } /* ---------- Theme: LIGHT — dla otoczeń biurowych / desktopowych ---------- */ [data-theme="light"] { --c-bg: #f6f8fa; --c-surface-0: #ffffff; /* karta wysunięta */ --c-surface-1: #f6f8fa; /* tło sekcji */ --c-surface-2: #eaeef2; /* hover */ --c-surface-3: #d0d7de; /* border */ --c-surface-4: #afb8c1; /* border-strong */ --c-panel-cool: #f1f7fc; --c-panel-warm: #fcf6ee; --c-panel-accent: #ddf4ff; --c-panel-success:#dafbe1; --c-panel-warn: #fff8c5; --c-panel-danger: #ffebe9; --c-text: #1f2328; --c-text-muted: #59636e; --c-text-subtle: #818b98; --c-text-link: #0969da; --c-text-link-2: #0550ae; --c-text-on-accent:#ffffff; --c-blue-400: #218bff; --c-blue-500: #0969da; --c-blue-600: #0550ae; --c-blue-glow: rgba(9,105,218,.30); --c-purple-500: #8250df; --c-purple-600: #6639ba; --c-teal-500: #1b7c83; --c-amber-500: #9a6700; --c-emerald-500: #1a7f37; --c-red-500: #cf222e; --c-red-600: #a40e26; --c-tint-blue: rgba(9,105,218,.08); --c-tint-purple: rgba(130,80,223,.08); --c-tint-amber: rgba(154,103,0,.10); --c-tint-emerald: rgba(26,127,55,.10); --c-tint-red: rgba(207,34,46,.08); --grad-primary: linear-gradient(180deg, #218bff 0%, #0969da 100%); --grad-primary-h: linear-gradient(180deg, #4ba3ff 0%, #218bff 100%); --grad-brand: linear-gradient(135deg, #0969da 0%, #8250df 100%); --grad-warm: linear-gradient(135deg, #9a6700 0%, #cf222e 100%); --grad-cool: linear-gradient(135deg, #0969da 0%, #1b7c83 100%); --shadow-color: 31 35 40; } /* 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: #f6f8fa; --c-surface-0: #ffffff; --c-surface-1: #f6f8fa; --c-surface-2: #eaeef2; --c-surface-3: #d0d7de; --c-surface-4: #afb8c1; --c-panel-cool:#f1f7fc; --c-panel-warm:#fcf6ee; --c-panel-accent:#ddf4ff; --c-text:#1f2328; --c-text-muted:#59636e; --c-text-subtle:#818b98; --c-text-link:#0969da; --c-text-link-2:#0550ae; } } :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; } }