/* Tokenët e dizajnit – e vetmja vend ku përcaktohen ngjyrat, hapësirat dhe tipografia. Ndrysho këtu dhe ndryshon i gjithë sistemi. Mbështet temën e ndritshme dhe të errët. */ :root { /* Marka */ --brand-950: #06102c; --brand-900: #071640; --brand-800: #0b1f5c; --brand-700: #16306f; --brand-600: #24479b; --brand-500: #3159b2; --brand-100: #e6edff; --brand-050: #f2f5ff; /* Neutralet */ --n-000: #fffefd; --n-025: #fbfaf8; --n-050: #f5f5f3; --n-100: #eceeF1; --n-200: #dfe3e9; --n-300: #c8ced8; --n-500: #727b8b; --n-700: #3e4757; --n-900: #111827; /* Semantike */ --ok-fg: #14734d; --ok-bg: #e8f6ef; --warn-fg: #966000; --warn-bg: #fff5dc; --bad-fg: #b63b31; --bad-bg: #fcedeb; --info-fg: var(--brand-700); --info-bg: var(--brand-100); /* Roli – këto përdoren nga komponentët, jo paleta e sipërme */ --bg: #f7f7f5; --surface: var(--n-000); --surface-2: var(--n-025); --surface-3: var(--n-100); --line: var(--n-200); --line-soft: var(--n-100); --text: var(--n-900); --text-muted: var(--n-500); --text-strong: var(--brand-800); --accent: var(--brand-800); --accent-hover: var(--brand-700); --accent-on: #f8faff; --focus: var(--brand-600); --sidebar-bg: #fffefd; --sidebar-text: #15203a; --sidebar-muted: #7d8492; --nav-active: #edf2ff; --topbar-bg: color-mix(in srgb, var(--bg) 92%, transparent); --positive: #178252; --positive-soft: #e7f5ed; /* Tipografia */ --font: "Avenir Next", Avenir, "Helvetica Neue", sans-serif; --font-display: "Avenir Next", Avenir, "Helvetica Neue", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 21px; --fs-2xl: 30px; --fs-3xl: clamp(28px, 2.8vw, 38px); /* Hapësira – shkallë 4px */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 22px; --s-6: 30px; --s-7: 44px; --s-8: 64px; /* Forma */ --r-sm: 7px; --r-md: 9px; --r-lg: 12px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(11, 31, 92, .035); --shadow-2: 0 12px 34px rgba(11, 31, 92, .09); --shadow-3: 0 20px 60px rgba(7, 22, 64, .22); --sidebar-w: 248px; --topbar-h: 94px; --content-max: 1560px; } /* Tema e errët: e ndjek sistemin, veç kur përdoruesi ka zgjedhur shprehimisht (atributi data-theme mbi fiton mbi preferencën e sistemit). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #09111f; --surface: #0e192b; --surface-2: #111e32; --surface-3: #17253b; --line: #22334d; --line-soft: #192940; --text: #edf1f8; --text-muted: #8f9bb0; --text-strong: #d4deff; --accent: #3159b2; --accent-hover: #3f69c9; --accent-on: #f8faff; --focus: #6f8ff0; --sidebar-bg: #07111f; --sidebar-text: #edf1f8; --sidebar-muted: #78869d; --nav-active: #13284d; --topbar-bg: rgba(9, 17, 31, .9); --positive: #4fc486; --positive-soft: #102d22; --brand-100: #1d2740; --brand-050: #182035; --ok-fg: #64d6a4; --ok-bg: #10281f; --warn-fg: #f0bc63; --warn-bg: #2a2013; --bad-fg: #f08279; --bad-bg: #2c1614; --info-fg: #a8bdff; --info-bg: #1b2440; --shadow-1: 0 1px 2px rgba(0, 0, 0, .28); --shadow-2: 0 12px 34px rgba(0, 0, 0, .28); --shadow-3: 0 20px 60px rgba(0, 0, 0, .55); } } :root[data-theme="dark"] { --bg: #09111f; --surface: #0e192b; --surface-2: #111e32; --surface-3: #17253b; --line: #22334d; --line-soft: #192940; --text: #edf1f8; --text-muted: #8f9bb0; --text-strong: #d4deff; --accent: #3159b2; --accent-hover: #3f69c9; --accent-on: #f8faff; --focus: #6f8ff0; --sidebar-bg: #07111f; --sidebar-text: #edf1f8; --sidebar-muted: #78869d; --nav-active: #13284d; --topbar-bg: rgba(9, 17, 31, .9); --positive: #4fc486; --positive-soft: #102d22; --brand-100: #1d2740; --brand-050: #182035; --ok-fg: #64d6a4; --ok-bg: #10281f; --warn-fg: #f0bc63; --warn-bg: #2a2013; --bad-fg: #f08279; --bad-bg: #2c1614; --info-fg: #a8bdff; --info-bg: #1b2440; --shadow-1: 0 1px 2px rgba(0, 0, 0, .28); --shadow-2: 0 12px 34px rgba(0, 0, 0, .28); --shadow-3: 0 20px 60px rgba(0, 0, 0, .55); }