/* EFIX ERP — Design Tokens v1.0 Trijų lygių hierarchija: Primitive → Semantic → Component PRIMITYVAI (--red-500, --gray-400 …) YRA VIDINIAI: juos naudoja tik šis failas ir design-system.css semantiniams tokenams apibrėžti. Moduliuose, puslapiuose ir JS — tik semantiniai: --color-status-*, --color-action-*, --text-*, --bg-*, --border*, --accent-*, --badge-*. Linteris (lint:design, taisyklė primitive-token) neleidžia jų skaičiui moduliuose augti. 2026-08-21 pašalinti 26 niekur nenaudoti atspalviai. + Typography tokens + Spacing tokens NAUDOJIMAS: - Šis failas yra TIESOS ŠALTINIS visoms dizaino konstantoms - Bundlinamas į design-system.min.css automatiškai (minify.sh) - Tiesiogiai įtraukiamas per @import design-system.css (dev) ═══════════════════════════════════════════════════════════════ */ /* LAYER 1: PRIMITIVE TOKENS Gryni spalvų/reikšmių vardai — be semantinės prasmės. Šaltinis: custom ERP petroleum teal + warm gray paletė. ═══════════════════════════════════════════════════════════════ */ @layer strong, vendor, tokens, base, components, modules, standards, overrides; @layer tokens { :root { /* Azure / EFIX brand (dark theme akcentas) — #0074BC */ --blue-100: #b8d9f5; --blue-300: #57a5e3; --blue-400: #2a8fd9; --blue-500: #3D9BE0; --blue-600: #0074BC; --blue-700: #005FA3; --blue-800: #004A85; --blue-900: #003567; /* Green */ --green-50: #eefaf3; --green-100: #d3f4e1; --green-400: #3ec280; --green-500: #1faa65; --green-600: #158f52; --green-700: #107341; --green-800: #0c5a32; /* Red */ --red-50: #fef2f2; --red-100: #fde3e3; --red-400: #f07070; --red-500: #e54545; --red-600: #cc2828; --red-700: #aa1e1e; --red-800: #8a1818; /* Orange */ --orange-100: #fef0e0; --orange-200: #fddab4; --orange-400: #f7a048; --orange-500: #f07c18; --orange-600: #d4620a; --orange-700: #ae4b08; /* Amber (akcentinė) — gintaro šiluma */ --amber-100: #fef4dd; --amber-400: #f3b636; --amber-500: #e8a020; --amber-600: #c97810; --amber-700: #a55e09; /* Yellow */ /* Lentelės eilutės veiksmų ikonos — crimson / forest green / steel blue. Atskiri nuo --red/--green/--blue: ten ERP firminis azure ir žalia, o čia reikia trijų iš karto atskiriamų atspalvių vienas šalia kito. */ --crimson-400: #e8556f; --crimson-500: #dc143c; --crimson-600: #b21032; --forest-400: #3aad3a; --forest-500: #228b22; --forest-600: #1a6f1a; --steel-400: #6ea3cd; --steel-500: #4682b4; --steel-600: #386a93; /* Purple */ --purple-100: #f2ecff; --purple-200: #e4d8ff; --purple-400: #b092fb; --purple-500: #9068f5; --purple-600: #7445e8; --purple-700: #5c2fcf; /* Indigo */ --indigo-100: #eaecff; --indigo-200: #d4d8ff; --indigo-400: #7b81f5; --indigo-500: #5e65ef; --indigo-600: #4549e0; --indigo-700: #3436c4; /* Azure (sidebar light-theme akcentas) */ /* Cyan */ /* Teal (info tonams) */ --teal-100: #d4f5ee; --teal-400: #3ec3ac; --teal-500: #18a892; --teal-700: #0b7061; /* Pink */ /* Gray (šiltos pilkos — warm undertone, ne šaltas Zinc) */ --gray-50: #f8f7f5; --gray-100: #f2f0ed; --gray-200: #e5e1db; --gray-300: #d1cdc5; --gray-400: #a8a39a; --gray-500: #7d776f; --gray-600: #5c5650; --gray-700: #43403a; --gray-800: #2e2b26; --gray-900: #1e1c18; /* Slate (Navy tonams) */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-400: #94a3b8; --slate-600: #4a5260; --slate-700: #353d4e; --slate-800: #202840; --slate-900: #121a30; --slate-950: #080e1e; /* ERP tamsios paviršių spalvos — neutralios, be rudos */ --surface-950: #0f0f12; /* --bg-primary dark */ --surface-900: #18181b; /* --bg-secondary dark */ --surface-800: #1e1e24; /* --bg-card dark */ --surface-750: #26262e; /* --bg-card-hover dark */ --surface-700: #242429; /* --bg-tertiary dark */ --surface-input: #0d0d10; /* --bg-input dark */ --border-dark: #2d2d36; /* --border dark */ /* Universalūs */ --white: #ffffff; /* Neutral grays (sidebar light theme, Tailwind neutral scale) */ --neutral-100: #f3f4f6; --neutral-150: #eceef1; --neutral-200: #e5e7eb; --neutral-300: #d1d5db; --neutral-400: #9ca3af; --neutral-500: #6b7280; --neutral-600: #4b5563; --neutral-700: #374151; --neutral-900: #111827; --black: #000000; /* Tooltip (visada tamsus, nepriklausomai nuo temos) */ --bg-tooltip: #1a1a2e; --text-tooltip: #e2e8f0; } /* LAYER 2: SEMANTIC TOKENS Prasmės pagrindu — ką reiškia, ne kokia spalva. Naudoti šiuos UI logikoje, ne primityvus. ═══════════════════════════════════════════════════════════════ */ :root { /* Action colors (mygtukams, interaktyvumui) */ --color-action-primary: var(--blue-600); --color-action-primary-hover: var(--blue-700); --color-action-primary-active: var(--blue-800); --color-action-primary-subtle: color-mix(in srgb, var(--blue-600) 12%, transparent); /* Atidaryto puslapio žymėjimas navigacijoje — tik spalva, be fono ir šešėlio. Tamsiame fone šviesesnis atspalvis, kitaip mėlyna neįskaitoma. */ --color-nav-active: var(--blue-400); /* Meniu/skirtukų užvedimo fonas — tas pats mėlynas atspalvis kaip sidebar (žr. shared-sidebar.css --sb-hover-accent). Naudoti bet kur, kur elementas elgiasi kaip navigacijos/meniu punktas: .tab-btn, „Daugiau" dropdown ir jo punktai — žr. styleguide.html#tab-bar. */ --bg-hover-accent: color-mix(in srgb, var(--color-nav-active) 12%, transparent); --color-action-success: var(--green-500); --color-action-success-hover: var(--green-600); --color-action-success-active: var(--green-700); --color-action-danger: var(--red-600); --color-action-danger-hover: var(--red-700); --color-action-danger-active: var(--red-800); --color-action-warning: var(--amber-600); --color-action-warning-hover: var(--amber-700); /* Lentelių eilučių veiksmai — trynimas, redagavimas, peržiūra. Tamsiame fone imami šviesesni atspalviai, kad ikona neprarastų kontrasto; tikslios crimson/forest/steel reikšmės — šviesioje temoje žemiau. */ --color-action-row-delete: var(--crimson-400); --color-action-row-delete-hover: var(--crimson-500); --color-action-row-edit: var(--forest-400); --color-action-row-edit-hover: var(--forest-500); --color-action-row-info: var(--steel-400); --color-action-row-info-hover: var(--steel-500); /* Status/Feedback colors (badge'ams, statusams) */ --color-status-success: var(--green-500); --color-status-danger: var(--red-500); --color-status-warning: var(--amber-500); --color-status-info: var(--teal-500); /* Navy (admin/premium elementams) */ --color-navy: var(--slate-800); --color-navy-dark: var(--slate-900); --color-navy-light: var(--slate-700); /* Metallic / gamification */ --color-bronze: #cd7f32; --color-silver: #c0c0c0; --color-gold: #f5b800; --color-platinum: #c8c8c8; --color-vip: #9b59b6; /* Lojalumo lygiai (Bronza / Sidabras / Auksas / VIP) Gryni metalo atspalviai (#c0c0c0, #ffd700) tekstui netinka — ant balto fono kontrastas nesiekia 2:1. Todėl kiekvienam lygiui trys reikšmės: -fg tekstui ir ikonai, -bg ženklo fonui, -line rėmeliui/skirtukui. Šviesios temos reikšmės perrašomos .light-theme bloke žemiau. */ --tier-bronze-fg: #e0784a; --tier-bronze-bg: color-mix(in srgb, #e0784a 16%, transparent); --tier-bronze-line: color-mix(in srgb, #e0784a 42%, transparent); --tier-silver-fg: #9fbdd6; --tier-silver-bg: color-mix(in srgb, #9fbdd6 16%, transparent); --tier-silver-line: color-mix(in srgb, #9fbdd6 42%, transparent); --tier-gold-fg: #f0b429; --tier-gold-bg: color-mix(in srgb, #f0b429 16%, transparent); --tier-gold-line: color-mix(in srgb, #f0b429 42%, transparent); --tier-vip-fg: #b57ae0; --tier-vip-bg: color-mix(in srgb, #b57ae0 16%, transparent); --tier-vip-line: color-mix(in srgb, #b57ae0 42%, transparent); /* Įvertinimo žvaigždutės — didelė užpildyta forma, todėl gali būti ryškesnė už aukso teksto toną (--tier-gold-fg), kuriam būtinas 4.5:1 kontrastas. */ --star-gold: #f0b429; /* Kliento tipai */ --color-client-fizinis: var(--blue-500); /* #5b5ea6 — fizinis asmuo */ --color-client-juridinis: var(--color-navy); /* #202840 — juridinis asmuo */ /* Rank badge spalvos (gamification) */ --rank-gold-bg: #FBBF24; /* aukso fonas (1-asis rangas) */ --rank-gold-text: #78350F; /* aukso tekstas */ --rank-bronze-bg: #FED7AA; /* bronzos fonas (3-asis rangas) */ --rank-bronze-text: #C2410C; /* bronzos tekstas */ } /* LAYER 3: COMPONENT TOKENS Specifiniai komponentų nustatymai. Leidžia keisti vieno komponento stilių nekeičiant semantikos. ═══════════════════════════════════════════════════════════════ */ :root { /* Button tokens */ --btn-primary-bg: var(--color-action-primary); --btn-primary-bg-hover: var(--color-action-primary-hover); --btn-primary-bg-active: var(--color-action-primary-active); --btn-danger-bg: var(--color-action-danger); --btn-danger-bg-hover: var(--color-action-danger-hover); --btn-danger-bg-active: var(--color-action-danger-active); /* Count badge tokens (skaitliukų ženkleliai) */ --count-badge-bg: color-mix(in srgb, var(--indigo-500) 15%, transparent); --count-badge-color: var(--indigo-400); --count-badge-border: color-mix(in srgb, var(--indigo-400) 35%, transparent); /* Badge tokens */ --badge-success-bg: color-mix(in srgb, var(--color-action-success) 12%, transparent); --badge-success-text: var(--color-action-success); --badge-danger-bg: color-mix(in srgb, var(--color-action-danger) 12%, transparent); --badge-danger-text: var(--color-action-danger); --badge-warning-bg: color-mix(in srgb, var(--color-action-warning) 12%, transparent); --badge-warning-text: var(--color-action-warning); --badge-info-bg: color-mix(in srgb, var(--color-status-info) 12%, transparent); --badge-info-text: var(--color-status-info); --badge-gray-bg: color-mix(in srgb, var(--gray-500) 12%, transparent); --badge-gray-text: var(--gray-500); --badge-purple-bg: color-mix(in srgb, var(--purple-500) 12%, transparent); --badge-purple-text: var(--purple-500); --badge-gold-bg: color-mix(in srgb, var(--amber-600) 12%, transparent); --badge-gold-text: var(--amber-600); /* Status semantic aliases */ --color-status-pending: var(--amber-500); --color-status-active: var(--green-500); --color-status-inactive: var(--gray-400); --color-status-draft: var(--orange-500); --color-status-partial: var(--orange-500); --color-status-cancelled: var(--gray-400); --color-status-error: var(--red-500); /* Darbuotojo buvimo būsena (presence) — avataro taškas visur sistemoje */ --color-presence-online: var(--green-500); --color-presence-busy: var(--amber-500); --color-presence-dnd: var(--red-500); --color-presence-wfh: var(--blue-600); --color-presence-lunch: var(--orange-500); --color-presence-vacation: var(--purple-500); --color-presence-offline: var(--gray-400); /* Link color */ --color-link: #1a6bc4; /* standartinis nuorodos mėlis (el. pašto turinyje) */ /* Repair document — warranty & warning colors */ --color-warranty: #1a7a3a; /* garantija — žalia */ --color-warranty-info: #1a5c99; /* garantijos terminas — mėlyna */ --color-repair-warning-border:#e5a000; /* įspėjimo langelio kraštinė */ --color-repair-warning-bg: #fffbe6; /* įspėjimo langelio fonas */ --color-repair-warning-text: #5a4a00; /* įspėjimo tekstas */ --color-repair-warning-strong:#3a3000; /* įspėjimo bold tekstas */ } /* LAYER 4: TYPOGRAPHY TOKENS Vieninga šrifto dydžių ir svorių sistema. ═══════════════════════════════════════════════════════════════ */ :root { /* Font sizes */ --text-2xs: 0.75rem; /* 12px — etiketės, timestamp'ai */ --text-xs: 0.8125rem; /* 13px */ --text-sm: 0.875rem; /* 14px — kompaktiški elementai */ --text-base: 0.9375rem; /* 15px — ERP bazinis dydis */ --text-md: 0.9375rem; /* 15px */ --text-lg: 1rem; /* 16px */ --text-xl: 1.125rem; /* 18px */ --text-2xl: 1.25rem; /* 20px — h2 */ --text-3xl: 1.5rem; /* 24px — h1 */ --text-4xl: 2rem; /* 32px — didelis skaičius, tuščios būsenos */ --text-5xl: 3rem; /* 48px — prisijungimo ženklas, iliustracijos */ --text-4xl: 1.875rem; /* 30px */ /* Font families */ /* Vienas šriftas visai sistemai (2026-08-22): Inter tekstui ir antraštėms; --font-heading paliktas kaip alias, kad senos taisyklės veiktų, bet naujame kode naudoti --font-sans. */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-heading: var(--font-sans); --font-mono: 'Fira Code', ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', Consolas, monospace; /* Font weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Tipografijos vaidmenys — 4 lygiai (naudoti vietoj laisvai renkamų dydžių) H1 puslapio antraštė, H2 modulio/kortelės antraštė, Body tekstas, Caption pagalbinis */ --font-h1: var(--font-semibold) var(--text-3xl) / 1.25 var(--font-sans); --font-h2: var(--font-semibold) var(--text-xl) / 1.3 var(--font-sans); --font-body: var(--font-normal) var(--text-base) / 1.5 var(--font-sans); --font-caption: var(--font-normal) var(--text-2xs) / 1.4 var(--font-sans); --color-caption: var(--text-muted); --font-extrabold: 800; /* Line heights */ --leading-none: 1; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; /* Lentelių struktūra */ --table-thead-bg: var(--bg-section-header); /* thead — šiek tiek tamsesnis nei eilutės */ --table-row-bg: var(--bg-card); /* eilutės fonas */ --table-row-border: var(--border); /* linija tarp eilučių */ /* Lentelių tipografija */ --table-cell-color: var(--text-primary); /* pagrindinis teksto standartas lentelėse */ --table-cell-weight: var(--font-medium); /* 500 — visoms ląstelėms */ --table-id-color: var(--text-primary); /* RMA, ORD, BUY — globalus standartas */ --table-id-size: inherit; /* šrifto dydis — paveldėtas iš td */ --table-meta-color: var(--text-muted); /* santykinis laikas, papildoma info */ --table-meta-size: 0.68rem; --table-amount-color: var(--text-primary); /* piniginės sumos — neutralios */ --table-amount-weight: var(--font-medium); /* 500 */ /* Sąrašų sumų semantinės spalvos (NE buhalterija) */ --list-paid-color: var(--green-400); /* avansas / gauta suma — žalia, tamsi tema */ --list-total-color: var(--red-400); /* galutinė suma — raudona, tamsi tema */ /* Ženkliukų pritamsinimas (tamsioje temoje ryškios spalvos per stiprios) Anksčiau tai darė filter: brightness(0.78) saturate(0.85). CSS filtras kiekvienam ženkliukui kuria atskirą piešimo sritį, o sąrašo puslapyje jų būna po 200 ir daugiau — dėl to slenkant liejosi vaizdas. Dabar tas pats atspalvis skaičiuojamas pačioje spalvoje, be filtro. Koeficientai parinkti lyginant su senuoju rezultatu: skiriasi ne daugiau kaip 11 iš 255. */ --badge-lightness: 0.82; --badge-chroma: 0.78; /* Letter spacing */ --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-wider: 0.08em; } /* LAYER 5: SPACING TOKENS Tailwind stiliaus tarpų sistema (1 unit = 4px = 0.25rem). ═══════════════════════════════════════════════════════════════ */ :root { /* 8pt TINKLELIS (2026-08-22): leidžiami tik 4 / 8 / 12 / 16 / 24 / 32 px — --space-1, -2, -3, -4, -6, -8. Tarpiniai tokenai (0-5, 0-75, 1-25, 1-5, 1-75, 2-5, 3-5, 5, 7) — PASENĘ: lint:design neleidžia naujų; liečiant failą keisti į artimiausią tinklelio reikšmę. */ --space-px: 1px; --space-0: 0px; --space-0-5: 0.125rem; /* 2px */ --space-0-75: 0.1875rem; /* 3px */ --space-1: 0.25rem; /* 4px */ --space-1-25: 0.3125rem; /* 5px */ --space-1-5: 0.375rem; /* 6px */ --space-1-75: 0.4375rem; /* 7px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3-5: 0.875rem; /* 14px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ /* Ikonų dydžiai — tik trys (data-icon-size="sm|md|lg") */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; /* Modalų pločiai — 4 dydžiai (.modal--sm, .modal (md), .modal--lg, .modal--fullscreen) */ --modal-sm: 400px; --modal-md: 600px; --modal-lg: 800px; /* Breakpoint'ai — trys (media query'se naudoti šias reikšmes; CSS var čia neveikia, tai dokumentacija) mobile ≤ 640px tablet ≤ 1024px desktop > 1024px */ --bp-mobile: 640px; --bp-tablet: 1024px; /* UI bar aukštis (thead eilutė + pagination) */ --bar-height: 3.5rem; /* 56px — standartinis aukštis visiems bar elementams */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ } /* LAYER 6: BORDER RADIUS TOKENS ═══════════════════════════════════════════════════════════════ */ :root { --transition-fast: 0.10s ease; /* hover, focus instant feedback */ --transition-quick: 0.15s ease; /* UI elementai, chat, micro-interactions */ --transition: 0.18s ease; /* standartinis perėjimas */ --transition-medium: 0.20s ease; /* paieška, accordion */ --transition-standard: 0.25s ease; /* panel'ai, dropdown'ai */ --transition-slow: 0.30s ease; /* modalai, sidebar'ai */ --radius-2xs: 2px; /* minimalūs kampai, mikro elementai */ --radius-xs: 3px; /* subtilūs kampai, maži žymekliai */ --radius-sm: 4px; /* badges, tooltips, pažymos */ --radius-base: 6px; /* chips, mažos kortelės, pill elementai */ --radius-md: 8px; /* mygtukai, įvestys, meniu eilutės */ --radius-lg: 10px; /* stat kortelės, toolbar'ai */ --radius-xl: 12px; /* pagrindinės kortelės, panels */ --radius-2xl: 16px; /* modalai, dideliai konteineriai */ --radius-3xl: 20px; /* didelės kortelės, overlay'ai */ --radius-full: 50%; /* apskritimai, pill mygtukai */ } /* LAYER 7: SHADOW TOKENS ═══════════════════════════════════════════════════════════════ */ :root { /* Šešėlių skalė. Tamsi tema naudoja juodą, nes slate atspalvis ant tamsaus paviršiaus nematomas; šviesios temos reikšmės — .light-theme bloke, jos nepakito. Kitokių šešėlių moduliuose nerašyti, rinktis artimiausią laiptelį. */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); /* ženkleliai, mygtukai */ --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35); /* kortelės, įvestys */ --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40); /* pakelta kortelė, meniu */ --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.50); /* modalai, popover'ai */ --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.60); /* viso ekrano modalai */ /* Fokuso žiedas — vienas visiems laukams ir mygtukams */ --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-action-primary) 25%, transparent); --shadow-focus-brand: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); /* Stiklo paviršiai — permatomi elementai ant tamsių panelių Tamsioje temoje — permatomas baltas, šviesioje — standartiniai paviršiaus/teksto tokenai (žr. .light-theme bloką žemiau). Naudoti vietoj rankinio color-mix su --white moduliniuose CSS. */ --glass-bg: color-mix(in srgb, var(--white) 7%, transparent); /* įvestys, mygtukai ant tamsios panelės */ --glass-border: color-mix(in srgb, var(--white) 12%, transparent); --glass-border-strong: color-mix(in srgb, var(--white) 35%, transparent); --glass-text: color-mix(in srgb, var(--white) 85%, transparent); /* pagrindinis tekstas */ --glass-text-dim: color-mix(in srgb, var(--white) 75%, transparent); /* antraeilis */ --glass-text-muted: color-mix(in srgb, var(--white) 50%, transparent); /* prislopintas */ --glass-text-faint: color-mix(in srgb, var(--white) 40%, transparent); /* placeholder, užuominos */ --glass-text-strong: var(--white); /* aktyvi/hover būsena */ --glass-bg-hover: color-mix(in srgb, var(--white) 12%, transparent); } /* LAYER 8: Z-INDEX SCALE Hierarchinė sluoksnių sistema — naudoti tik šiuos tokenus. ═══════════════════════════════════════════════════════════════ */ :root { --z-base: 1; /* baziniai pozicionuoti elementai */ --z-sticky: 10; /* sticky header'iai, lentelių header'iai */ --z-dropdown: 100; /* dropdown'ai, select'ai */ --z-sidebar: 200; /* sub-sidebar'ai, drawer'iai */ --z-topbar: 300; /* pagrindinis topbar */ --z-modal: 800; /* modalai */ --z-popover: 1200; /* popovers virš modalų */ --z-chat-widget: 8000; /* pokalbių mygtukas ir iššokantis langas */ --z-lightbox: 8500; /* nuotraukų ir failų peržiūra — virš modalų ir pokalbių mygtuko, po skambučio pranešimais; patvirtinimai virš jos (modal--elevated) */ --z-call: 9000; /* vaizdo skambučio pranešimai/burbulai */ --z-call-overlay: 9500; /* vaizdo skambutis fullscreen */ --z-supreme: 10000; /* absoliutus maksimumas (virš overlay) */ /* Virš modalų — eilė sutarta 2026-08-22 (principas: kuo labiau sistema kalba su žmogumi, tuo aukščiau) */ --z-panel: 10500; /* komandų paletė, PDF/QR/CSV peržiūros, chat popup, vedliai virš modalo */ --z-toast: 11000; /* toast ir pranešimai — matomi virš visko, kas atidaryta */ --z-tooltip: 11500; /* tooltip'ai — virš toast, kad būtų skaitomi visur */ --z-system: 12000; /* sesijos pabaiga, ryšio dingimas, klaidų pranešėjas, slapukų sutikimas, onboarding, puslapio kroviklis */ --z-overlay: 9999; /* fixed overlay/backdrop */ --overlay-backdrop: rgba(0,0,0,0.7); /* modalų ir drawer'ių fonas */ /* Paveikslėlių peržiūra virš tamsaus fono — mygtukai ir tekstas ant nuotraukos */ --lightbox-bg: rgba(0,0,0,0.9); --lightbox-chrome: rgba(0,0,0,0.55); --lightbox-chrome-hover: rgba(0,0,0,0.8); --lightbox-chrome-border: rgba(255,255,255,0.18); --lightbox-text-muted: rgba(255,255,255,0.75); /* Peržiūros langas visada tamsus, nepriklausomai nuo temos — nuotraukos spalvos matomos teisingai */ --lightbox-surface: rgb(18,18,21); --lightbox-panel: rgb(28,28,32); --lightbox-divider: rgba(255,255,255,0.08); --lightbox-text: rgba(255,255,255,0.92); --lightbox-text-faint: rgba(255,255,255,0.5); --lightbox-btn-hover: rgba(255,255,255,0.12); --lightbox-btn-active: rgba(255,255,255,0.2); --lightbox-soft: rgba(255,255,255,0.05); --lightbox-danger: rgb(248,113,113); --lightbox-link: rgb(96,165,250); --lightbox-lens-shadow: 0 6px 24px rgba(0,0,0,0.5); } /* LAYER 9: BREAKPOINTS SVARBU: CSS var() neveikia @media sąlygose! Šie komentarai yra dokumentacija — naudokite reikšmes tiesiogiai. Kanoniniai breakpoint'ai (max-width): 380px — labai mažas telefonas (iPhone SE 375px) 480px — telefonas (mobilusis) 768px — planšetė (PAGRINDINIS mobilės breakpoint) 900px — tablet landscape / sidebar collapse 1024px — laptop / stalo kompiuteris 1200px — platus ekranas Išimtys (tik specifiniams layoutams): 600px — modalų overflow (documents.css) — tik kai modalo min-width ~560px 380px — iPhone SE specifiškiems layoutams Nenaudoti: ✗ 640px, 700px, 560px, 500px — standartizuota į 480px arba 768px ✗ 767px — naudoti 768px ✗ @media(max-width:...) — visada su tarpais: @media (max-width: ...) ═══════════════════════════════════════════════════════════════ */ /* Aktyvūs breakpoint'ai (naudoti @media taisyklėse) CSS custom properties neveikia @media query viduje — naudoti tiesiogines reikšmes. Tokenai čia dokumentacijai: kur ką reikia keisti. --bp-mobile: 480px telefonai (mobile.css esami) --bp-tablet: 768px planšetės (mobile.css esami) --bp-compact: 1280px mažas laptopas — NAUJAS (sidebar compact) --bp-small: 1024px labai mažas laptopas — NAUJAS (stulpelių slėpimas) --bp-wide: 1600px platus ekranas ─────────────────────────────────────────────────────────────────────── */ /* LAYER 10: THIRD-PARTY BRAND COLORS Išorinių platformų oficialios spalvos — nekeisti. ═══════════════════════════════════════════════════════════════ */ :root { --brand-linkedin: #0a66c2; --brand-facebook: #1877f2; --brand-google: #4285f4; --brand-instagram: #e1306c; --brand-twitter: #1da1f2; --brand-youtube: #ff0000; --brand-whatsapp: #25d366; } /* Chat burbulų numatytosios spalvos (bubble settings picker) */ :root { --chat-bubble-own-bg: #1e334d; --chat-bubble-own-text: #d4e8f8; --chat-bubble-client-bg: #1e3a5f; --chat-bubble-client-text: #e0ecff; } /* Šviesi tema — action spalvos → azure (kaip ERP tekstas sidebar'e) */ /* Kaskada: --color-action-primary → --brand → --btn-primary-bg → visi mygtukų/akcentų tokenai */ .light-theme { /* Stiklo paviršiai šviesioje temoje — standartiniai tokenai */ --glass-bg: var(--bg-input); --glass-border: var(--bg-tertiary); --glass-border-strong: var(--border-strong); --glass-text: var(--text-primary); --glass-text-dim: var(--text-secondary); --glass-text-muted: var(--text-muted); --glass-text-faint: var(--text-muted); --glass-text-strong: var(--text-primary); --glass-bg-hover: var(--bg-hover); --color-action-primary: var(--blue-600); --color-action-primary-hover: var(--blue-700); --color-action-primary-active: #004a85; --color-action-primary-subtle: color-mix(in srgb, var(--blue-600) 12%, transparent); --color-nav-active: var(--blue-600); --bg-hover-accent: color-mix(in srgb, var(--color-nav-active) 8%, transparent); /* Eilutės veiksmų ikonos ant balto fono — sodrios reikšmės */ --color-action-row-delete: var(--crimson-500); --color-action-row-delete-hover: var(--crimson-600); --color-action-row-edit: var(--forest-500); --color-action-row-edit-hover: var(--forest-600); --color-action-row-info: var(--steel-500); --color-action-row-info-hover: var(--steel-600); /* Chat burbulų numatytosios spalvos — šviesi tema */ --chat-bubble-own-bg: #e3edff; --chat-bubble-own-text: #1e334d; --chat-bubble-client-bg: #dbeafe; --chat-bubble-client-text: #1e3a5f; /* Sąrašų sumų spalvos — tamsesnės šviesiam fonui (geresnis kontrastas) */ --list-paid-color: var(--green-600); /* #158f52 — pakankamas kontrastas baltam fonui */ --list-total-color: var(--red-600); /* #cc2828 — pakankamas kontrastas baltam fonui */ /* Šviesioje temoje netamsinama — spalvos ryškios ant balto fono */ --badge-lightness: 1; --badge-chroma: 1; /* Mygtukų hover/active — azūriniai atspalviai (nuoseklu su sidebar) */ --btn-hover-bg: rgba(0, 116, 188, 0.08); --btn-active-bg: rgba(0, 116, 188, 0.18); /* Skaitliukų badge'ai — azure (kaip sidebar laiškų badge) */ --count-badge-bg: var(--blue-600); --count-badge-color: var(--white); --count-badge-border: rgba(255, 255, 255, 0.35); /* Lojalumo lygiai — sodresni atspalviai, kad tekstas skaitytųsi ant balto */ --tier-bronze-fg: #a8481f; --tier-bronze-bg: color-mix(in srgb, #a8481f 10%, transparent); --tier-bronze-line: color-mix(in srgb, #a8481f 32%, transparent); --tier-silver-fg: #416b8c; --tier-silver-bg: color-mix(in srgb, #416b8c 10%, transparent); --tier-silver-line: color-mix(in srgb, #416b8c 32%, transparent); --tier-gold-fg: #8f6a00; --tier-gold-bg: color-mix(in srgb, #8f6a00 10%, transparent); --tier-gold-line: color-mix(in srgb, #8f6a00 32%, transparent); --tier-vip-fg: #7433a8; --tier-vip-bg: color-mix(in srgb, #7433a8 10%, transparent); --tier-vip-line: color-mix(in srgb, #7433a8 32%, transparent); --star-gold: #c98a00; } /* Semantiniai tokenai — iki 2026-09-05 gyveno design-system.css :root bloke. */ :root { /* Background (ERP custom dark surface scale — iš design-tokens.css) */ --bg-primary: var(--surface-950); --bg-secondary: var(--surface-900); --bg-card: var(--surface-800); --bg-card-hover: color-mix(in srgb, white 7%, transparent); --bg-elevated: var(--surface-750); --bg-input: var(--surface-input); --bg-hover: color-mix(in srgb, white 4%, transparent); /* Porų tokenai — reikšmė skiriasi tarp temų, perrašoma .light-theme bloke */ --bg-sunken: var(--bg-secondary); /* įleisti laukai ir įvestys ant panelių */ --bg-chrome-hover: var(--bg-card-hover); /* topbar/sidebar mygtukų hover */ --shadow-card: var(--shadow-md); /* kortelių hover šešėlis (šviesioje užtenka sm) */ --icon-invert: invert(1); /* tamsūs paveikslėliai tamsioje temoje */ --icon-invert-soft: invert(0.5); /* kalendoriaus piktogramos ir pan. */ --control-color-scheme: dark; /* date/select natyvūs valdikliai */ --bg-selected: color-mix(in srgb, var(--accent-blue) 8%, transparent); --border-selected: color-mix(in srgb, var(--accent-blue) 40%, transparent); --bg-sidebar: var(--surface-input); --bg-tertiary: var(--surface-700); --bg-section-header: var(--surface-700); --modal-chrome: var(--slate-900); /* Border */ --border: var(--border-dark); --border-strong: color-mix(in srgb, white 14%, transparent); --border-focus: var(--color-action-primary); /* Text */ --text-primary: var(--gray-100); --text-secondary: var(--gray-400); --text-muted: var(--gray-500); /* Brand (→ semantic tokens) */ --brand: var(--color-action-primary); --brand-dark: var(--color-action-primary-hover); --brand-light: var(--color-action-primary-subtle); /* AI widget akcentas (dark: brand, light: azure — kaip sidebar ERP tekstas) */ --color-ai-accent: var(--brand); --color-ai-accent-dark: var(--brand-dark); /* Navy (→ semantic tokens) */ --navy: var(--color-navy); --navy-dark: var(--color-navy-dark); --navy-light: var(--color-navy-light); /* ── Accent aliases → semantic tokenai (NE primityvai) Keičiant brand spalvą design-tokens.css — viskas pasikeičia automatiškai ── */ --accent-blue: var(--color-action-primary); --accent-blue-hover: var(--color-action-primary-hover); --accent-green: var(--color-action-success); --accent-red: var(--color-action-danger); --accent-orange: var(--color-status-warning); --accent-purple: var(--purple-500); --accent-gold: var(--tier-gold-fg); /* 2026-08-23: buvo --color-bronze — „auksinės" žvaigždutės piešėsi ruda */ --accent-yellow: var(--amber-500); --accent-cyan: var(--teal-500); --accent-teal: var(--teal-400); --accent-pink: var(--purple-500); --accent-indigo: var(--color-hint-primary); /* Alpha spalvų tokenai (inline style pakeitimui) */ /* Success (green) */ --success-a05: color-mix(in srgb, var(--accent-green) 5%, transparent); --success-a08: color-mix(in srgb, var(--accent-green) 8%, transparent); --success-a10: color-mix(in srgb, var(--accent-green) 10%, transparent); --success-a12: color-mix(in srgb, var(--accent-green) 12%, transparent); --success-a15: color-mix(in srgb, var(--accent-green) 15%, transparent); --success-a20: color-mix(in srgb, var(--accent-green) 20%, transparent); --success-a25: color-mix(in srgb, var(--accent-green) 25%, transparent); --success-a30: color-mix(in srgb, var(--accent-green) 30%, transparent); --success-a40: color-mix(in srgb, var(--accent-green) 40%, transparent); --success-a50: color-mix(in srgb, var(--accent-green) 50%, transparent); --success-a80: color-mix(in srgb, var(--accent-green) 80%, transparent); /* Danger (red) */ --danger-a06: color-mix(in srgb, var(--accent-red) 6%, transparent); --danger-a08: color-mix(in srgb, var(--accent-red) 8%, transparent); --danger-a10: color-mix(in srgb, var(--accent-red) 10%, transparent); --danger-a12: color-mix(in srgb, var(--accent-red) 12%, transparent); --danger-a15: color-mix(in srgb, var(--accent-red) 15%, transparent); --danger-a20: color-mix(in srgb, var(--accent-red) 20%, transparent); --danger-a25: color-mix(in srgb, var(--accent-red) 25%, transparent); --danger-a30: color-mix(in srgb, var(--accent-red) 30%, transparent); --danger-a40: color-mix(in srgb, var(--accent-red) 40%, transparent); --danger-a50: color-mix(in srgb, var(--accent-red) 50%, transparent); /* Info (blue) */ --info-a02: color-mix(in srgb, var(--accent-blue) 2%, transparent); --info-a04: color-mix(in srgb, var(--accent-blue) 4%, transparent); --info-a05: color-mix(in srgb, var(--accent-blue) 5%, transparent); --info-a06: color-mix(in srgb, var(--accent-blue) 6%, transparent); --info-a07: color-mix(in srgb, var(--accent-blue) 7%, transparent); --info-a08: color-mix(in srgb, var(--accent-blue) 8%, transparent); --info-a10: color-mix(in srgb, var(--accent-blue) 10%, transparent); --info-a12: color-mix(in srgb, var(--accent-blue) 12%, transparent); --info-a15: color-mix(in srgb, var(--accent-blue) 15%, transparent); --info-a20: color-mix(in srgb, var(--accent-blue) 20%, transparent); --info-a25: color-mix(in srgb, var(--accent-blue) 25%, transparent); --info-a30: color-mix(in srgb, var(--accent-blue) 30%, transparent); --info-a40: color-mix(in srgb, var(--accent-blue) 40%, transparent); --info-a75: color-mix(in srgb, var(--accent-blue) 75%, transparent); --info-a85: color-mix(in srgb, var(--accent-blue) 85%, transparent); /* Warning (amber) */ --warning-a04: color-mix(in srgb, var(--warning) 4%, transparent); --warning-a10: color-mix(in srgb, var(--warning) 10%, transparent); --warning-a12: color-mix(in srgb, var(--warning) 12%, transparent); --warning-a15: color-mix(in srgb, var(--warning) 15%, transparent); --warning-a20: color-mix(in srgb, var(--warning) 20%, transparent); --warning-a25: color-mix(in srgb, var(--warning) 25%, transparent); --warning-a30: color-mix(in srgb, var(--warning) 30%, transparent); /* Orange */ --orange-a08: color-mix(in srgb, var(--accent-orange) 8%, transparent); --orange-a10: color-mix(in srgb, var(--accent-orange) 10%, transparent); --orange-a12: color-mix(in srgb, var(--accent-orange) 12%, transparent); --orange-a15: color-mix(in srgb, var(--accent-orange) 15%, transparent); --orange-a20: color-mix(in srgb, var(--accent-orange) 20%, transparent); --orange-a30: color-mix(in srgb, var(--accent-orange) 30%, transparent); /* Yellow */ /* Indigo */ --indigo-a12: color-mix(in srgb, var(--accent-indigo) 12%, transparent); --indigo-a15: color-mix(in srgb, var(--accent-indigo) 15%, transparent); --indigo-a20: color-mix(in srgb, var(--accent-indigo) 20%, transparent); --indigo-a25: color-mix(in srgb, var(--accent-indigo) 25%, transparent); --indigo-a35: color-mix(in srgb, var(--accent-indigo) 35%, transparent); --indigo-a50: color-mix(in srgb, var(--accent-indigo) 50%, transparent); /* Cyan alpha */ /* Teal alpha */ --yellow-a06: color-mix(in srgb, var(--accent-yellow) 6%, transparent); --yellow-a10: color-mix(in srgb, var(--accent-yellow) 10%, transparent); --yellow-a15: color-mix(in srgb, var(--accent-yellow) 15%, transparent); --yellow-a20: color-mix(in srgb, var(--accent-yellow) 20%, transparent); --yellow-a30: color-mix(in srgb, var(--accent-yellow) 30%, transparent); --yellow-a40: color-mix(in srgb, var(--accent-yellow) 40%, transparent); --cyan-a04: color-mix(in srgb, var(--accent-cyan) 4%, transparent); --cyan-a08: color-mix(in srgb, var(--accent-cyan) 8%, transparent); --cyan-a10: color-mix(in srgb, var(--accent-cyan) 10%, transparent); --cyan-a12: color-mix(in srgb, var(--accent-cyan) 12%, transparent); --cyan-a15: color-mix(in srgb, var(--accent-cyan) 15%, transparent); --cyan-a20: color-mix(in srgb, var(--accent-cyan) 20%, transparent); --cyan-a30: color-mix(in srgb, var(--accent-cyan) 30%, transparent); --pink-a15: color-mix(in srgb, var(--accent-pink) 15%, transparent); --teal-a08: color-mix(in srgb, var(--accent-teal) 8%, transparent); --teal-a10: color-mix(in srgb, var(--accent-teal) 10%, transparent); --teal-a20: color-mix(in srgb, var(--accent-teal) 20%, transparent); /* Pink / Violet alpha */ --violet-a15: color-mix(in srgb, var(--accent-purple) 15%, transparent); /* Gold / Silver alpha */ --gold-a04: color-mix(in srgb, var(--color-gold) 4%, transparent); --gold-a10: color-mix(in srgb, var(--color-gold) 10%, transparent); --gold-a15: color-mix(in srgb, var(--color-gold) 15%, transparent); --gold-a30: color-mix(in srgb, var(--color-gold) 30%, transparent); --silver-a15: color-mix(in srgb, var(--color-silver) 15%, transparent); --silver-a20: color-mix(in srgb, var(--color-silver) 20%, transparent); --bronze-a15: color-mix(in srgb, var(--color-bronze) 15%, transparent); /* Neutral/zinc alpha */ --neutral-a10: color-mix(in srgb, var(--text-secondary) 10%, transparent); --neutral-a12: color-mix(in srgb, var(--text-secondary) 12%, transparent); --neutral-a15: color-mix(in srgb, var(--text-secondary) 15%, transparent); --neutral-a20: color-mix(in srgb, var(--text-secondary) 20%, transparent); --neutral-a30: color-mix(in srgb, var(--text-secondary) 30%, transparent); --neutral-a50: color-mix(in srgb, var(--text-secondary) 50%, transparent); /* Dark overlay (glassmorphism, login) */ --overlay-50: color-mix(in srgb, var(--bg-primary) 50%, transparent); --overlay-70: color-mix(in srgb, #0a0a0b 70%, transparent); --overlay-88: color-mix(in srgb, #1a1a1f 88%, transparent); /* Soft state backgrounds (JS-generuotam HTML inline stiliams) */ --bg-success-soft: var(--success-a10); --border-success-soft: var(--success-a30); --bg-danger-soft: var(--danger-a10); --border-danger-soft: var(--danger-a30); --bg-info-soft: var(--info-a10); --border-info-soft: var(--info-a30); /* Semantic shortcuts → semantic tokenai */ --success: var(--color-action-success); --danger: var(--color-action-danger); --warning: var(--color-action-warning); --info: var(--color-status-info); /* Layout — rem, kad masteliuotųsi su šaknies font-size (60px @16px) */ --header-height: 3.75rem; /* Dizaino nuoseklumo kintamieji → semantic tokenai */ --color-status-negative: var(--color-action-danger); --color-status-info: var(--teal-500); --color-hint-primary: var(--indigo-400); --color-hint-primary-bg: color-mix(in srgb, var(--color-hint-primary) 15%, transparent); --color-text-on-dark: var(--white); /* Badge */ --space-badge: 0.25rem 0.75rem; --badge-radius: 9999px; --badge-font-size: 0.75rem; /* Tier spalvos — apibrėžtos design-tokens.css */ /* Perėjimai — iš design-tokens.css, NEKARTOTI čia */ } /* Šviesi tema: tie patys semantiniai tokenai kitomis reikšmėmis. */ .light-theme { /* Nuotraukų peržiūra šviesioje temoje: pilkas fonas, baltas skydelis, tamsus tekstas */ --lightbox-surface: rgb(236,238,242); --lightbox-panel: rgb(255,255,255); --lightbox-divider: rgba(15,23,42,0.1); --lightbox-text: rgb(23,26,36); --lightbox-text-faint: rgba(15,23,42,0.55); --lightbox-btn-hover: rgba(15,23,42,0.07); --lightbox-btn-active: rgba(15,23,42,0.12); --lightbox-soft: rgba(15,23,42,0.04); --lightbox-danger: rgb(220,38,38); --lightbox-link: rgb(0,116,188); --lightbox-chrome: rgba(255,255,255,0.9); --lightbox-chrome-hover: rgb(255,255,255); --lightbox-lens-shadow: 0 6px 24px rgba(15,23,42,0.35); /* Šešėliai: slate atspalvis, kaip buvo iki 2026-09-05 */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.12); --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.20); --shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.32); /* Toolbar/filter-bar hover akcentas → azure (ne indigo) */ --color-hint-primary: var(--blue-600); --color-hint-primary-bg: rgba(0, 116, 188, 0.15); --bg-primary: var(--gray-50); --bg-secondary: var(--gray-200); --bg-card: var(--white); --bg-card-hover: color-mix(in srgb, var(--text-primary) 7%, transparent); --bg-elevated: var(--white); --bg-input: var(--gray-100); --bg-hover: color-mix(in srgb, var(--text-primary) 4%, transparent); --bg-sunken: var(--bg-primary); --bg-chrome-hover: var(--bg-primary); --shadow-card: var(--shadow-sm); --icon-invert: none; --icon-invert-soft: none; --control-color-scheme: light; --bg-selected: color-mix(in srgb, var(--accent-blue) 6%, transparent); --border-selected: color-mix(in srgb, var(--accent-blue) 30%, transparent); --bg-sidebar: var(--white); --bg-tertiary: var(--gray-200); --bg-section-header: var(--neutral-100); --modal-chrome: var(--neutral-100); --border: var(--gray-300); --border-strong: var(--gray-400); --border-focus: var(--color-action-primary); --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-muted: var(--gray-500); color-scheme: light; /* AI widget — azure (kaip ERP tekstas sidebar'e) */ --color-ai-accent: var(--blue-600); --color-ai-accent-dark: var(--blue-700); } /* Perėjimų kreivės — iki 2026-09-05 gyveno components.css. */ :root { --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* hover, focus, spalvų perėjimai */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* modalai, popup'ai, badge'ai — lengvas peršokimas */ --ease-out: cubic-bezier(0.0, 0, 0.2, 1); /* elementai išeinantys iš ekrano */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* elementai įeinantys į ekraną */ } /* Viršutinės juostos aukštis — iki 2026-09-05 design-system.css. */ :root { --header-height: 48px; } }