/* ============================================================================ STAS design tokens — the single source of truth for colour, radius, control height, spacing and shadow. SOURCE OF TRUTH --------------- Every value below is copied from chapter 1 ("Tokeni") of the ERP design handoff of 27.08.2026, which in turn read them off the reference design "Radnici — upravljaj v2" — i.e. off `Pages/Workers/Index.razor.css`, a screen that already ships. Nothing here is invented. THE RULE: **chapter 1 wins over a mockup.** The handoff says so itself — if a mockup shows a colour, radius or height that cannot be named by a token in this file, the mockup is wrong, not this file. Do not add a value here to make a mockup validate; raise it instead. ONE PALETTE, TWO NAMES ---------------------- `wwwroot/css/styles/imported-style.css` already declares the app's tokens under `--stas-*` names (documented in UIDesignAndGuidelines.md). Where the handoff's token carries the SAME value, it is declared here as an alias of the `--stas-*` one, with the literal hex as the var() fallback. That keeps a single source of truth: change `--stas-primary` and `--teal` follows. Where the values genuinely differ (e.g. hover shades) the handoff value is written literally and the difference is noted inline. HOW TO USE ---------- Always with a fallback, so a component still renders if this file fails to load or is inlined somewhere without it: color: var(--crit, #c53a3a); border-radius: var(--r-card, 16px); This file is linked FIRST in index.html. It declares custom properties only — no selectors that paint anything — so load order cannot regress any screen. ============================================================================ */ :root { /* ---------------------------------------------------------------- Brand */ --teal: var(--stas-primary, #003951); /* page title, primary button, icons, links */ --teal-600: #00506f; /* primary button hover. NOTE: deliberately NOT --stas-primary-hover (#005a7a) — the handoff measured #00506f off the reference. */ --ink-strong: #0f2836; /* modal title, tooltip, toast */ --accent: var(--stas-accent, #ED880E); /* modal confirm button, active page, switch */ --accent-600: #d67a0b; /* orange button hover. NOTE: not --stas-accent-hover (#f59e0b), same reason. */ --accent-700: #c9740f; /* counter next to a title, textual action */ --accent-ink: #a75f0a; /* text ON an orange background */ --accent-bg: #fdf0e3; /* badge and avatar background */ /* ------------------------------------------------------------- Semantic */ --excel: #1d6f42; /* "Izvoz u Excel" button only */ --ok: #12724f; /* positive badge text */ --ok-dot: #16855a; /* the dot in a positive badge */ --ok-bg: #e6f2ec; /* positive badge background */ --crit: #c53a3a; /* error, negative amount, overdue */ --crit-ink: #a52f2f; /* text on a --crit-bg badge */ --crit-bg: #f8dada; /* error badge background */ --crit-row: #fdf5f5; /* a table row in an error state */ --alert: var(--stas-danger, #dc2626); /* the asterisk on a required field */ /* ------------------------------------------------------------- Surfaces */ --paper: var(--stas-bg-page, #f8f9fa); /* page background */ --surface: var(--stas-bg-surface, #ffffff);/* cards, rows, fields */ --surface-2: #fafbfc; /* modal footer, zebra stripe */ --surface-3: #f8fafc; /* row under the cursor */ --surface-4: var(--stas-bg-muted, #f1f5f9); /* item hover, class divider */ --grid-head: var(--stas-border, #e2e8f0); /* table head AND foot, tab strip */ --grid-dom: #dbe3ea; /* emphasised column group (Saldo) */ /* ---------------------------------------------------------------- Rules */ --rule-card: #ccd6e0; /* card and table outer border */ --rule-head: var(--stas-border-strong, #cbd5e1); /* 2px under the table head; white button border */ --rule-sec: #e6eaf0; /* modal section border, filter border */ --rule-field: #dbe3ea; /* field border inside a modal */ --rule-soft: #eef2f6; /* inner dividers */ --rule-row: var(--stas-border, #e2e8f0); /* table row boundary */ /* ----------------------------------------------- Ink: base → extinguished --ink-5 is the table-head grey, --ink-6 the footnote grey, --ink-7 the colour of the em-dash that means "no data". Never use --ink-7 for text that carries meaning. */ --ink: var(--stas-text-primary, #1e293b); --ink-2: #334155; --ink-3: #475569; --ink-4: #5b6b7c; --ink-5: var(--stas-text-secondary, #64748b); --ink-6: var(--stas-text-muted, #94a3b8); --ink-7: #cbd5e1; /* ----------------------------------------------------------- Typography One family. There is no separate monospace: numbers stay in the UI font and are aligned with `font-variant-numeric: tabular-nums` instead. */ --font-ui: 'Helvetica Neue', Helvetica, Arial, sans-serif; --fs-page-title: 26px; /* 700, letter-spacing -.4px */ --fs-modal-title: 17px; /* 700 */ --fs-modal-confirm: 15px; /* 700, the primary button in a modal footer */ --fs-field-value: 14.5px; --fs-cell: 14px; /* table cell, filter */ --fs-control: 13.5px; /* buttons, tabs, notes */ --fs-label: 13px; /* field label, 600 */ --fs-hint: 12.5px; /* subtitle, hint, table footer */ --fs-head: 12px; /* uppercase table head, 600, ls .4px; status badge, 600 */ --fs-section: 11.5px; /* uppercase section title, 600, ls .5px */ --ls-page-title: -.4px; --ls-head: .4px; --ls-section: .5px; /* --------------------------------------------------------------- Radius */ --r-btn: 7px; /* buttons and a single tab */ --r-field: 9px; /* fields, filters, chips, the tab strip */ --r-section: 11px; /* modal section, modal icon, badge pill */ --r-card: 16px; /* card and modal */ --r-pill: 999px; /* counter and badge */ --r-avatar: 50%; /* ------------------------------------------------------ Control heights */ --h-btn-header: 38px; /* button in the page title bar */ --h-filter: 40px; /* search, filter, select */ --h-field: 44px; /* field in a modal, and the modal's primary button */ --h-row-action: 36px; /* action icon inside a table row */ --h-btn-panel: 34px; /* button inside a panel or a message */ --h-tab: 32px; --h-avatar: 40px; /* ------------------------------------------------------ Layout & spacing */ --content-max: 1240px; /* content width left by the 226px nav at 1466px */ --page-pad-y: 22px; --page-pad-x: 24px; --block-gap: 16px; /* between blocks on a page */ /* Table metrics. --pad is the VERTICAL cell padding and is the density switch: 11px comfortable (default), 7px compact — compact fits ~22% more rows. Horizontal padding is always 14px. */ --pad: 11px; --pad-compact: 7px; --grid-cell-pad-x: 14px; --grid-head-pad-y: 13px; --grid-max-h: 660px; /* before the body scrolls */ /* Modal padding, per the chosen 11a pattern. */ --modal-body-pad: 20px 22px; --modal-head-pad: 20px 22px 18px; --modal-foot-pad: 14px 22px; /* Modal size buckets — chosen by AMOUNT OF CONTENT, not by importance. S: a confirmation, one decision, up to three fields. M: one task, up to eight fields (520 narrow / 640 wide). L: a document with sections, two columns. */ --modal-w-s: 440px; --modal-w-m: 520px; --modal-w-m-wide: 640px; --modal-w-l: 1000px; /* -------------------------------------------------------------- Shadows */ --sh-card: 0 1px 2px rgba(16, 32, 48, .06), 0 1px 3px rgba(16, 32, 48, .05); --sh-btn: 0 1px 3px rgba(20, 40, 60, .05); /* Active tab — an orange ring, not a fill. */ --sh-tab-active: 0 0 0 1.5px rgba(237, 136, 14, .55), 0 2px 7px rgba(237, 136, 14, .30), 0 1px 2px rgba(15, 32, 48, .08); /* Modal — equal on all sides, no offset. */ --sh-modal: 0 0 7px rgba(237, 136, 14, .11), 0 0 16px rgba(237, 136, 14, .09), 0 0 28px rgba(15, 32, 48, .15), 0 0 50px rgba(15, 32, 48, .11); --modal-backdrop: rgba(15, 32, 48, .45); /* no blur */ --focus-ring: 0 0 0 3px rgba(0, 57, 81, .10); /* paired with a --teal border */ --sh-action-hover: 0 4px 10px rgba(20, 40, 60, .14); /* with translateY(-2px) */ /* Weight of the uppercase 12px table head. Ch.1 says 600, but the app's stack ('Helvetica Neue', Helvetica, Arial) resolves to Arial on Windows, which ships Regular and Bold and nothing between: a 600 is browser-synthesized and reads as a different, smeared face at that size. 700 is the weight the design actually gets. Settled 2026-09-04. */ --fw-head: 700; }