/* ========================================================================== Edilis — design tokens (the authoritative source of the values) -------------------------------------------------------------------------- Home of the fact: never copy these values anywhere else. The description and the usage rules are in docs/design-system.md; the visual verification in docs/design/prototypes/. Bringing them into the application (src/web/static/) is BL-12 — which adopts this file rather than rewriting it. Themes: light is the default; dark through prefers-color-scheme as well as an explicit [data-theme], so that the user's toggle beats the system choice in both directions. The palette comes from the Edilis identity — a slate roof, the patina of copper and brass fittings (docs/decisions/vizualna-identita-edilis.md). The identity did not measure its own values and says so; where measurement and the brand book disagree, MEASUREMENT WINS and the difference is written down at the token. Three shades moved (BL-198): verdigris #2F7D6E measures 4.4981 on paper — BELOW the 4.5 threshold, not at it. Two decimal places round it to 4.50 and make it read as "exactly on the line"; `assert ratio >= 4.5` disagrees. --accent is the measured variant; the brand value survives untouched in the mark, where 1.4.11 asks 3:1, not 4.5:1. mortar #8D989C is 2.7097 on paper. The identity gives it the role of secondary text; in the light theme it cannot carry it, so --ink-muted is the measured variant. In the DARK theme mortar holds 4.81 and is used unchanged. brass #C08A2E is 2.7833 on paper — it does not even carry a component boundary. --keystone is the measured variant. The identity's own dark pair (verdigris-lt on slate-2) measures 4.45 and is below the threshold as well; the dark theme is derived here, not inverted. ========================================================================== */ :root { /* --- Neutrals: the identity's paper (#F6F5F1), and the planes below it derived from it by lightness so the whole family keeps the same warm cast. --ink-muted and --border-strong carry a measured WCAG threshold (BL-59, re-measured over the new paper in BL-198) — do not lighten them without re-measuring, see design-system.md §6. */ --bg: #F6F5F1; --surface: #FFFFFF; --surface-2: #EDEBE3; --surface-3: #E4E2D7; --border: #DAD6C8; --border-strong: #7C898E; /* --- Ink: the identity's slate, and below it the two shades the identity uses for running and tertiary text in its own document. */ --ink: #16202B; --ink-soft: #41505C; --ink-muted: #616C70; /* --- Brand: the patina of copper. Deliberately elsewhere than the competitor's indigo, and — per the identity — away from corporate blue altogether. --accent is 0.04 above AA on --surface-2, so it is a floor, not a choice. */ --accent: #2D7668; --accent-strong: #235C51; --accent-ink: #2B7365; --accent-soft: #E2E9E4; /* --- The keystone: brass. NOT an accent and NOT a state — it is the single emphasis of a screen, the one element that locks the rest in place. Its rules live in design-system.md §1; the short form is: at most one per screen, never an area, never a border, never a focus ring, never text. It is the fill of the mark's keystone (--m-key derives from it) and of one deliberate emphasis besides. The value is measured to 3:1 against every plane, because a graphic that carries meaning is governed by WCAG 1.4.11 even when it carries no letters. */ --keystone: #A77828; /* --- Semantic states: separate from the accent, they carry meaning, not decoration. ok = done · warn = in progress / caution · bad = blocks submission · info = derived by the system The light --ok and --warn are measured against their own -soft plane (BL-61) — .pill is 11.5px bold, so AA asks 4.5:1, not the large-text 3:1. Do not lighten them without re-measuring, see design-system.md §6. --warn was moved off the brass hue in BL-198 (38° → 31°). The identity's brick #B0453A became --bad; brass is --keystone; an amber warn sitting between them would have read as a third brand colour rather than as a state, and the rule of §1.1 would have been true only on paper. */ --ok: #2C7341; --ok-soft: #DEE6DC; --warn: #945615; --warn-soft: #EBE2D7; --bad: #AC4339; --bad-soft: #EEE0DB; --info: #3E5C8A; --info-soft: #E0E3E5; /* --- Chart ink: the guide lines of a graph, derived from the neutrals and deliberately **not** from the state scale (design-system.md §4.4). A grid line carrying a hue reads as data. The axis is the darker of the two, because it is the one a value is read against; the grid stays behind it. Neither is a component boundary under WCAG 1.4.11 — the plotted mark is (and the plotted mark is --accent) — so they are not asserted for contrast. */ --chart-grid: #E4E2D7; --chart-axis: #7C898E; /* --- Shadows */ --shadow: 0 1px 2px rgba(22,32,43,.05), 0 8px 24px -14px rgba(22,32,43,.22); --shadow-lg: 0 1px 2px rgba(22,32,43,.06), 0 24px 48px -22px rgba(22,32,43,.32); /* --- Scrim behind a modal dialog. The light theme dims with the interface ink, so the scrim belongs to the same family as the shadows, not to pure black. */ --overlay: rgba(22,32,43,.45); /* --- Radii */ --r-sm: 7px; --r: 10px; --r-lg: 16px; /* --- Layout: the height of a control, and the header height that follows from it. --h-control is what a .btn actually measures: a 21.7px line box plus 2 × --s-2 of padding plus its 1px border, rounded to the 4px grid. The stylesheet asserts it as a min-height, so the number is true by construction rather than by coincidence. --h-header is DERIVED, never copied: one control plus 2 × --s-3 of the header's own padding plus its 1px bottom rule. Every sticky element offsets from it (design-system.md §5). It was written as a flat 57px until BL-66, derived from a 32px control that never existed — .btn's min-height floor never binds — so the sidebar stuck 8px above where the header ends and the content slid underneath. */ --h-control: 40px; --h-header: calc(var(--h-control) + 2 * var(--s-3) + 1px); /* --- Measures. --w-content is the upper bound of the content column: the shell stated `208px minmax(0, 1fr)` and nothing more, so on an ultra-wide display a four-field panel grew past 3000px and the form was read across the whole desk (design-system.md §5.2). It is wider than the content column of a 1440px viewport, so nothing that fits today starts to scroll — the bound first bites above ~2000px. It is a MEASURE, not the dimension of one component like the 208px sidebar, hence a token. THE NUMBER IS MEASURED, NOT CHOSEN. It is the widest table of the application — the seven columns of the Účely obnovy step — plus everything standing beside it, and §5.2 carries the measurement column by column. The value it started at, 82rem, was picked against an estimate of "about 1000px" that had aged: the real table wants 1118px and was scrolling inside its own frame on a desk with room to spare (#215). The --w-field-* set is the width counterpart of --h-control: the height of a field is enforced, its width was not enforced at all, so a two-digit input measured as much as a 120-character name (§1.4, §4.3 Velikost pole). In rem, because what a field holds is a measure of text and grows with it. */ --w-content: 112rem; --w-field-number: 7rem; --w-field-amount: 11rem; --w-field-code: 14rem; /* --- Typefaces: the three of the identity — Spectral for headings, the logotype and print, Inter for the interface, JetBrains Mono for numbers (€, m², shares, annex codes). Hosted from the repository, never from a foreign server; the @font-face rules are in static/web/css/fonts.css and the files in static/web/fonts/. THE SYSTEM STACK STAYS BEHIND THEM, not instead of them: the faces load with `font-display: optional`, so a slow first visit renders in the fallback on purpose — and without a fallback that visit would land in Times. A prototype under docs/design/ links only this file, so it draws in the system stack as well, and that is correct: it is a reference for layout, not for the typesetting. */ --serif: "Spectral", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace; /* --- Letter-spacing of the identity. A number, not a habit: the logotype is set with the tracking the brand book gives it, and a component that writes `letter-spacing: .19em` by hand is the second home of that value. The two logotype values are the two versions of the logotype (§5 of the decision): Inter in the interface, Spectral for large settings and print. */ --ls-wordmark: .19em; --ls-wordmark-lg: .3em; --ls-eyebrow: .14em; --ls-label: .01em; /* --- Type scale (rem at a 14px interface base) */ --t-micro: 10.5px; /* eyebrow labels, legends */ --t-xs: 11.5px; /* metadata, hints */ --t-sm: 12.5px; /* secondary text, field labels */ --t-base: 14px; /* ordinary interface text */ --t-md: 15px; /* section heading */ --t-lg: 23px; /* screen heading */ --t-xl: 26px; /* overview heading */ /* --- Spacing (4px step) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; } /* --- A coarse pointer needs a bigger control than a mouse does. This is an INPUT condition, not a width one: a touchscreen laptop is wide and still fingered, a phone with a stylus is narrow and precise. Because --h-header is derived from --h-control, the header and every sticky offset grow with the control instead of drifting apart from it (design-system.md §6). */ @media (pointer: coarse) { :root { --h-control: 44px; } } /* --- Dark theme: the same care as the light one, not an inversion. The accent brightens to hold contrast on a dark background. */ @media (prefers-color-scheme: dark) { :root { --bg: #16202B; --surface: #1E2C3A; --surface-2: #2A3644; --surface-3: #334152; --border: #33404E; --border-strong: #8D989C; --ink: #E7E4DB; --ink-soft: #ADB6B8; --ink-muted: #8D989C; --accent: #50AC99; --accent-strong: #6BBAAA; --accent-ink: #4DA593; --accent-soft: #1D3239; --keystone: #D9A544; --ok: #54B06D; --ok-soft: #203736; --warn: #DFA05F; --warn-soft: #363433; --bad: #E27265; --bad-soft: #2E2A32; --info: #7FA0D6; --info-soft: #273446; --chart-grid: #334152; --chart-axis: #8D989C; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -16px rgba(0,0,0,.7); --shadow-lg: 0 1px 2px rgba(0,0,0,.5), 0 30px 60px -24px rgba(0,0,0,.8); /* The dark surfaces sit close to the page, so the scrim goes to plain black and denser — the light recipe would leave the dialog floating in a haze. */ --overlay: rgba(0,0,0,.62); } } /* The user's explicit choice beats the system — in both directions. */ :root[data-theme="dark"] { --bg:#16202B; --surface:#1E2C3A; --surface-2:#2A3644; --surface-3:#334152; --border:#33404E; --border-strong:#8D989C; --ink:#E7E4DB; --ink-soft:#ADB6B8; --ink-muted:#8D989C; --accent:#50AC99; --accent-strong:#6BBAAA; --accent-ink:#4DA593; --accent-soft:#1D3239; --keystone:#D9A544; --ok:#54B06D; --ok-soft:#203736; --warn:#DFA05F; --warn-soft:#363433; --bad:#E27265; --bad-soft:#2E2A32; --info:#7FA0D6; --info-soft:#273446; --chart-grid:#334152; --chart-axis:#8D989C; --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -16px rgba(0,0,0,.7); --shadow-lg:0 1px 2px rgba(0,0,0,.5), 0 30px 60px -24px rgba(0,0,0,.8); --overlay: rgba(0,0,0,.62); } :root[data-theme="light"] { --bg:#F6F5F1; --surface:#FFFFFF; --surface-2:#EDEBE3; --surface-3:#E4E2D7; --border:#DAD6C8; --border-strong:#7C898E; --ink:#16202B; --ink-soft:#41505C; --ink-muted:#616C70; --accent:#2D7668; --accent-strong:#235C51; --accent-ink:#2B7365; --accent-soft:#E2E9E4; --keystone:#A77828; --ok:#2C7341; --ok-soft:#DEE6DC; --warn:#945615; --warn-soft:#EBE2D7; --bad:#AC4339; --bad-soft:#EEE0DB; --info:#3E5C8A; --info-soft:#E0E3E5; --chart-grid:#E4E2D7; --chart-axis:#7C898E; --shadow:0 1px 2px rgba(22,32,43,.05), 0 8px 24px -14px rgba(22,32,43,.22); --shadow-lg:0 1px 2px rgba(22,32,43,.06), 0 24px 48px -22px rgba(22,32,43,.32); --overlay: rgba(22,32,43,.45); }