/* SBT Portal — design tokens, and the `osnovna` palette. * * Authoritative source: docs/DESIGN-CONTRACT.md. Derived from the * client-approved vzorec C, with three WCAG 2.2 AA corrections applied. * Every ratio in the comments is computed, not estimated. * * NEVER hard-code a colour anywhere else in this theme or in any template. * * --------------------------------------------------------------------------- * THIS FILE IS ALSO A PALETTE * * The colour block below is the palette the portal ships with, named * `osnovna`. An alternative palette is one file in assets/palette/ that * redeclares the SAME token names with different values, loaded straight after * this one — see inc/paleta.php. Nothing else in the theme changes, because * nothing else in the theme knows a colour by anything but its token name. * * Two consequences worth stating plainly: * * 1. With `osnovna` selected no palette file is loaded at all. On the day the * mechanism was switched on that made the change a provable no-op rather * than a promised one, and the proof is tools/dokaz-brez-spremembe.mjs. * * Written in the present tense until 19. 9. 2026, this said the bytes the * browser receives ARE the bytes it received before the palette layer * existed. That stopped being true the same evening, when `osnovna` gained * --control-edge and its own emergency token and the booking button gained * a ring; it is further from true now that --nav-current and --notice have * moved. `osnovna` is a palette like the other five and is corrected like * them. What remains true is the sentence above it: selecting it loads no * second file. * 2. Every colour token here must also be declared by every alternative * palette. tools/kontrast.php holds the required list and reports a * palette that leaves one inherited from this file by accident — a green * palette that forgets --band-ink-accent keeps a tint mixed for teal. * * The ratios written beside the colours below are the ones this palette was * designed to. They are no longer maintained by hand: tools/kontrast.php * re-measures every pair for every palette and tools/gates.sh fails the build * if one drops below WCAG 2.2 AA. */ /* --------------------------------------------------------------------------- * WHAT A COLOUR MEANS ON THIS PORTAL * * Written 19. 9. 2026, closing finding A3 of docs/PREGLED-UX-19-09.md. Before * it, one green under `jezero` (#13823d) was the booking button, the booking * card in the hero AND the marker on an obvestilo; a second green (#15cf62) * was the current item in the menu; and a third green already meant "odprto" * in every clinic's open/shut chip. Five jobs, one colour: four of them the * reader had to guess. "Obvestilo velja" read as "this is fine", and the most * important action on the site read as a status. * * The rule is one sentence: A COLOUR ANSWERS EXACTLY ONE QUESTION, and the * question is the name of its token family. Five questions, five families: * * GO HERE --accent · --accent-hover · --control-edge * The one thing on the screen the reader is meant to act on: the booking * button in the masthead, the booking card in the hero, the destination * pin on the floor plan. Only ever a FILL, or the ring that gives a fill * its shape. Never a label, never a rule beside something inert, never a * statement about what anything IS. * * YOU ARE HERE --nav-current * Position, not action. Drawn from the band's own ink — see the token. * * WHAT IS TRUE NOW --okay-* (odprto) · --warn-* (zaprto) * The one fact on this portal that changes by the hour. Green is OPEN, * and on this portal nothing else may be green; amber is CLOSED. The word * is always printed too, so colour is never the only carrier (1.4.1). * * WHAT CHANGED --notice · --notice-ink * An obvestilo: an operational change. Not a state, not an action. The * amber END of the state family — see the token. * * EMERGENCY --danger · --danger-hover · --danger-ink * --sos · --sos-hover · --sos-ink (the 112 tile) * --band-ink-accent (was the 112 number; not drawn since * 1. 10. 2026, kept because every palette carries it) * The route to urgent care, and nothing else, ever. Warm under every * palette: the one family that refuses to follow the colour scheme. * * Everything outside those five is the portal's own voice and says nothing * about state: --teal* (links, headings, ordinary controls), --band* * (surfaces), --ink / --muted, --line*, --paper / --card / --tint*. * * Two deliberate exemptions, written down so that the next person does not * "fix" them into the system and break something: * * * The focus ring — --teal on a light surface, --band-ink on a band, and * --accent inside the accessibility panel, where a teal ring would stand * on a teal fill — indicates the KEYBOARD's position. It is transient, it * follows the Tab key, it is gone the moment the reader stops, and it * never coexists with a reading of state. * * --warn-line / --okay-line are decorative hairlines around chips whose * state is carried by their word. See the closing note of sbtn_k_pairs(). * * The system is enforced rather than merely described. Every pair a family * introduces is in the table in inc/kontrast-lib.php, tools/gates.sh fails the * build if one drops below WCAG 2.2 AA under ANY palette, and sbtn_k_derive() * builds the same five families for a palette the hospital invents in wp-admin * on a server this file will never run on. * ------------------------------------------------------------------------ */ :root{ /* ---- brand, as INK ------------------------------------------------ Links, headings, the glyph inside a tinted icon tile, and the fill of every small control that stands on a light surface — the search button, the current page in the pager, the numbered markers on the route. All three are held to 4.5:1 as TEXT against --card, --paper and --tint, which settles a second question for free: contrast is symmetric, so a colour that carries 4.5 as text on white also carries white text at 4.5 when it becomes a fill. That is why --on-brand below can be white on every palette without anybody having to promise it will be. */ --teal: #0e5a63; /* white on it 7.89 ✅ AA */ --teal-deep: #0a434a; /* white on it 10.97 ✅ AA */ --teal-bright: #1a8091; /* white on it 4.63 ✅ AA */ /* What is printed on a --teal / --teal-deep / --accent fill, and over the hero scrim. White on every palette this theme ships, for the reason above — but its own token, because "the card surface" and "the thing printed on a brand fill" are two different decisions that happened to share a value, and --card was doing both jobs until 17. 9. 2026. */ --on-brand: #ffffff; /* ---- accent: GO HERE ----------------------------------------------- The primary call to action — the booking button, and the only fill on this portal that is allowed to shout. Since 19. 9. 2026 it is that and nothing else: the marker on an obvestilo used to wear it too, which made the action colour double as a claim about what a card IS. That marker is --notice now. The token used to be called --coral, which was a description of the value the base palette happens to hold and not of the job the token does: under `jezero` the same token holds GREEN, and a file that calls green "coral" is a file that has stopped being readable. Renamed 19. 9. 2026. The theme.json palette SLUG is still `coral`, and must stay: an editor who painted a paragraph with it stored the string `coral` in the post, and renaming the slug orphans that colour in every published record. CORRECTED from the sample's #e2643c, where white text measured 3.43 and failed 1.4.3. This is the primary booking CTA — the single most important control on a hospital site. #bf4d2a reaches 4.87. The sample's own darker #c9542f is also insufficient at 4.38. */ --accent: #bf4d2a; /* white on it 4.87 ✅ AA */ --accent-hover: #a83f20; /* white on it 6.18 ✅ AA */ /* The BOUNDARY an accent-filled control needs where its fill cannot clear 1.4.11's 3:1 against what is behind it. This is the token that answers the defect found on the live site on 19. 9. 2026: --accent on --band-deep measured 1.53 under `jezero`, so the booking button in the masthead was legible (white text, 4.90) and yet had no visible SHAPE — the most important control on a hospital site dissolved into its own header. The same thing happens over the hero photograph on EVERY palette, where the accent card measures 1.11–1.44 against the scrim at its lightest. A ring, not a different accent: white text on the accent already pins the accent to a maximum luminance, and 3:1 against the band demands a minimum luminance far above it. No single colour can do both. The boundary can, and it costs no layout — it is drawn with an inset box-shadow. White on every palette, and its own token rather than --on-brand, because "what is printed ON a fill" and "the line drawn AROUND it" are two decisions that happen to share a value. tools/kontrast.php measures it against every fill it bounds and every surface it stands on. */ --control-edge: #ffffff; /* ---- danger: the emergency route ---------------------------------- "Nujna pomoč" in the top bar. Its own token, fixed per band brightness and WARM under every palette, exactly the way assets/dostopnost.css holds fixed values for the high-contrast mode. Before 19. 9. 2026 this pill wore --accent. Under `jezero` that is GREEN, and green on this very portal means *odprto* — the state chip beside every clinic's opening hours. The emergency link was therefore painted in the one colour that says "everything is fine", and it measured 1.53 against the band it sits on, so it had no shape either. Emergency is the one thing on this portal that does not follow a colour scheme; the 112 number (--band-ink-accent) has always been treated that way and now the pill is too. On a DARK band the pill is a light warm chip with deep red-brown type: a red fill cannot reach 3:1 against a dark band while still carrying legible text, and a light warm chip reaches 4.85–7.08. On a LIGHT band a palette overrides these three with the inverse — deep red with white type — for the same reason --band-ink flips. Warm in both directions. */ --danger: #ffc3a1; /* on --band-deep 7.08 ✅ 1.4.11 */ --danger-hover: #ffab83; --danger-ink: #7a1e0c; /* on --danger 6.72 ✅ AA */ /* ---- sos: the 112 tile --------------------------------------------- A RED box with WHITE type, on every palette — the hospital asked for 112 to read as red (1. 10. 2026). Fixed, like --danger is warm everywhere, but unlike --danger it does not flip with the band: on a dark band no red can stand off the band at 3:1, so the tile carries the same 2px --control-edge ring as the booking CTA (1.4.11), and the red itself only has to carry white type. White on --sos 6.04, on --sos-hover 8.03. */ --sos: #c4122f; --sos-hover: #a10f27; --sos-ink: #ffffff; /* ---- nav-current: YOU ARE HERE ------------------------------------- The 3px bar under the current item in the masthead navigation. Position is neither an action nor a status, so it is neither the accent nor a state colour. Until 19. 9. 2026 it WAS the accent's own value here, and a louder relative of it on four of the five alternative palettes — on `jezero` a #15cf62 green, the fifth green on a portal where green already meant "odprto". It is the band's own ink now: white on a dark band, near-black on a light one, under every palette. Three things follow, and the third is why it is written this way rather than picked per palette: * it cannot be mistaken for the booking button, because the booking button is never the colour of the type around it; * it cannot be mistaken for a state chip, because it is a 3px rule and not a fill; * it clears 1.4.11's 3:1 against the band under EVERY palette without anyone checking, including a palette the hospital invents for itself, because --band-ink is already held to 4.5 against that same band. This pair measured 2.25 on `osnovna` and was carried as a named waiver in inc/kontrast-lib.php for three days. That waiver is deleted: the pair is 10.96 here and 7.51-12.03 on the other five. Still its own token rather than var(--band-ink), so that a palette may move it and so that tools/kontrast.php measures the bar as a bar (3:1) and not as type (4.5). */ --nav-current: #ffffff; /* ---- the band, as a SURFACE --------------------------------------- The header, the emergency strip, the footer, the heritage strip and the ground behind the hero photograph. On this palette they are the same two values as --teal-deep and --teal, which is why nothing renders differently for the split — but they are NOT the same decision, and until 17. 9. 2026 the theme could not say so. The old arrangement wrote `background:var(--teal-deep); color:var(--card)`. That is a perfectly good description of a dark band, and it is the reason a LIGHT band was impossible: --teal-deep also has to clear 4.5:1 as link text on white, so it can never be light; and --card also has to be the surface of every card, so it can never be dark. One token cannot be a pale header AND a legible link, and one token cannot be a white card AND the dark type printed on a pale header. Splitting them is what makes "light blue, more lively, a place of hope" expressible at all. --band* may go as light as it likes; --band-ink and its three quieter tiers follow it, and tools/kontrast.php measures each of them against the surface it actually lands on. */ --band: #0e5a63; --band-deep: #0a434a; /* Every translucent overlay ON a band: the rule under the top strip, the nav item's hover, the circle behind the emergency icon, the box the 112 number sits in. Channels rather than a colour, because they are used inside rgb()/alpha at six different strengths. They were six literal `rgb(255 255 255 / .n)` declarations in components.css. That is correct, and invisibly so, only while the band is dark; on a pale band a white veil is nothing at all. A palette with a light band sets this to its own darkest shade instead and the same six declarations keep working. */ --band-veil: 255 255 255; /* The hairline a LIGHT band needs under it and nothing else does. A dark band separates itself from the paper; a pale one dissolves into it, and the sticky header in particular stops having an edge as you scroll. Fully transparent here, so this palette draws nothing — written as an eight-digit hex rather than as `transparent` so that tools/kontrast.php can see the token is declared at all. */ --band-edge: #00000000; /* How the masthead mark is recoloured for the band it sits on. The logo file is a dark PNG; on a dark band it is knocked out to white, on a pale one it is printed solid. It was `brightness(0) invert(1)` written twice in components.css, which is a colour decision in everything but syntax. */ --logo-filter: brightness(0) invert(1); /* ---- surfaces ---------------------------------------------------- */ --paper: #f7f5f1; --card: #ffffff; --tint: #e7f0f0; --tint2: #d9e8e8; /* ---- text -------------------------------------------------------- */ --ink: #14211f; /* on paper 15.22 · on card 16.57 ✅ */ --muted: #5c6b68; /* on paper 5.13 · on card 5.59 ✅ */ /* ---- text ON the band --------------------------------------------- Four tiers, loudest first. They used to be called --on-dark, --on-dark-muted, --coral-light — names that described the palette the portal happened to be wearing rather than the job the token does, and names that would have been actively misleading the moment a palette put a dark value in --on-dark. They are named for the SURFACE now, because the surface is the thing that can move. --band-ink is the fourth of them and is new: it is the colour that was being fetched from --card, that is to say "white, via the token that means the card surface". On this palette it is still white and nothing renders differently. From the approved sample, all measured against --band-deep: --band-ink 10.97 ✅ headings and links on the band --band-ink-soft 8.03 ✅ body text on the band --band-ink-muted 5.81 ✅ kickers, captions, footer headings --band-ink-accent 4.97 ✅ the 112 number inside its box The sample also used #8b9793 for photo captions on WHITE — that is 3.02 and fails, so those use --muted (5.59) instead. */ --band-ink: #ffffff; --band-ink-soft: #cfe0df; --band-ink-muted: #9ec4c2; --band-ink-accent: #ffb9a0; /* The heritage band sits on --band, a shade lighter than the footer, and a token is only accessible against the surface it was checked on: --band-ink-muted reaches 5.81 on --band-deep but only 4.18 there, below AA. It used to be redefined inline on .herit, which meant the accessibility panel's contrast mode — which overrides --band-ink-muted at the root — could not reach into that band and the one reader who asked for more contrast got less. It is a token of its own now, so the contrast mode lifts it with the rest. */ --band-ink-lift: #b9d6d4; /* on --band 5.12 ✅ */ /* ---- state --------------------------------------------------------- Open or shut is the one fact on this portal that changes by the hour, so it is the one allowed its own colour — and the word always says it too, never colour alone (1.4.1). Amber rather than red for "shut": red on a hospital page is the emergency route, and a closed clinic is not that. These were the two real hard-coded colours left in components.css after the token layer was built. */ --warn-bg: #fdf3e7; --warn-line: #f0d9b8; /* on card 1.52 — see note below */ --warn-ink: #7a4a12; /* on --warn-bg 7.03 ✅ */ --okay-bg: #e6f3ec; --okay-line: #b9ddc8; --okay-ink: #14562f; /* on --okay-bg 7.72 ✅ */ /* ---- what changed: the obvestilo marker ------------------------------ The 4px rule down the side of a notice card and the kind label above it — .news-item.is-notice, .aktu-lead.is-notice, .aktu-kind.is-notice. It wore --accent until 19. 9. 2026, and two things were wrong with that at once. The colour that means "act on this" was being used to say what a card IS; and under `jezero` the accent is GREEN, so a notice that a clinic is SHUT for a fortnight was painted in the colour the chip on that same clinic's page uses for "odprto". Amber, and deliberately the same family as "zaprto", because an obvestilo on this portal is in practice always an operational change — a clinic closed, a schedule moved, an absence. Amber already means "not running normally" here. That adjacency is the argument FOR it, not against: green told the reader the opposite of the truth, amber tells them a quieter version of it. The same value under all six palettes, exactly like --warn-* and --okay-*: meaning does not follow decoration. Its own two tokens rather than --warn-ink, because the chip's ink is guaranteed against --warn-bg while these are guaranteed against --card and --paper — two different promises that one colour happens to keep. */ --notice: #b8700a; /* on card 3.91 · on paper 3.59 ✅ 1.4.11 */ --notice-ink: #7a4a12; /* on card 7.45 · on paper 6.84 ✅ AA */ /* The tinted row a table gives the pointer. Not a state and not meaningful — text on it still has to clear AA, which is why it is measured rather than eyeballed. */ --row-hover: #fbfaf7; /* ---- scrims and shadows -------------------------------------------- Channel triples, not colours, because they are used inside rgb()/N with an alpha. They were three hard-coded rgb() values in components.css and dostopnost.css — invisible to a search for `#`, and the hero scrim in particular would have left the homepage's largest single area of colour behind on a palette switch. --scrim-a and --scrim-b differ by two or three counts per channel. That is the approved sample's own gradient, kept exactly rather than averaged, so the base palette renders to the same pixels it did before these tokens existed. */ --scrim-a: 10 52 58; /* hero scrim, top and bottom stops */ --scrim-b: 11 49 54; /* hero scrim, middle stop */ --scrim-panel: 10 34 32; /* behind the accessibility drawer */ --shade-rgb: 10 67 74; /* the drop shadow under the mega menu */ /* ---- lines -------------------------------------------------------- SPLIT from the sample's single --line. #dbe4e2 on white is 1.30 — fine as a decorative hairline, fails 1.4.11 (needs 3:1) the moment it bounds a control. This is the identical defect the audit found in the old theme (1.27 / 1.52); we are not shipping it twice. */ --line: #dbe4e2; /* decorative hairlines ONLY */ --line-strong: #7d918d; /* on white 3.33 · on paper 3.06 ✅ MANDATORY on input, select, textarea, checkbox, radio, secondary button */ /* ---- type -------------------------------------------------------- */ --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem); --step-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem); --step-1: clamp(1.20rem, 1.13rem + 0.35vw, 1.40rem); --step-2: clamp(1.44rem, 1.33rem + 0.57vw, 1.78rem); --step-3: clamp(1.73rem, 1.55rem + 0.90vw, 2.26rem); --step-4: clamp(2.07rem, 1.80rem + 1.38vw, 2.87rem); --step-5: clamp(2.49rem, 2.07rem + 2.08vw, 3.65rem); /* ---- space, radius, chrome --------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --r: 14px; /* 1140 is the sample's container, not a round number chosen here: at 1440 it puts the four task cards at the width the comp draws them. 1200 made every card 15px wider and the whole page read looser than the approved design. Padding is 20px, also the sample's. */ --wrap: 1140px; /* Sticky header height. Every anchor target must carry scroll-margin-top of at least this, or it lands underneath the header — WCAG 2.4.11, which the old theme fails with exactly one scroll-margin-top in the entire codebase. */ --header-h: 78px; }