/* * Design tokens - the single place a colour, radius, shadow or type size is * written down, plus the @font-face rules that make the typefaces available. * * TRANSFERRED, NOT INVENTED. The values come out of the design system project * "Atnaujink šypseną Design System" (c14a4896-2ced-4955-a9d3-f7b9238e7ff9), * files tokens/fonts.css, tokens/colors.css, tokens/typography.css and * tokens/layout.css, copied exactly - including the comments that explain WHY a * colour is what it is, because a measured contrast ratio is the reason a token * exists and losing it turns the palette back into taste * (docs/wp-implementacijos-planas.md section 1.3). * * The section order mirrors the design system's own styles.css: fonts, colours, * typography, layout. Nothing else in the theme may hold a raw colour - * qa-grep.sh treats a bare hex outside this file as a finding, and this file is * the one exemption. * * ONE DELIBERATE DEVIATION, --container. The design system still carries * `--container: 1200px`, but 1100 px is the canon: the 2026-08-13 audit found * the home page's sections at 1200 while every header and footer was at 1100, * which left the logo and the booking button visibly inset. The decision to * standardise on 1100 is recorded in docs/sprendimu-zurnalas.md and became * invariant I11; the ten sections were rebuilt at 1100 and MEASURED at 1100 in * the current mockups. The design system's layout.css simply never caught up. * Following it here would reintroduce the exact defect the invariant exists to * prevent, and qa-measure.mjs would report it as I11.2 on every page. * * SELF HOSTED, NO CDN. Every face below is served from this theme. A request to * fonts.googleapis.com or fonts.gstatic.com is a finding (qa-console.mjs, C3): * it costs a third-party connection on the critical path and it hands a * visitor's IP address to another company without a legal basis for it. * Licences travel with the files in assets/fonts/ - the SIL Open Font License * requires that, and it is a condition of use rather than paperwork. */ /* --------------------------------------------------------------------------- * Fonts * * Alegreya Sans is the single brand typeface (400/500/700/800 plus italic * 400/500). Caveat 600 is the handwritten accent. The weights are STATIC * instances rather than one variable file on purpose: the mockups paint some * elements at font-weight 600, which Alegreya Sans has no static instance for, * so the browser rounds them up to 700. A variable file would render a true 600 * there and quietly differ from the design that was approved. * * Two files per face, split by unicode-range exactly the way Google Fonts splits * them: latin covers ASCII plus the euro sign and the low-high quotation marks, * latin-ext carries the accented letters (ogonek, caron, macron and dot above - * U+0104 to U+017E). Both are needed to set a Lithuanian page, and the split * means a paragraph of plain ASCII never downloads the second file. * * Not covered by either subset, in Alegreya Sans as Google ships it: the star * glyph the review cards use and the arrow in "learn more" links. They fall * back to the system font - which is what the mockups already do, since they * load the same subsets from the CDN. * * A third file per face since WPS-080: the cyrillic subset, for the Russian * pages WPML serves under /ru/. Its unicode-range is the one Google Fonts * ships (U+0400-045F plus the Ukrainian and Kazakh extras), so a Lithuanian or * English page never downloads it - only a page that actually paints Cyrillic * does. The Greek subset stays out: no language on this site sets Greek. */ /* * Metric-matched fallback (WPS-062, closes AS-119). Until Alegreya Sans arrives * the text is drawn in the visitor's Arial scaled to Alegreya's width and line * box, so the swap no longer reflows the hero: measured on dev 2026-09-27, the * front page's hero shifted by 0.078 CLS at the font swap. * * Numbers from the font files themselves (fontTools): Alegreya Sans averages * 0.496 em per latin letter at 400 and 0.521 at 800, Arial 0.578 and Arial Bold * 0.607, so both weights need 85.8 %. Alegreya's hhea ascent/descent are * 900/300 per 1000; divided by the size adjustment they become the overrides. */ @font-face { font-family: 'Alegreya Sans Fallback'; font-weight: 100 600; src: local( 'Arial' ), local( 'ArialMT' ), local( 'Helvetica' ), local( 'Roboto' ); size-adjust: 85.8%; ascent-override: 104.9%; descent-override: 35%; line-gap-override: 0%; } @font-face { font-family: 'Alegreya Sans Fallback'; font-weight: 700 900; src: local( 'Arial Bold' ), local( 'Arial-BoldMT' ), local( 'Helvetica Bold' ), local( 'Roboto Bold' ); size-adjust: 85.8%; ascent-override: 104.9%; descent-override: 35%; line-gap-override: 0%; } @font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url( '../fonts/alegreya-sans-400-latin.woff2' ) format( 'woff2' ); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url( '../fonts/alegreya-sans-400-latin-ext.woff2' ) format( 'woff2' ); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url( '../fonts/alegreya-sans-400-cyrillic.woff2' ) format( 'woff2' ); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url( '../fonts/alegreya-sans-500-latin.woff2' ) format( 'woff2' ); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url( '../fonts/alegreya-sans-500-latin-ext.woff2' ) format( 'woff2' ); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url( '../fonts/alegreya-sans-500-cyrillic.woff2' ) format( 'woff2' ); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url( '../fonts/alegreya-sans-700-latin.woff2' ) format( 'woff2' ); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url( '../fonts/alegreya-sans-700-latin-ext.woff2' ) format( 'woff2' ); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url( '../fonts/alegreya-sans-700-cyrillic.woff2' ) format( 'woff2' ); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url( '../fonts/alegreya-sans-800-latin.woff2' ) format( 'woff2' ); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url( '../fonts/alegreya-sans-800-latin-ext.woff2' ) format( 'woff2' ); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url( '../fonts/alegreya-sans-800-cyrillic.woff2' ) format( 'woff2' ); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Alegreya Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url( '../fonts/alegreya-sans-400-italic-latin.woff2' ) format( 'woff2' ); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Alegreya Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url( '../fonts/alegreya-sans-400-italic-latin-ext.woff2' ) format( 'woff2' ); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Alegreya Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url( '../fonts/alegreya-sans-400-italic-cyrillic.woff2' ) format( 'woff2' ); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Alegreya Sans'; font-style: italic; font-weight: 500; font-display: swap; src: url( '../fonts/alegreya-sans-500-italic-latin.woff2' ) format( 'woff2' ); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Alegreya Sans'; font-style: italic; font-weight: 500; font-display: swap; src: url( '../fonts/alegreya-sans-500-italic-latin-ext.woff2' ) format( 'woff2' ); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Alegreya Sans'; font-style: italic; font-weight: 500; font-display: swap; src: url( '../fonts/alegreya-sans-500-italic-cyrillic.woff2' ) format( 'woff2' ); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url( '../fonts/caveat-600-latin.woff2' ) format( 'woff2' ); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url( '../fonts/caveat-600-latin-ext.woff2' ) format( 'woff2' ); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url( '../fonts/caveat-600-cyrillic.woff2' ) format( 'woff2' ); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* * Material Symbols Outlined - the one icon set (design canon: weight 300-400, * FILL 0). A variable file, but not the whole one: WPS-015 cut it to the seventy * glyphs the fourteen mockups actually use, 2.3 MB down to 47 KB. * * The list and the regeneration live in scripts/build-icon-font.mjs. Adding an * icon to a template therefore means adding it there and rerunning the script - * an icon outside the subset renders as its own name in letters, which * qa-tokens.mjs reports as T6 rather than leaving it to be noticed on a live * page. * * font-display is `block` rather than the `swap` the text faces use, and the * difference is not a slip. `swap` paints the fallback first, and the fallback * for an icon font is the ligature NAME - a visitor would read the word * water_drop where an icon belongs. `block` shows nothing instead, and at 47 KB * from our own origin that pause is not something anybody will see. */ @font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 300 600; font-display: block; /* * THE ?v= IS NOT DECORATION - WITHOUT IT A NEW GLYPH NEVER REACHES ANYONE * WHO HAS BEEN HERE BEFORE. The stylesheet is versioned by * sypsena_asset_version(), but the font URL inside it was not, so a browser * holding yesterday's woff2 kept using it however often the CSS changed. * Measured on dev during WPS-110: the rebuilt font was on the host and * `person` still resolved while the newly added `visibility` rendered as the * literal word - the old file, served from cache. * * scripts/build-icon-font.mjs stamps the hash here every time it writes the * font, so the two cannot drift; a hand edit to this line would be undone by * the next rebuild, which is the point. */ src: url( '../fonts/material-symbols-outlined.woff2?v=e614b277' ) format( 'woff2' ); } :root { /* ------------------------------------------------------------------------- * Colours * * 2026-08-13 ACCESSIBILITY PASS (WCAG 2.1 AA, measured): the brand accent * #0095e5 scores only 3.27:1 on white - fine for fills, borders and focus * rings (UI components need 3:1) but FAILING for text and for white text * sitting on top of it (needs 4.5:1). Text-carrying roles therefore use * darker derivatives. Ratios below are computed, not guessed. */ /* ---- Core ---- */ --color-bg: #f7f9ff; /* page + section background (cool near-white) */ --color-ink: #171c21; /* headings, dark buttons, primary text on light */ --color-accent: #0095e5; /* brand accent - FILLS, BORDERS, FOCUS RING ONLY (3.27:1) */ --color-accent-text: #006ba8; /* accent for TEXT: links, prices, eyebrows (5.72:1 on white) */ --color-accent-strong: #0077bd; /* accent FILL that carries white text (4.80:1) - button hover, active cells */ --color-accent-deep: #005587; /* accent for text on --tint-ice-deep - the promotion block's conditions line */ /* * The wordmark's second word and the cart count badge. Added to the design * system on 2026-08-21 (AS-88) and transferred here with it. * * TWO USES, and only two. As a LOGOTYPE it measures 4.27:1 against the * header fill, which WCAG 1.4.3 exempts ("text that is part of a logo or * brand name has no minimum contrast requirement") - but that exemption * covers the wordmark alone. As a FILL under white text it measures 4.83:1 * and passes normally, which is the badge. It is never a colour for running * text; the negative accent for that is --color-danger. */ --color-brand-red: #d92d20; /* ---- Text, neutrals ---- */ --color-text: #3f4851; /* body copy, paragraphs (9.30:1 on white) */ --color-text-muted: #5f6873; /* meta, labels, sub-text (5.65:1 white / 4.86:1 on footer fill) */ --color-text-subtle: #5f6873; /* fine print, copyright - merged with muted: the old #949494 scored 2.61:1 on the footer fill. Hierarchy now comes from size and weight, not from an inaccessible grey. */ --color-text-disabled: #bfc7d3; /* disabled/struck-through controls ONLY - WCAG exempts these */ /* ---- Surfaces and borders ---- */ --color-surface: #ffffff; /* cards, raised blocks */ --color-fill: #eaeef5; /* footer, segmented controls, chips */ --color-border: #e5e8ef; /* dividers, header bottom */ --color-border-strong: #d6dae1; /* outlined buttons */ --color-input: #dfe3ea; /* calendar, time cells */ /* ---- Secondary accents ---- */ --color-mint: #b2dfdb; /* signed Diana quotes only */ --color-mint-ink: #00695f; /* text on mint (4.54:1) */ --color-green: #c8e6c9; /* trust pills, accents */ --color-green-ink: #2e5d34; /* text on green (5.72:1) */ /* * A third outcome tone the palette had no name for: not the reassuring * green of "you can still wait", not the neutral blue of a routine visit, * and not --color-danger, which is drawn for actual mistakes and clashes * with this tier's own reassuring copy ("no shame, we start fresh"). Added * to the design system for WPS-019 and transferred here with it. */ --color-amber-ink: #a34e00; /* icon ink on --tint-amber (5.17:1) */ /* * 2026-09-01, AS-98 (measured, WCAG 2.1 AA). The original #f5b301 scored * only 1.9:1 on --color-surface/--color-bg - stars render as TEXT glyphs * (★), so the 4.5:1 normal-text floor applies, not the 3:1 non-text-UI * floor. #8a6500 keeps the same hue at a darker value: 5.33:1 on white, * 5.06:1 on canvas. No prior consumer in this theme (grep found none), so * the value change has no other blast radius. */ --color-gold: #8a6500; /* star ratings ONLY - never for badges, borders or icons */ /* One aria-hidden accent star in the approved hero link; never use for ratings or text. */ --color-review-spark: #f5b301; --color-danger: #c34a3a; /* "don't" examples, borders, negative accent */ --color-danger-bg: #fdecea; /* error banner background */ --color-danger-text: #b8412f; /* error TEXT on --color-danger-bg (4.79:1) */ /* ---- Third-party brand colours ---- * * Transferred like everything else in this file, but they were NAMED HERE FIRST * and only then written upstream: all fourteen mockups paint the Messenger entry * point in #0866ff by hand, and the design system had no token for it until * building the sticky bar forced the question (AS-89, closed 2026-08-21 - the * system now carries both values and the _ds snapshot has them). * * Meta owns these values. A Messenger button painted any other blue stops * reading as one, so they are not ours to adjust - the same reasoning that puts * the four brand marks in template-tags.php outside the one-icon-set rule. * * ONE ENTRY POINT: the round button in the mobile sticky bar and the wide button * its booking-page variant swaps in. White on the base measures 4.82:1 and * passes the 4.5:1 floor normally; the hover measures 6.59:1 - both measured by * qa-a11y.mjs on the built page, not only computed. Never a surface for our own * content. */ --color-brand-messenger: #0866ff; /* Messenger fill (white on it: 4.82:1) */ --color-brand-messenger-hover: #0653d3; /* Messenger fill, hover (white on it: 6.59:1) */ /* * The two review platforms' marks, named here for the same reason Messenger * was: the front page draws both logos inline, every mockup paints them by * hand, and the design system has no token for either. Named in the theme * first and registered as an open gap (dizaino-auditas.md), exactly the way * AS-89 was handled before it was carried upstream. * * NOT COLOURS, IDENTIFIERS. Google's glyph is four brand colours by * definition and Facebook's circle is one specific blue; repainting either * in our palette would make the mark stop reading as the platform it names. * They appear in exactly one place - the two source cards in the reviews * section - and never as a surface for our own content. */ --color-brand-google-blue: #4285f4; --color-brand-google-green: #34a853; --color-brand-google-yellow: #fbbc05; --color-brand-google-red: #ea4335; --color-brand-facebook: #1877f2; /* ---- Tints (approved page-level shades - the ONLY hexes allowed beyond the palette above) ---- Soft washes derived from the core palette. Pages may use these; anything not listed here or above is an audit finding (invariant I9). */ --tint-header: #edf1f9; /* sticky header background */ --tint-menu: #eef1f8; /* mobile burger menu sheet */ --tint-ice: #eaf5fc; /* accent-blue wash - GBT icon boxes */ --tint-ice-deep: #d1ecfa; /* deeper accent-blue wash - the promotion block, which has to read AS a promotion (--tint-ice is 0.00 CIEDE2000 away from seven existing surfaces) */ --tint-leaf: #e6f3e7; /* green wash - GBT icon boxes */ --tint-amber: #fdf1e3; /* warm wash - honesty-scale "worth not postponing" icon box (WPS-019) */ /* * The paper surface, named here first and only then written upstream - the * same path AS-89 (Messenger) and the review-platform marks above took. * Dovanos.dc.html (2026-08-17/18) built a whole page identity on it - a * "letter from Diana" reads differently on warm paper than on the site's * usual cool #f7f9ff, and Dianos dovanos (WPS-074) is the first WP screen * to need it. The gift band front-page.php restores at the same time reuses * the identical values, so a visitor following it from the front page lands * on a card that already looks like the page it points to. */ --tint-paper: #fffdf8; /* warm paper card background - Dovanos hero/newsletter, front-page gift band */ --tint-paper-border: #ece3d2; /* border on --tint-paper cards */ --tint-paper-border-hover: #d5cab3; /* --tint-paper-border, hover - front-page gift band */ --tint-paper-icon: #f6f0e3; /* icon circle background on --tint-paper (gift band) */ --color-signature-ink: #8a6d3b; /* Caveat signature ink on --tint-paper - distinct from --color-mint-ink by design (2026-08-18) */ --tint-stripe-a: #eef2fa; /* photo-placeholder stripe light */ --tint-stripe-b: #e6ebf5; /* photo-placeholder stripe dark */ --tint-panel: #eef2f8; /* account/service soft panels */ --tint-panel-cool: #eef1f6; /* cool variant of soft panel */ --tint-mist: #f0f4fa; /* lightest cool wash */ --tint-sky-soft: #f2f8fd; /* faint accent wash (video section) */ --tint-cloud: #f1f3f7; /* faint neutral wash */ --tint-aqua: #eef4f6; /* video poster wash */ --tint-aqua-deep: #e3edf0; /* video poster wash, darker */ --tint-line: #e2e6ec; /* mobile CTA top hairline */ --tint-line-strong: #cfd6e0; /* dashed map and card outlines; decorative step numerals */ --tint-icon-muted: #9aa6b8; /* placeholder glyphs (decorative - real photos replace them) */ --tint-sand-a: #e9e2d2; /* before/after photo-simulation beige ramp... */ --tint-sand-b: #e1d8c4; --tint-sand-c: #e4dcc8; --tint-sand-d: #dbd1b8; --tint-sand-e: #e9e4d6; --tint-sand-f: #e0dac8; /* ...used only in before/after placeholders */ /* ---- Semantic aliases ---- */ --surface-page: var( --color-bg ); --surface-card: var( --color-surface ); --surface-inverse: var( --color-ink ); /* dark booking panel */ --surface-soft: var( --color-fill ); --text-heading: var( --color-ink ); --text-body: var( --color-text ); --text-meta: var( --color-text-muted ); --text-fine: var( --color-text-subtle ); --text-link: var( --color-accent-text ); /* links are TEXT, so the darker accent */ --border-hairline: var( --color-border ); --border-control: var( --color-border-strong ); --action-primary: var( --color-ink ); /* black button */ --action-primary-hover: var( --color-accent-strong ); /* to accessible blue on hover */ --focus-ring: var( --color-accent ); /* 3.27:1 vs white - passes the 3:1 UI rule */ /* ---- The promotion costume (WPS-083, the calendar seasons WPS-085) ---- A season is allowed its own palette - the one deliberate exception to invariant I9 - so the promotion bar and block read their colours through these roles and never through a hex. The values below ARE the `launch` season, because launch wears the brand palette; each calendar season overrides these roles on .promo-- in components.css, reading the --season-* tokens further down. A raw hex outside this file is a G4 finding on every run of qa-grep.sh, and the exemption that makes tokens.css legal is keyed to this file's NAME - so a separate promo stylesheet would not inherit it. */ --promo-bar-bg: var( --color-accent-strong ); --promo-bar-ink: var( --color-surface ); --promo-bar-accent: var( --color-surface ); --promo-surface: var( --tint-ice-deep ); --promo-surface-ink: var( --color-ink ); --promo-surface-sub: var( --color-accent-deep ); --promo-surface-accent: var( --color-accent-text ); --promo-badge-bg: var( --color-accent-strong ); --promo-badge-ink: var( --color-surface ); --promo-action-bg: var( --action-primary ); /* the section's primary button */ --promo-action-ink: var( --color-surface ); --promo-cta-border: var( --color-accent-strong ); /* the section's outlined button */ --promo-cta-ink: var( --color-accent-deep ); --promo-card-bg: var( --color-surface ); /* the voucher visual in the section */ --promo-card-ink: var( --color-ink ); --promo-card-eyebrow: var( --color-accent-text ); /* ---- The four calendar seasons (WPS-085) ---- The mockups' AKCIJOS constant, value for value, read here 2026-09-07 from "Atnaujink sypsena v2.dc.html" (one constant, identical in all 21 mockups). Only the values the core palette does not already carry are named; white, ink and the wordmark red are reused through their own tokens in components.css. Every value is also in scripts/qa/lib/canon.mjs COLOR_TOKENS, otherwise qa-tokens --strict reports each season as T1/T2. FOUR VALUES ARE COMPOSITES, NOT THE MOCKUP'S LITERALS. The two dark seasons paint their secondary text and the outlined button's border in white at 78 % / 72 % / 40 % / 35 % alpha. Flattened onto the panel they sit on so every measurer sees one opaque colour: the a11y gate reads the composited pair either way, the token gate reads a hex either way, and a human reading this file sees the number that is actually painted. Measured contrasts on their panels: christmas sub 8.64:1 (6.67:1 through the conditions line's 0.85 opacity), black-friday sub 10.14:1 (7.54:1), both borders above the 3:1 floor for non-text UI (3.40:1, 3.18:1). */ --season-christmas-bar: #0f3630; /* deep fir green - bar and panel; white on it 13.20:1 */ --season-christmas-accent: #f3c9a0; /* warm peach - bar link, panel accent, decor; 8.60:1 on the green */ --season-christmas-sub: #cad3d1; /* white at 78 % on the green, flattened */ --season-christmas-outline: #6f8683; /* white at 40 % on the green, flattened - outlined button border */ --season-christmas-card: #fdf6ec; /* cream voucher card; the wordmark red eyebrow on it 4.50:1 */ --season-valentines-accent: #8d1b3d; /* bordeaux - bar, badge, both buttons, eyebrow; white on it 8.91:1 */ --season-valentines-bar-accent: #f8d2dd; /* pale rose - bar icon and link; 6.47:1 on the bordeaux */ --season-valentines-surface: #fbe9ee; /* rose panel; ink on it 14.69:1 */ --season-valentines-sub: #7a2340; /* darker bordeaux - panel text; 8.40:1 on the rose */ --season-black-friday-bar: #0b0d10; /* near black - bar and panel; white on it 19.46:1 */ --season-black-friday-accent: #f5b301; /* amber - bar link, badge, button, eyebrow; 10.50:1 on the black, ink on it 9.25:1 */ --season-black-friday-sub: #bbbbbc; /* white at 72 % on the black, flattened */ --season-black-friday-outline: #606264; /* white at 35 % on the black, flattened - outlined button border */ --season-summer-bar: #1f7a3f; /* grass green - bar, badge, accent; white on it 5.37:1 */ --season-summer-bar-accent: #ffec99; /* pale sun - bar icon and link; 4.52:1 on the green */ --season-summer-surface: #e9f6e2; /* light leaf panel; ink on it 15.31:1 */ --season-summer-sub: #14532d; /* deep green - panel text; 8.13:1 on the leaf */ /* ------------------------------------------------------------------------- * Typography */ /* Families */ --font-sans: 'Alegreya Sans', 'Alegreya Sans Fallback', system-ui, -apple-system, sans-serif; --font-icon: 'Material Symbols Outlined'; /* * Caveat is the handwritten accent. It has no token in the design system, * which loads it in the mockups without naming it - the accent is real * (measured on the home page at weight 600) but the system never wrote it * down. Named here so the theme has one place for it; the gap upstream is * recorded in the WPS-011 log. * * The design system's --font-mono (JetBrains Mono) is still absent, but the * reason written here in WPS-011 - "no page of this site renders any" - was * not true and nobody had checked. Measured in WPS-027: twelve elements * across three mockups paint it, all at weight 700, needing thirteen * characters in total (the digits 0-7, A, N, T, a hyphen and a bullet). The * privacy policy alone uses seven of them for its section numbers. * * It stays out because THREE canon documents restrict that face to * documentation and token values - the design system's own readme, the * design skill, and invariant I9, which says in as many words that any other * font-family is a finding. A theme that adopted it anyway would be the * local exception AGENTS.md rule 10 forbids, and the step that would settle * it belongs to the design system rather than to a page task. The finding is * open in docs/dizaino-auditas.md with the cost measured: 22 KB for the * latin subset, fetched only by a page that paints it. */ --font-accent: 'Caveat', cursive; /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 800; /* Type scale (px), taken from live site */ --fs-display: 56px; /* H1 hero */ --fs-h2: 38px; /* section titles */ --fs-h3: 21px; /* card names, master names */ --fs-price: 30px; /* price figure */ --fs-lead: 18px; /* lead / intro body */ --fs-body: 16px; /* default body */ --fs-sm: 15px; /* dense body, buttons */ --fs-caption: 14px; /* captions, small buttons */ --fs-meta: 13px; /* meta */ --fs-eyebrow: 12px; /* eyebrow / uppercase label */ /* Line heights */ --lh-tight: 1.06; /* display */ --lh-heading: 1.12; /* H2 */ --lh-snug: 1.45; /* large quotes */ --lh-body: 1.6; /* body copy */ --lh-relaxed: 1.55; /* Letter spacing */ --ls-display: -0.02em; --ls-eyebrow: 0.08em; --ls-label: 0.06em; /* ------------------------------------------------------------------------- * Radius, shadow, spacing, layout */ /* ---- Corner radius ---- */ --radius-sm: 12px; /* icon boxes, images inside cards */ --radius-md: 16px; /* small cards, thumbnails */ --radius-lg: 20px; /* standard blocks */ --radius-xl: 24px; /* larger cards */ --radius-2xl: 28px; /* feature cards, master cards */ --radius-pill: 999px; /* buttons, badges, toggles */ /* ---- Shadows ---- */ --shadow-hairline: 0 2px 10px rgba( 23, 28, 33, 0.05 ); /* light lift, spec cards */ --shadow-soft: 0 2px 8px rgba( 23, 28, 33, 0.08 ); /* pills, floating chips */ --shadow-card: 0 8px 28px rgba( 23, 28, 33, 0.06 ); /* elevated cards */ --shadow-floating: 0 12px 32px rgba( 23, 28, 33, 0.18 );/* toasts, lifted dialogs */ /* * Named here first as well, and now upstream too (AS-90, closed 2026-08-21). * The design system's --shadow-floating claimed "sticky CTA" while casting 12px * DOWNWARD - the one direction a bar pinned to the bottom of the viewport cannot * use, because its shadow has to fall on the content it covers. Every mockup * wrote this value out by hand instead, so the token said one thing and fourteen * pages did another. Both halves are fixed upstream: --shadow-bar exists, and * --shadow-floating's comment now says what it is actually for. */ --shadow-bar: 0 -6px 20px rgba( 23, 28, 33, 0.09 ); /* bottom-fixed bar, cast UPWARDS */ /* * 2026-08-29 (WPS-066). The burger panel is a SHEET - it slides over the page * and has to read as being in front of it. Every mockup writes this value into * .sh-menu by hand and the design system had no token for it, so this theme * reached for --shadow-card, the closest thing it could name: a third of the * opacity and half the drop. The open menu came out flat against the page * behind it (Andrius on dev). The token now exists upstream and this is its * transfer. */ --shadow-sheet: 0 16px 34px rgba( 23, 28, 33, 0.12 ); /* burger panel, full-width overlays */ /* ---- Spacing scale (px) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* ---- Layout ---- * 1100, not the design system's 1200 - see the deviation note at the top of * this file. The design system's --container-narrow (1160px) is left out * with it: it sizes the design system's own documentation pages, not this * site, and the narrower reading widths the site does use (520-1000 px) are * per-page decisions rather than one shared token. * * The 920/921 px breakpoint has no token because a custom property cannot be * used in a media query. It is written out in base.css where the queries are. */ --container: 1100px; --gutter: clamp( 16px, 4vw, 32px ); /* ---- Motion ---- */ --ease: cubic-bezier( 0.4, 0, 0.2, 1 ); --dur-fast: 0.15s; --dur: 0.2s; }