@coras-io/embed 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @coras-io/embed
 
+## 0.5.0
+
+### Minor Changes
+
+- 6220f11: Add `logoHref` to the managed navbar so the brand logo can link to the distributor's own website instead of the embed's landing page
+
+## 0.4.0
+
+### Minor Changes
+
+- 233f091: Add `navbarBackgroundImage` and `footerBackgroundImage` so a brand can paint a linear or radial gradient over the navbar and footer, with an optional dark counterpart under `dark`; the solid background colours stay the fallback for the mobile menu, borders, contrast checks and email
+- 233f091: Ship the `brand.json` contract: the file is grouped by surface (`navbar.background`), cites a published JSON Schema, and is read by every consumer in that shape or as flat keys. Rename `mainButton*` to `primaryButton*`, `bodyIcon` to `icon` and `buttonHoverLight` / `buttonHoverDark` to `buttonHoverOnLightFill` / `buttonHoverOnDarkFill`, with their CSS variables (`--coras-brand-primary-button*`, `--coras-brand-icon`, `--coras-color-primary-button*`). Logos are fields, shadows are validated by grammar, `publishBrand` fills in derived values, and `toDesignTokens` exports a brand as W3C Design Tokens
+
+### Patch Changes
+
+- e8377e1: Show ampersands and angle brackets in translated text instead of raw HTML entities
+- 030f19d: Show the details page error modal when an attraction request fails, instead of crashing while rendering an empty attraction
+- Updated dependencies [233f091]
+- Updated dependencies [233f091]
+  - @coras-io/brand-tokens@0.4.0
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/components/filter-chip/filter-chip.styles.js

@@ -27,7 +27,7 @@ export default css `
     );
     --filter-chip-selected-background-color: var(--coras-color-primary);
     --filter-chip-selected-hover-background-color: var(
-      --coras-color-main-button-hover
+      --coras-color-primary-button-hover
     );
     --filter-chip-selected-color: var(--coras-palette-white);
     --filter-chip-disabled-color: var(--coras-color-text-disabled);

package/dist/components/transfer-modal/transfer-modal.styles.js

@@ -129,7 +129,7 @@ export default css `
   }
 
   .resend-link:hover {
-    color: var(--coras-color-main-button-hover, #0040cc);
+    color: var(--coras-color-primary-button-hover, #0040cc);
   }
 
   .resend-link:disabled {

package/dist/containers/footer/footer.component.d.ts

@@ -4,5 +4,7 @@ import "../../components/footer-menu/footer-menu-item/footer-menu-item.js";
 export declare class CorasFooter extends LitElement {
     static styles: CSSResultGroup;
     private _pageDispatch;
+    private readonly colorScheme;
+    willUpdate(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/containers/footer/footer.component.js

@@ -10,9 +10,17 @@ import { consume } from "@lit/context";
 import "../../components/footer-menu/footer-menu.js";
 import "../../components/footer-menu/footer-menu-item/footer-menu-item.js";
 import styles from "./footer.styles.js";
+import { ColorSchemeController } from "../../core/color-scheme.js";
 import { pageDispatchContext, } from "../../contexts/events.context.js";
 let CorasFooter = class CorasFooter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.colorScheme = new ColorSchemeController(this);
+    }
     static { this.styles = styles; }
+    willUpdate() {
+        this.dataset.colorScheme = this.colorScheme.scheme;
+    }
     render() {
         return html `
       <div class="container">

package/dist/containers/footer/footer.styles.js

@@ -5,17 +5,25 @@ export default css `
 
   :host {
     --footer-background: var(--coras-footer-background-color);
+    --footer-background-image: var(--coras-footer-background-image);
+    --footer-background-image-dark: var(--coras-footer-background-image-dark);
     --footer-text-color: var(--coras-footer-text-color);
     --footer-border-top: var(--coras-footer-border-top);
     --footer-padding-bottom: var(--coras-footer-padding-bottom);
 
     background-color: var(--footer-background);
+    background-image: var(--footer-background-image);
     border-top: var(--footer-border-top);
 
     width: 100%;
     pointer-events: none;
   }
 
+  /* light-dark() takes colours only, so the dark gradient is picked by scheme. */
+  :host([data-color-scheme="dark"]) {
+    background-image: var(--footer-background-image-dark);
+  }
+
   .container {
     container-type: inline-size;
     max-width: var(--coras-footer-max-width);

package/dist/containers/navbar/navbar.component.d.ts

@@ -32,6 +32,7 @@ export declare class CorasNavBar extends CorasNavBar_base implements SearchMixin
     logo?: string;
     logoDark?: string;
     navbarLogo?: string;
+    logoHref?: string;
     private readonly colorScheme;
     locale: SupportedLocales;
     locales: SupportedLocales[];
@@ -99,8 +100,10 @@ export declare class CorasNavBar extends CorasNavBar_base implements SearchMixin
     private renderMobileMenuDrawer;
     private handleLogoClick;
     private renderBrand;
+    private renderBrandHome;
     private renderSearchOnlyHeader;
     private renderFullHeader;
+    willUpdate(): void;
     render(): import("lit").TemplateResult<1>;
 }
 export {};

package/dist/containers/navbar/navbar.component.js

@@ -10,6 +10,7 @@ import { ColorSchemeController } from "../../core/color-scheme.js";
 import { when } from "lit/directives/when.js";
 import { localized, msg } from "@lit/localize";
 import { consume, ContextConsumer } from "@lit/context";
+import { safeUrl } from "@coras-io/brand-tokens";
 import "../../components/button/button.js";
 import "../../components/icon/icon.js";
 import "../../components/input-field/input-field.js";
@@ -620,21 +621,40 @@ let CorasNavBar = class CorasNavBar extends SearchMixin(SignalWatcher(LitElement
                 ? this.logoDark
                 : this.logo);
         return html `
-      <slot name="brand">
-        ${logo
-            ? html `<button
-              class="brand-button"
-              part="brand-button"
-              type="button"
-              aria-label=${msg("Go to the home page")}
-              @click=${this.handleLogoClick}
-            >
-              <img class="brand-logo" part="brand-logo" src=${logo} alt="" />
-            </button>`
-            : nothing}
-      </slot>
+      <slot name="brand"> ${logo ? this.renderBrandHome(logo) : nothing} </slot>
     `;
     }
+    // A distributor with its own website links the logo straight there, the way its
+    // main site does, and a real anchor keeps that a link (middle-click, new tab,
+    // status bar). Without one there is no URL to link to, so the logo stays a
+    // button dispatching the `landing` navigation for the host to route.
+    renderBrandHome(logo) {
+        const image = html `<img
+      class="brand-logo"
+      part="brand-logo"
+      src=${logo}
+      alt=""
+    />`;
+        // The URL comes from host config, so it is gated here rather than trusted.
+        const href = safeUrl(this.logoHref);
+        return href
+            ? html `<a
+          class="brand-button"
+          part="brand-button"
+          href=${href}
+          aria-label=${msg("Go to the home page")}
+          >${image}</a
+        >`
+            : html `<button
+          class="brand-button"
+          part="brand-button"
+          type="button"
+          aria-label=${msg("Go to the home page")}
+          @click=${this.handleLogoClick}
+        >
+          ${image}
+        </button>`;
+    }
     renderSearchOnlyHeader() {
         return html `
       <header class="search-only">
@@ -671,6 +691,9 @@ let CorasNavBar = class CorasNavBar extends SearchMixin(SignalWatcher(LitElement
       </header>
     `;
     }
+    willUpdate() {
+        this.dataset.colorScheme = this.colorScheme.scheme;
+    }
     render() {
         return html `
       ${this.searchOnly
@@ -708,6 +731,9 @@ __decorate([
 __decorate([
     property({ type: String, attribute: "navbar-logo" })
 ], CorasNavBar.prototype, "navbarLogo", void 0);
+__decorate([
+    property({ type: String, attribute: "logo-href" })
+], CorasNavBar.prototype, "logoHref", void 0);
 __decorate([
     consume({ context: localeContext, subscribe: true })
 ], CorasNavBar.prototype, "locale", void 0);

package/dist/containers/navbar/navbar.styles.js

@@ -5,6 +5,8 @@ export default css `
 
   :host {
     --navbar-background: var(--coras-navbar-background);
+    --navbar-background-image: var(--coras-navbar-background-image);
+    --navbar-background-image-dark: var(--coras-navbar-background-image-dark);
     --navbar-text-color: var(--coras-navbar-text-color);
     --navbar-border-bottom: var(--coras-navbar-border-bottom);
     --navbar-shadow: var(--coras-navbar-shadow);
@@ -39,7 +41,13 @@ export default css `
     display: block;
     width: 100%;
 
-    background: var(--navbar-background);
+    background-color: var(--navbar-background);
+    background-image: var(--navbar-background-image);
+  }
+
+  /* light-dark() takes colours only, so the dark gradient is picked by scheme. */
+  :host([data-color-scheme="dark"]) {
+    background-image: var(--navbar-background-image-dark);
   }
 
   coras-icon[icon="shopping-basket"],
@@ -154,6 +162,7 @@ export default css `
       background: none;
       color: inherit;
       font: inherit;
+      text-decoration: none;
       cursor: pointer;
     }
 

package/dist/locales/de-DE.js

@@ -193,7 +193,7 @@ export const templates = {
     'sb05eb16313ad5810': `Fehler!`,
     'sb074169ce94feeb0': `Unzureichendes FIDA-Gleichgewicht`,
     'sb182f52b56175d8c': `Keine Länder gefunden`,
-    'sb26e53053d747113': `Tickets & Touren`,
+    'sb26e53053d747113': `Tickets & Touren`,
     'sb3d4f79d9d8b71e5': `Einreichen`,
     'sb3dbeaf294fd9bdd': `Bezahlter Betrag`,
     'sb46123a97302f3ae': `Gesamt in FIDA`,

package/dist/locales/en-IE.js

@@ -27,7 +27,7 @@ export const templates = {
     's06963fd6fbd255b6': `Next Month`,
     's06e48df1da26857e': `Firstname + Surname`,
     's072873fcb8392b95': `For illustrative purposes only`,
-    's07c32b16a0cc7f41': `I confirm I have read and accept FIDA's Terms & Conditions`,
+    's07c32b16a0cc7f41': `I confirm I have read and accept FIDA's Terms & Conditions`,
     's0832cb53a9099084': `Browse events`,
     's088e2b07b5393093': `ea`,
     's0a88a6ae24e8ac10': `Please enter your email address`,
@@ -193,7 +193,7 @@ export const templates = {
     'sb05eb16313ad5810': `Error!`,
     'sb074169ce94feeb0': `Insufficient FIDA balance`,
     'sb182f52b56175d8c': `No countries found`,
-    'sb26e53053d747113': `Tickets & Tours`,
+    'sb26e53053d747113': `Tickets & Tours`,
     'sb3d4f79d9d8b71e5': `Submit`,
     'sb3dbeaf294fd9bdd': `Amount Paid`,
     'sb46123a97302f3ae': `Total in FIDA`,
@@ -203,7 +203,7 @@ export const templates = {
     'sb5fd6f925a5bd3ea': `ticket for`,
     'sb61dfe1d5012cc35': `What is your question about`,
     'sb75ee24776b3d425': `Ticket`,
-    'sb7600e1426fb67c7': `I confirm I have read and accept Coras's Terms & Conditions`,
+    'sb7600e1426fb67c7': `I confirm I have read and accept Coras's Terms & Conditions`,
     'sb84d72388b33a3a4': `Your basket`,
     'sb85774dc5d18ff0f': `Confirm`,
     'sb9bd4f5a3810b77e': `Something went wrong`,
@@ -248,7 +248,7 @@ export const templates = {
     'se046d97f0d9dd903': `Type name or select`,
     'se256f991824c9ae0': `Flag icon`,
     'se2b298fd65f45cc7': `Your card’s expiration date is incomplete.`,
-    'se374a10ee87f7f8c': `Terms & Conditions`,
+    'se374a10ee87f7f8c': `Terms & Conditions`,
     'se3d2b191408a6254': `By confirming, the FIDA tokens will be transferred from your wallet to complete this payment.`,
     'se46604e4550a957d': `Go to the home page`,
     'se4bfd14e0c3355ac': `Total in`,

package/dist/locales/en-US.js

@@ -27,7 +27,7 @@ export const templates = {
     's06963fd6fbd255b6': `Next Month`,
     's06e48df1da26857e': `Firstname + Surname`,
     's072873fcb8392b95': `For illustrative purposes only`,
-    's07c32b16a0cc7f41': `I confirm I have read and accept FIDA's Terms & Conditions`,
+    's07c32b16a0cc7f41': `I confirm I have read and accept FIDA's Terms & Conditions`,
     's0832cb53a9099084': `Browse events`,
     's088e2b07b5393093': `ea`,
     's0a88a6ae24e8ac10': `Please enter your email address`,
@@ -193,7 +193,7 @@ export const templates = {
     'sb05eb16313ad5810': `Error!`,
     'sb074169ce94feeb0': `Insufficient FIDA balance`,
     'sb182f52b56175d8c': `No countries found`,
-    'sb26e53053d747113': `Tickets & Tours`,
+    'sb26e53053d747113': `Tickets & Tours`,
     'sb3d4f79d9d8b71e5': `Submit`,
     'sb3dbeaf294fd9bdd': `Amount Paid`,
     'sb46123a97302f3ae': `Total in FIDA`,
@@ -203,7 +203,7 @@ export const templates = {
     'sb5fd6f925a5bd3ea': `ticket for`,
     'sb61dfe1d5012cc35': `What is your question about`,
     'sb75ee24776b3d425': `Ticket`,
-    'sb7600e1426fb67c7': `I confirm I have read and accept Coras's Terms & Conditions`,
+    'sb7600e1426fb67c7': `I confirm I have read and accept Coras's Terms & Conditions`,
     'sb84d72388b33a3a4': `Your basket`,
     'sb85774dc5d18ff0f': `Confirm`,
     'sb9bd4f5a3810b77e': `Something went wrong`,
@@ -248,7 +248,7 @@ export const templates = {
     'se046d97f0d9dd903': `Type name or select`,
     'se256f991824c9ae0': `Flag icon`,
     'se2b298fd65f45cc7': `Your card’s expiration date is incomplete.`,
-    'se374a10ee87f7f8c': `Terms & Conditions`,
+    'se374a10ee87f7f8c': `Terms & Conditions`,
     'se3d2b191408a6254': `By confirming, the FIDA tokens will be transferred from your wallet to complete this payment.`,
     'se46604e4550a957d': `Go to the home page`,
     'se4bfd14e0c3355ac': `Total in`,

package/dist/locales/ms-MY.js

@@ -27,7 +27,7 @@ export const templates = {
     's06963fd6fbd255b6': `Bulan Depan`,
     's06e48df1da26857e': `Nama pertama + Nama keluarga`,
     's072873fcb8392b95': `Untuk tujuan ilustrasi sahaja`,
-    's07c32b16a0cc7f41': `Saya mengesahkan bahawa saya telah membaca dan menerima Terma & Syarat FIDA`,
+    's07c32b16a0cc7f41': `Saya mengesahkan bahawa saya telah membaca dan menerima Terma & Syarat FIDA`,
     's0832cb53a9099084': `Layari acara`,
     's088e2b07b5393093': `ea`,
     's0a88a6ae24e8ac10': `Sila masukkan alamat e-mel anda`,
@@ -193,7 +193,7 @@ export const templates = {
     'sb05eb16313ad5810': `Ralat!`,
     'sb074169ce94feeb0': `Baki FIDA yang tidak mencukupi`,
     'sb182f52b56175d8c': `Tiada negara ditemui`,
-    'sb26e53053d747113': `Tiket & Lawatan`,
+    'sb26e53053d747113': `Tiket & Lawatan`,
     'sb3d4f79d9d8b71e5': `Hantar`,
     'sb3dbeaf294fd9bdd': `Jumlah Dibayar`,
     'sb46123a97302f3ae': `Jumlah dalam FIDA`,
@@ -203,7 +203,7 @@ export const templates = {
     'sb5fd6f925a5bd3ea': `tiket untuk`,
     'sb61dfe1d5012cc35': `Apakah soalan anda`,
     'sb75ee24776b3d425': `tiket`,
-    'sb7600e1426fb67c7': `Saya mengesahkan saya telah membaca dan menerima Terma & Syarat Coras`,
+    'sb7600e1426fb67c7': `Saya mengesahkan saya telah membaca dan menerima Terma & Syarat Coras`,
     'sb84d72388b33a3a4': `bakul awak`,
     'sb85774dc5d18ff0f': `Sahkan`,
     'sb9bd4f5a3810b77e': `Sesuatu telah berlaku`,
@@ -248,7 +248,7 @@ export const templates = {
     'se046d97f0d9dd903': `Taip nama atau pilih`,
     'se256f991824c9ae0': `Ikon bendera`,
     'se2b298fd65f45cc7': `Tarikh tamat tempoh kad anda tidak lengkap.`,
-    'se374a10ee87f7f8c': `Terma & Syarat`,
+    'se374a10ee87f7f8c': `Terma & Syarat`,
     'se3d2b191408a6254': `Dengan pengesahan, token FIDA akan dipindahkan dari dompet anda untuk menyelesaikan pembayaran ini.`,
     'se46604e4550a957d': `Pergi ke halaman utama`,
     'se4bfd14e0c3355ac': `Jumlah dalam`,

package/dist/sdk/mount.js

@@ -5,7 +5,7 @@ import { attachCallbackBridge, } from "./element-adapter.js";
 import { createChrome } from "./chrome.js";
 import { applyConfig, applyParams, captureConfigDefaults, captureParamDefaults, defaultPageRegistry, } from "./page-registry.js";
 import { applyColorScheme, applyTheme, clearTheme } from "./theme.js";
-import { safeUrl } from "@coras-io/brand-tokens";
+import { safeUrl, migrateBrandConfig, } from "@coras-io/brand-tokens";
 import { ensureTokensInjected } from "../styles/tokens.js";
 import { redactValue, toPublicErrorDetail } from "./redaction.js";
 import { assertValidPage, CorasValidationError, validateConfig, validateMountOptions, validatePageParams, } from "./validation.js";
@@ -66,6 +66,10 @@ export function createMountWith(registry) {
             : (container.ownerDocument ?? document));
         let currentPage = validated.page;
         let currentConfig = validated.config;
+        const themeLogos = () => {
+            const t = migrateBrandConfig(currentConfig.theme ?? {});
+            return { logo: t.logo, logoDark: t.logoDark, navbarLogo: t.navbarLogo };
+        };
         let currentParams = validated.params;
         let currentChrome = options.chrome;
         if (themeHasNoColours(currentConfig.theme))
@@ -139,9 +143,10 @@ export function createMountWith(registry) {
             for (const element of chromeElements) {
                 if (element.tagName === "CORAS-NAVBAR") {
                     const nav = element;
-                    nav.logo = safeUrl(currentConfig.theme?.logo);
-                    nav.logoDark = safeUrl(currentConfig.theme?.logoDark);
-                    nav.navbarLogo = safeUrl(currentConfig.theme?.navbarLogo);
+                    const logos = themeLogos();
+                    nav.logo = safeUrl(logos.logo);
+                    nav.logoDark = safeUrl(logos.logoDark);
+                    nav.navbarLogo = safeUrl(logos.navbarLogo);
                 }
             }
         }
@@ -163,11 +168,7 @@ export function createMountWith(registry) {
             // Chrome is rebuilt per page rather than moved: the navbar/footer consume
             // the page's context (locale, dispatch, current page…) and re-parenting a
             // context consumer across providers leaves those bindings stale.
-            const chrome = await createChrome(currentChrome, {
-                logo: currentConfig.theme?.logo,
-                logoDark: currentConfig.theme?.logoDark,
-                navbarLogo: currentConfig.theme?.navbarLogo,
-            });
+            const chrome = await createChrome(currentChrome, themeLogos());
             if (destroyed || generationToken !== generation)
                 return;
             for (const chromeElement of chrome) {
@@ -341,11 +342,7 @@ export function createMountWith(registry) {
                 if (chromeChanged) {
                     removeChrome();
                     const chromeToken = ++chromeGeneration;
-                    void createChrome(currentChrome, {
-                        logo: currentConfig.theme?.logo,
-                        logoDark: currentConfig.theme?.logoDark,
-                        navbarLogo: currentConfig.theme?.navbarLogo,
-                    })
+                    void createChrome(currentChrome, themeLogos())
                         .then((chrome) => {
                         // A newer chrome update or a page render has superseded this one;
                         // discard the stale chrome instead of appending it.

package/dist/sdk/theme.d.ts

@@ -1,5 +1,5 @@
 import type { CorasColorScheme, CorasTheme } from "./types.js";
-export declare const THEME_CSS_VARS: Record<"primary" | "secondary" | "pageBackground" | "text" | "textMuted" | "link" | "bodyIcon" | "focusRing" | "scrim" | "cardBackground" | "cardBorder" | "fieldBackground" | "fieldBorder" | "menuBackground" | "menuBorder" | "divider" | "cardShadow" | "softShadow" | "mainButton" | "mainButtonText" | "mainButtonHover" | "mainButtonPressed" | "secondaryButton" | "secondaryButtonText" | "secondaryButtonHover" | "secondaryButtonPressed" | "textButton" | "mainButtonBorder" | "secondaryButtonBorder" | "disabled" | "buttonShadow" | "buttonHoverLight" | "buttonHoverDark" | "radius" | "buttonRadius" | "chipRadius" | "fieldRadius" | "searchRadius" | "font" | "headingFont" | "headingScale" | "logoHeight" | "navbarBackground" | "navbarText" | "navbarIcon" | "navbarBorder" | "navbarShadow" | "footerBackground" | "footerText" | "footerLink" | "footerBorder" | "footerPaddingBottom" | "error" | "errorBackground" | "success" | "successBackground" | "warning" | "warningBackground" | "info" | "infoBackground" | "primaryTint" | "secondaryTint" | "neutral50" | "neutral100" | "neutral200" | "neutral300" | "neutral400" | "neutral500" | "neutral600" | "neutral700" | "neutral800" | "neutral900", string>;
+export declare const THEME_CSS_VARS: Record<"primary" | "secondary" | "pageBackground" | "text" | "textMuted" | "link" | "icon" | "focusRing" | "scrim" | "cardBackground" | "cardBorder" | "fieldBackground" | "fieldBorder" | "menuBackground" | "menuBorder" | "divider" | "cardShadow" | "softShadow" | "primaryButton" | "primaryButtonText" | "primaryButtonHover" | "primaryButtonPressed" | "secondaryButton" | "secondaryButtonText" | "secondaryButtonHover" | "secondaryButtonPressed" | "textButton" | "primaryButtonBorder" | "secondaryButtonBorder" | "disabled" | "buttonShadow" | "buttonHoverOnLightFill" | "buttonHoverOnDarkFill" | "radius" | "buttonRadius" | "chipRadius" | "fieldRadius" | "searchRadius" | "font" | "headingFont" | "headingScale" | "logoHeight" | "navbarBackground" | "navbarBackgroundImage" | "navbarText" | "navbarIcon" | "navbarBorder" | "navbarShadow" | "footerBackground" | "footerBackgroundImage" | "footerText" | "footerLink" | "footerBorder" | "footerPaddingBottom" | "error" | "errorBackground" | "success" | "successBackground" | "warning" | "warningBackground" | "info" | "infoBackground" | "primaryTint" | "secondaryTint" | "neutral50" | "neutral100" | "neutral200" | "neutral300" | "neutral400" | "neutral500" | "neutral600" | "neutral700" | "neutral800" | "neutral900", string>;
 export declare function applyColorScheme(element: HTMLElement, scheme: CorasColorScheme | undefined): void;
-export declare function applyTheme(element: HTMLElement, theme: CorasTheme | undefined): void;
+export declare function applyTheme(element: HTMLElement, input: CorasTheme | undefined): void;
 export declare function clearTheme(element: HTMLElement): void;

package/dist/sdk/theme.js

@@ -1,20 +1,20 @@
-import { BRAND_CSS_VARS, brandVarValue, fontFacesToCSS, } from "@coras-io/brand-tokens";
+import { BRAND_CSS_VARS, BRAND_DARK_CSS_VARS, brandVarEntries, brandVarValue, fontFacesToCSS, migrateBrandConfig, } from "@coras-io/brand-tokens";
 export const THEME_CSS_VARS = BRAND_CSS_VARS;
 const THEME_KEYS = Object.keys(THEME_CSS_VARS);
 export function applyColorScheme(element, scheme) {
     element.style.colorScheme =
         scheme === "dark" ? "dark" : scheme === "inherit" ? "inherit" : "light";
 }
-export function applyTheme(element, theme) {
-    if (!theme)
+export function applyTheme(element, input) {
+    if (!input)
         return;
+    const theme = migrateBrandConfig(input);
     const dark = (theme.dark ?? {});
     for (const key of THEME_KEYS) {
         if (theme[key] == null && dark[key] == null)
             continue;
-        const value = brandVarValue(key, theme[key], dark[key]);
-        if (value)
-            element.style.setProperty(THEME_CSS_VARS[key], value);
+        for (const [name, value] of brandVarEntries(key, theme[key], dark[key]))
+            element.style.setProperty(name, value);
     }
     if (theme.pageBackground != null || dark.pageBackground != null) {
         const pageBg = brandVarValue("pageBackground", theme.pageBackground, dark.pageBackground);
@@ -33,6 +33,9 @@ export function clearTheme(element) {
     for (const key of THEME_KEYS) {
         element.style.removeProperty(THEME_CSS_VARS[key]);
     }
+    for (const name of Object.values(BRAND_DARK_CSS_VARS)) {
+        element.style.removeProperty(name);
+    }
     element.style.removeProperty("--coras-page-background");
     element
         .querySelectorAll(":scope > [data-coras-fontfaces]")

package/dist/sdk/types.d.ts

@@ -1,4 +1,4 @@
-import type { BrandConfig } from "@coras-io/brand-tokens";
+import type { BrandConfig, BrandJson } from "@coras-io/brand-tokens";
 import type { SupportedCurrencies } from "../core/types/core/currency.js";
 import type { SupportedLocales } from "../core/types/core/locale.js";
 /**
@@ -57,12 +57,10 @@ export type CorasPageParamsByPage = {
 /** Params for a specific page, or the union when the page is not narrowed. */
 export type CorasPageParams<P extends CorasPageName = CorasPageName> = CorasPageParamsByPage[P];
 /**
- * The SDK `theme` option is the shared `BrandConfig` contract: un-prefixed
- * semantic keys (`primary`, `secondary`, …) plus chrome, `logo`, and
- * `fontFaces`. Defined once in `@coras-io/brand-tokens` and reused by the
- * microsites, emails, and the Studio.
+ * The SDK `theme` option is the shared brand contract from `@coras-io/brand-tokens`:
+ * a `brand.json` as written (grouped by surface) or the engine's flat keys.
  */
-export type CorasTheme = BrandConfig;
+export type CorasTheme = BrandConfig | BrandJson;
 /**
  * Which colour scheme the mount renders. `theme` carries the light values and
  * its `dark` block the dark overrides; this picks which side the `light-dark()`
@@ -89,7 +87,7 @@ export type CorasConfig = {
     colorScheme?: CorasColorScheme;
 };
 /**
- * Feature toggles for the SDK-created Coras navbar. Each `show*` key maps 1:1 to
+ * Host-set options for the SDK-created Coras navbar. Each `show*` key maps 1:1 to
  * a navbar control; an omitted key keeps the navbar's default (everything
  * shown). Used with `{ use: "managed", props: { … } }`.
  */
@@ -104,6 +102,13 @@ export type CorasNavbarProps = {
     showCurrencySelector?: boolean;
     showBasket?: boolean;
     showSearch?: boolean;
+    /**
+     * Where the brand logo links, for a distributor whose booking site sits beside
+     * a main website. Set it and the logo becomes a plain link there; leave it
+     * unset and the logo stays a button that emits a `landing` navigation for the
+     * host to route. Only `https:` and same-origin URLs are honoured.
+     */
+    logoHref?: string;
 };
 /**
  * Host content-injection points on the Coras navbar. Names describe the region

package/dist/sdk/validation.js

@@ -183,10 +183,8 @@ function validateAssetsUrl(value) {
 // them silently, which a strict host wants flagged, not swallowed).
 const THEME_KEYS = [
     ...FIELDS.map((field) => field.key),
-    "logo",
-    "logoDark",
-    "navbarLogo",
-    "footerLogo",
+    ...FIELDS.map((field) => field.path.split(".")[0]),
+    "$schema",
     "fontFaces",
     "dark",
     "schemaVersion",

package/dist/styles/tokens.d.ts

@@ -8,7 +8,7 @@
  * light-DOM container is enough for every nested Web Component to read them.
  * `mount()` adopts this sheet into the container's document exactly once.
  */
-export declare const CORAS_TOKENS_TEXT = "/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-page-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-body-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-focus-ring {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-card-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #fcfcff;\n}\n@property --coras-brand-field-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-menu-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-main-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-text-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-button-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-chip-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-navbar-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-footer-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-error {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #c9224a;\n}\n@property --coras-brand-success {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #670c93;\n}\n\n@layer coras.palette {\n  :where([data-coras-root], .coras-theme) {\n    --coras-palette-primary-50: #fcfcff;\n    --coras-palette-primary-100: #fbfbff;\n    --coras-palette-primary-200: #eef0ff;\n    --coras-palette-primary-300: #dde1ff;\n    --coras-palette-primary-400: #5468ff;\n    --coras-palette-primary-500: #4657d4;\n    --coras-palette-primary-700: #323e99;\n    --coras-palette-secondary-50: #e8e8ec;\n    --coras-palette-secondary-100: #d0d2da;\n    --coras-palette-secondary-200: #b9bbc7;\n    --coras-palette-secondary-300: #a2a4b4;\n    --coras-palette-secondary-400: #1c2355;\n    --coras-palette-secondary-500: #161c44;\n    --coras-palette-secondary-700: #121636;\n    --coras-palette-neutral-50: #f5f5f5;\n    --coras-palette-neutral-100: #eeeeee;\n    --coras-palette-neutral-200: #e6e6e6;\n    --coras-palette-neutral-300: #dddddd;\n    --coras-palette-neutral-400: #cccccc;\n    --coras-palette-neutral-500: #aaaaaa;\n    --coras-palette-neutral-600: #888888;\n    --coras-palette-neutral-700: #666666;\n    --coras-palette-neutral-800: #444444;\n    --coras-palette-neutral-900: #292929;\n    --coras-palette-error-50: #fae9ed;\n    --coras-palette-error-500: #c9224a;\n    --coras-palette-error-700: #a11b3b;\n    --coras-palette-error-900: #79142c;\n    --coras-palette-info-50: #f0e7f4;\n    --coras-palette-info-500: #670c93;\n    --coras-palette-info-700: #520a76;\n    --coras-palette-info-900: #3e0758;\n    --coras-palette-success-50: #e6f7f4;\n    --coras-palette-success-500: #00ad8f;\n    --coras-palette-success-700: #008a72;\n    --coras-palette-success-900: #006856;\n    --coras-palette-warning-50: #fdf4e8;\n    --coras-palette-warning-500: #ed8f1c;\n    --coras-palette-warning-700: #be7216;\n    --coras-palette-warning-900: #8e5611;\n    --coras-palette-pink-500: #ff2d55;\n    --coras-palette-black: #000000;\n    --coras-palette-white: #ffffff;\n  }\n}\n\n@layer coras.brand {\n  :where([data-coras-root], .coras-theme) {\n    color-scheme: light;\n    --coras-brand-primary: var(--coras-palette-primary-500);\n    --coras-brand-secondary: var(--coras-palette-secondary-500);\n    --coras-brand-page-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n    --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n    --coras-brand-link: var(--coras-brand-text-button);\n    --coras-brand-body-icon: var(--coras-brand-text);\n    --coras-brand-focus-ring: var(--coras-brand-primary);\n    --coras-brand-scrim: var(--coras-palette-black);\n    --coras-brand-card-background: light-dark(var(--coras-palette-primary-50), #191c22);\n    --coras-brand-card-border: light-dark(var(--coras-palette-neutral-200), #444444);\n    --coras-brand-field-background: light-dark(var(--coras-brand-page-background), #101216);\n    --coras-brand-field-border: light-dark(var(--coras-palette-neutral-400), #aaaaaa);\n    --coras-brand-menu-background: light-dark(var(--coras-brand-page-background), #101216);\n    --coras-brand-menu-border: var(--coras-brand-card-border);\n    --coras-brand-divider: light-dark(var(--coras-palette-neutral-200), #292929);\n    --coras-brand-card-shadow: 0px 24px 24px rgba(0, 0, 0, 0.04);\n    --coras-brand-soft-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04);\n    --coras-brand-main-button: var(--coras-brand-primary);\n    --coras-brand-main-button-text: #ffffff;\n    --coras-brand-main-button-hover: light-dark(#3f4ebf, #5968d8);\n    --coras-brand-main-button-pressed: light-dark(#3947ae, #6775dc);\n    --coras-brand-secondary-button: var(--coras-brand-secondary);\n    --coras-brand-secondary-button-text: #ffffff;\n    --coras-brand-secondary-button-hover: light-dark(#14193d, #2d3357);\n    --coras-brand-secondary-button-pressed: light-dark(#121738, #404566);\n    --coras-brand-text-button: light-dark(var(--coras-brand-primary), #6279f9);\n    --coras-brand-main-button-border: transparent;\n    --coras-brand-secondary-button-border: transparent;\n    --coras-brand-disabled: light-dark(var(--coras-palette-neutral-500), #cccccc);\n    --coras-brand-button-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);\n    --coras-brand-button-hover-light: 20%;\n    --coras-brand-button-hover-dark: 20%;\n    --coras-brand-radius: 1.5rem;\n    --coras-brand-button-radius: var(--coras-brand-radius);\n    --coras-brand-chip-radius: var(--coras-brand-radius);\n    --coras-brand-field-radius: 0.5rem;\n    --coras-brand-search-radius: 100px;\n    --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --coras-brand-heading-font: var(--coras-brand-font);\n    --coras-brand-heading-scale: 1;\n    --coras-brand-logo-height: 2rem;\n    --coras-brand-navbar-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n    --coras-brand-navbar-border: var(--coras-brand-navbar-background);\n    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n    --coras-brand-footer-background: light-dark(var(--coras-palette-neutral-200), #191c22);\n    --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-footer-link: var(--coras-brand-footer-text);\n    --coras-brand-footer-border: var(--coras-brand-footer-background);\n    --coras-brand-footer-padding-bottom: 2rem;\n    --coras-brand-error: light-dark(var(--coras-palette-error-500), #f5748a);\n    --coras-brand-error-background: light-dark(var(--coras-palette-error-50), #442e36);\n    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n    --coras-brand-success-background: light-dark(var(--coras-palette-success-50), #26403f);\n    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n    --coras-brand-warning-background: light-dark(var(--coras-palette-warning-50), #43382e);\n    --coras-brand-info: light-dark(var(--coras-palette-info-500), #ba86e1);\n    --coras-brand-info-background: light-dark(var(--coras-palette-info-50), #373045);\n    --coras-brand-primary-tint: light-dark(var(--coras-palette-primary-50), #141823);\n    --coras-brand-secondary-tint: light-dark(var(--coras-palette-secondary-50), #10131a);\n    --coras-brand-neutral-50: var(--coras-palette-neutral-50);\n    --coras-brand-neutral-100: var(--coras-palette-neutral-100);\n    --coras-brand-neutral-200: var(--coras-palette-neutral-200);\n    --coras-brand-neutral-300: var(--coras-palette-neutral-300);\n    --coras-brand-neutral-400: var(--coras-palette-neutral-400);\n    --coras-brand-neutral-500: var(--coras-palette-neutral-500);\n    --coras-brand-neutral-600: var(--coras-palette-neutral-600);\n    --coras-brand-neutral-700: var(--coras-palette-neutral-700);\n    --coras-brand-neutral-800: var(--coras-palette-neutral-800);\n    --coras-brand-neutral-900: var(--coras-palette-neutral-900);\n  }\n}\n\n@layer coras.semantic {\n  :where([data-coras-root], .coras-theme) {\n    --coras-color-primary: var(--coras-brand-primary);\n    --coras-color-primary-tint: var(--coras-brand-primary-tint);\n    --coras-color-secondary: var(--coras-brand-secondary);\n    --coras-color-secondary-tint: var(--coras-brand-secondary-tint);\n    --coras-color-error: var(--coras-brand-error);\n    --coras-color-error-background: var(--coras-brand-error-background);\n    --coras-color-success: var(--coras-brand-success);\n    --coras-color-success-background: var(--coras-brand-success-background);\n    --coras-color-warning: var(--coras-brand-warning);\n    --coras-color-warning-background: var(--coras-brand-warning-background);\n    --coras-color-info: var(--coras-brand-info);\n    --coras-color-info-background: var(--coras-brand-info-background);\n    --coras-color-neutral-50: light-dark(var(--coras-brand-neutral-50), var(--coras-brand-neutral-900));\n    --coras-color-neutral-100: light-dark(var(--coras-brand-neutral-100), var(--coras-brand-neutral-800));\n    --coras-color-neutral-200: light-dark(var(--coras-brand-neutral-200), var(--coras-brand-neutral-700));\n    --coras-color-neutral-300: light-dark(var(--coras-brand-neutral-300), var(--coras-brand-neutral-600));\n    --coras-color-neutral-400: light-dark(var(--coras-brand-neutral-400), var(--coras-brand-neutral-500));\n    --coras-color-neutral-500: light-dark(var(--coras-brand-neutral-500), var(--coras-brand-neutral-400));\n    --coras-color-neutral-600: light-dark(var(--coras-brand-neutral-600), var(--coras-brand-neutral-300));\n    --coras-color-neutral-700: light-dark(var(--coras-brand-neutral-700), var(--coras-brand-neutral-200));\n    --coras-color-neutral-800: light-dark(var(--coras-brand-neutral-800), var(--coras-brand-neutral-100));\n    --coras-color-neutral-900: light-dark(var(--coras-brand-neutral-900), var(--coras-brand-neutral-50));\n    --coras-color-background: var(--coras-brand-page-background);\n    --coras-color-card: var(--coras-brand-card-background);\n    --coras-color-card-sunken: light-dark(var(--coras-brand-neutral-50), #0b0d10);\n    --coras-color-card-hover: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-card-active: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-active));\n    --coras-color-card-muted: light-dark(color-mix(in srgb, var(--coras-brand-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n    --coras-color-field: var(--coras-brand-field-background);\n    --coras-color-field-hover: color-mix(in srgb, var(--coras-color-field), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-menu: var(--coras-brand-menu-background);\n    --coras-color-menu-border: var(--coras-brand-menu-border);\n    --coras-color-menu-hover: color-mix(in srgb, var(--coras-color-menu), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-text: var(--coras-brand-text);\n    --coras-color-text-primary: var(--coras-brand-text);\n    --coras-color-text-muted: var(--coras-brand-text-muted);\n    --coras-color-text-disabled: var(--coras-brand-disabled);\n    --coras-state-overlay: light-dark(#000, #fff);\n    --coras-state-hover: 10%;\n    --coras-state-active: 18%;\n    --coras-color-main-button: var(--coras-brand-main-button);\n    --coras-color-main-button-hover: var(--coras-brand-main-button-hover);\n    --coras-color-main-button-pressed: var(--coras-brand-main-button-pressed);\n    --coras-color-main-button-text: var(--coras-brand-main-button-text);\n    --coras-color-main-button-border: var(--coras-brand-main-button-border);\n    --coras-color-secondary-button: var(--coras-brand-secondary-button);\n    --coras-color-secondary-button-border: var(--coras-brand-secondary-button-border);\n    --coras-color-secondary-button-hover: var(--coras-brand-secondary-button-hover);\n    --coras-color-secondary-button-pressed: var(--coras-brand-secondary-button-pressed);\n    --coras-color-secondary-button-text: var(--coras-brand-secondary-button-text);\n    --coras-color-text-button: var(--coras-brand-text-button);\n    --coras-color-link: var(--coras-brand-link);\n    --coras-color-icon: var(--coras-brand-body-icon);\n    --coras-color-card-border: var(--coras-brand-card-border);\n    --coras-color-divider: var(--coras-brand-divider);\n    --coras-color-field-border: var(--coras-brand-field-border);\n    --coras-color-footer-border: var(--coras-brand-footer-border);\n    --coras-color-focus-ring: var(--coras-brand-focus-ring);\n    --coras-color-scrim: var(--coras-brand-scrim);\n    --coras-font-family-sans: var(--coras-brand-font);\n    --coras-font-family-heading: var(--coras-brand-heading-font);\n    --coras-font-size-xxs: 0.625rem;\n    --coras-font-size-xs: 0.75rem;\n    --coras-font-size-sm: 0.875rem;\n    --coras-font-size-base: 1rem;\n    --coras-font-size-lg: 1.125rem;\n    --coras-font-size-xl: 1.25rem;\n    --coras-font-size-2xl: 1.5rem;\n    --coras-font-size-3xl: 2.25rem;\n    --coras-font-size-4xl: 3rem;\n    --coras-font-size-5xl: 3.5rem;\n    --coras-font-size-title: calc(var(--coras-font-size-3xl) * var(--coras-brand-heading-scale));\n    --coras-font-size-heading: calc(var(--coras-font-size-2xl) * var(--coras-brand-heading-scale));\n    --coras-font-weight-light: 300;\n    --coras-font-weight-normal: 400;\n    --coras-font-weight-medium: 500;\n    --coras-font-weight-semibold: 600;\n    --coras-font-weight-bold: 700;\n    --coras-radius-none: 0;\n    --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n    --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n    --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n    --coras-radius-lg: var(--coras-brand-radius);\n    --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n    --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n    --coras-radius-full: 9999px;\n    --coras-radius-control: 0.25rem;\n    --coras-radius-field: var(--coras-brand-field-radius);\n    --coras-radius-button: var(--coras-brand-button-radius);\n    --coras-radius-chip: var(--coras-brand-chip-radius);\n    --coras-radius-search: var(--coras-brand-search-radius);\n    --coras-shadow-sm: var(--coras-brand-soft-shadow);\n    --coras-shadow-md: var(--coras-brand-button-shadow);\n    --coras-shadow-lg: var(--coras-brand-card-shadow);\n    --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n    --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n    --coras-page-max-width: 950px;\n    --coras-container-max-width: 1368px;\n    --coras-footer-max-width: 1073px;\n    --coras-z-index-overlay: 1000;\n    --coras-navbar-padding: 1rem;\n    --coras-content-padding: 0 1rem;\n    --coras-footer-padding: 4rem 2rem;\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root], .coras-theme) {\n    --coras-base-text-color: var(--coras-color-text);\n    --coras-navbar-background: var(--coras-brand-navbar-background);\n    --coras-navbar-text-color: var(--coras-brand-navbar-text);\n    --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n    --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n    --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n    --coras-navbar-logo-height: var(--coras-brand-logo-height);\n    --coras-footer-background-color: var(--coras-brand-footer-background);\n    --coras-footer-text-color: var(--coras-brand-footer-text);\n    --coras-footer-link-color: var(--coras-brand-footer-link);\n    --coras-footer-border-top: 1px solid var(--coras-color-footer-border);\n    --coras-footer-padding-bottom: var(--coras-brand-footer-padding-bottom);\n    --coras-button-primary-background: var(--coras-color-main-button);\n    --coras-button-primary-text-color: var(--coras-color-main-button-text);\n    --coras-button-primary-background-hover: var(--coras-color-main-button-hover);\n    --coras-button-primary-background-active: var(--coras-color-main-button-pressed);\n    --coras-button-primary-border-color: var(--coras-color-main-button-border);\n    --coras-button-secondary-border-color: var(--coras-color-secondary-button-border);\n    --coras-input-field-background-color: var(--coras-color-field);\n    --coras-basket-accent-color: var(--coras-brand-secondary);\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root]) {\n    container: coras-page / inline-size;\n    max-width: 100%;\n    background-color: var(--coras-page-background, transparent);\n    color: var(--coras-base-text-color);\n  }\n  :where([data-coras-root]) > *:where(:not(style)) {\n    display: block;\n    fill: var(--coras-color-icon);\n  }\n}\n";
+export declare const CORAS_TOKENS_TEXT = "/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-page-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-focus-ring {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-card-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #fcfcff;\n}\n@property --coras-brand-field-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-menu-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-primary-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-text-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-button-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-chip-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-navbar-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-footer-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-error {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #c9224a;\n}\n@property --coras-brand-success {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #670c93;\n}\n\n@layer coras.palette {\n  :where([data-coras-root], .coras-theme) {\n    --coras-palette-primary-50: #fcfcff;\n    --coras-palette-primary-100: #fbfbff;\n    --coras-palette-primary-200: #eef0ff;\n    --coras-palette-primary-300: #dde1ff;\n    --coras-palette-primary-400: #5468ff;\n    --coras-palette-primary-500: #4657d4;\n    --coras-palette-primary-700: #323e99;\n    --coras-palette-secondary-50: #e8e8ec;\n    --coras-palette-secondary-100: #d0d2da;\n    --coras-palette-secondary-200: #b9bbc7;\n    --coras-palette-secondary-300: #a2a4b4;\n    --coras-palette-secondary-400: #1c2355;\n    --coras-palette-secondary-500: #161c44;\n    --coras-palette-secondary-700: #121636;\n    --coras-palette-neutral-50: #f5f5f5;\n    --coras-palette-neutral-100: #eeeeee;\n    --coras-palette-neutral-200: #e6e6e6;\n    --coras-palette-neutral-300: #dddddd;\n    --coras-palette-neutral-400: #cccccc;\n    --coras-palette-neutral-500: #aaaaaa;\n    --coras-palette-neutral-600: #888888;\n    --coras-palette-neutral-700: #666666;\n    --coras-palette-neutral-800: #444444;\n    --coras-palette-neutral-900: #292929;\n    --coras-palette-error-50: #fae9ed;\n    --coras-palette-error-500: #c9224a;\n    --coras-palette-error-700: #a11b3b;\n    --coras-palette-error-900: #79142c;\n    --coras-palette-info-50: #f0e7f4;\n    --coras-palette-info-500: #670c93;\n    --coras-palette-info-700: #520a76;\n    --coras-palette-info-900: #3e0758;\n    --coras-palette-success-50: #e6f7f4;\n    --coras-palette-success-500: #00ad8f;\n    --coras-palette-success-700: #008a72;\n    --coras-palette-success-900: #006856;\n    --coras-palette-warning-50: #fdf4e8;\n    --coras-palette-warning-500: #ed8f1c;\n    --coras-palette-warning-700: #be7216;\n    --coras-palette-warning-900: #8e5611;\n    --coras-palette-pink-500: #ff2d55;\n    --coras-palette-black: #000000;\n    --coras-palette-white: #ffffff;\n  }\n}\n\n@layer coras.brand {\n  :where([data-coras-root], .coras-theme) {\n    color-scheme: light;\n    --coras-brand-primary: var(--coras-palette-primary-500);\n    --coras-brand-secondary: var(--coras-palette-secondary-500);\n    --coras-brand-page-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n    --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n    --coras-brand-link: var(--coras-brand-text-button);\n    --coras-brand-icon: var(--coras-brand-text);\n    --coras-brand-focus-ring: var(--coras-brand-primary);\n    --coras-brand-scrim: var(--coras-palette-black);\n    --coras-brand-card-background: light-dark(var(--coras-palette-primary-50), #191c22);\n    --coras-brand-card-border: light-dark(var(--coras-palette-neutral-200), #444444);\n    --coras-brand-field-background: light-dark(var(--coras-brand-page-background), #101216);\n    --coras-brand-field-border: light-dark(var(--coras-palette-neutral-400), #aaaaaa);\n    --coras-brand-menu-background: light-dark(var(--coras-brand-page-background), #101216);\n    --coras-brand-menu-border: var(--coras-brand-card-border);\n    --coras-brand-divider: light-dark(var(--coras-palette-neutral-200), #292929);\n    --coras-brand-card-shadow: 0px 24px 24px rgba(0, 0, 0, 0.04);\n    --coras-brand-soft-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04);\n    --coras-brand-primary-button: var(--coras-brand-primary);\n    --coras-brand-primary-button-text: #ffffff;\n    --coras-brand-primary-button-hover: light-dark(#3f4ebf, #5968d8);\n    --coras-brand-primary-button-pressed: light-dark(#3947ae, #6775dc);\n    --coras-brand-secondary-button: var(--coras-brand-secondary);\n    --coras-brand-secondary-button-text: #ffffff;\n    --coras-brand-secondary-button-hover: light-dark(#14193d, #2d3357);\n    --coras-brand-secondary-button-pressed: light-dark(#121738, #404566);\n    --coras-brand-text-button: light-dark(var(--coras-brand-primary), #6279f9);\n    --coras-brand-primary-button-border: transparent;\n    --coras-brand-secondary-button-border: transparent;\n    --coras-brand-disabled: light-dark(var(--coras-palette-neutral-500), #cccccc);\n    --coras-brand-button-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);\n    --coras-brand-button-hover-on-light-fill: 20%;\n    --coras-brand-button-hover-on-dark-fill: 20%;\n    --coras-brand-radius: 1.5rem;\n    --coras-brand-button-radius: var(--coras-brand-radius);\n    --coras-brand-chip-radius: var(--coras-brand-radius);\n    --coras-brand-field-radius: 0.5rem;\n    --coras-brand-search-radius: 100px;\n    --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --coras-brand-heading-font: var(--coras-brand-font);\n    --coras-brand-heading-scale: 1;\n    --coras-brand-logo-height: 2rem;\n    --coras-brand-navbar-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-navbar-background-image: none;\n    --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n    --coras-brand-navbar-border: var(--coras-brand-navbar-background);\n    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n    --coras-brand-footer-background: light-dark(var(--coras-palette-neutral-200), #191c22);\n    --coras-brand-footer-background-image: none;\n    --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-footer-link: var(--coras-brand-footer-text);\n    --coras-brand-footer-border: var(--coras-brand-footer-background);\n    --coras-brand-footer-padding-bottom: 2rem;\n    --coras-brand-error: light-dark(var(--coras-palette-error-500), #f5748a);\n    --coras-brand-error-background: light-dark(var(--coras-palette-error-50), #442e36);\n    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n    --coras-brand-success-background: light-dark(var(--coras-palette-success-50), #26403f);\n    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n    --coras-brand-warning-background: light-dark(var(--coras-palette-warning-50), #43382e);\n    --coras-brand-info: light-dark(var(--coras-palette-info-500), #ba86e1);\n    --coras-brand-info-background: light-dark(var(--coras-palette-info-50), #373045);\n    --coras-brand-primary-tint: light-dark(var(--coras-palette-primary-50), #141823);\n    --coras-brand-secondary-tint: light-dark(var(--coras-palette-secondary-50), #10131a);\n    --coras-brand-neutral-50: var(--coras-palette-neutral-50);\n    --coras-brand-neutral-100: var(--coras-palette-neutral-100);\n    --coras-brand-neutral-200: var(--coras-palette-neutral-200);\n    --coras-brand-neutral-300: var(--coras-palette-neutral-300);\n    --coras-brand-neutral-400: var(--coras-palette-neutral-400);\n    --coras-brand-neutral-500: var(--coras-palette-neutral-500);\n    --coras-brand-neutral-600: var(--coras-palette-neutral-600);\n    --coras-brand-neutral-700: var(--coras-palette-neutral-700);\n    --coras-brand-neutral-800: var(--coras-palette-neutral-800);\n    --coras-brand-neutral-900: var(--coras-palette-neutral-900);\n  }\n}\n\n@layer coras.semantic {\n  :where([data-coras-root], .coras-theme) {\n    --coras-color-primary: var(--coras-brand-primary);\n    --coras-color-primary-tint: var(--coras-brand-primary-tint);\n    --coras-color-secondary: var(--coras-brand-secondary);\n    --coras-color-secondary-tint: var(--coras-brand-secondary-tint);\n    --coras-color-error: var(--coras-brand-error);\n    --coras-color-error-background: var(--coras-brand-error-background);\n    --coras-color-success: var(--coras-brand-success);\n    --coras-color-success-background: var(--coras-brand-success-background);\n    --coras-color-warning: var(--coras-brand-warning);\n    --coras-color-warning-background: var(--coras-brand-warning-background);\n    --coras-color-info: var(--coras-brand-info);\n    --coras-color-info-background: var(--coras-brand-info-background);\n    --coras-color-neutral-50: light-dark(var(--coras-brand-neutral-50), var(--coras-brand-neutral-900));\n    --coras-color-neutral-100: light-dark(var(--coras-brand-neutral-100), var(--coras-brand-neutral-800));\n    --coras-color-neutral-200: light-dark(var(--coras-brand-neutral-200), var(--coras-brand-neutral-700));\n    --coras-color-neutral-300: light-dark(var(--coras-brand-neutral-300), var(--coras-brand-neutral-600));\n    --coras-color-neutral-400: light-dark(var(--coras-brand-neutral-400), var(--coras-brand-neutral-500));\n    --coras-color-neutral-500: light-dark(var(--coras-brand-neutral-500), var(--coras-brand-neutral-400));\n    --coras-color-neutral-600: light-dark(var(--coras-brand-neutral-600), var(--coras-brand-neutral-300));\n    --coras-color-neutral-700: light-dark(var(--coras-brand-neutral-700), var(--coras-brand-neutral-200));\n    --coras-color-neutral-800: light-dark(var(--coras-brand-neutral-800), var(--coras-brand-neutral-100));\n    --coras-color-neutral-900: light-dark(var(--coras-brand-neutral-900), var(--coras-brand-neutral-50));\n    --coras-color-background: var(--coras-brand-page-background);\n    --coras-color-card: var(--coras-brand-card-background);\n    --coras-color-card-sunken: light-dark(var(--coras-brand-neutral-50), #0b0d10);\n    --coras-color-card-hover: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-card-active: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-active));\n    --coras-color-card-muted: light-dark(color-mix(in srgb, var(--coras-brand-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n    --coras-color-field: var(--coras-brand-field-background);\n    --coras-color-field-hover: color-mix(in srgb, var(--coras-color-field), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-menu: var(--coras-brand-menu-background);\n    --coras-color-menu-border: var(--coras-brand-menu-border);\n    --coras-color-menu-hover: color-mix(in srgb, var(--coras-color-menu), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-text: var(--coras-brand-text);\n    --coras-color-text-primary: var(--coras-brand-text);\n    --coras-color-text-muted: var(--coras-brand-text-muted);\n    --coras-color-text-disabled: var(--coras-brand-disabled);\n    --coras-state-overlay: light-dark(#000, #fff);\n    --coras-state-hover: 10%;\n    --coras-state-active: 18%;\n    --coras-color-primary-button: var(--coras-brand-primary-button);\n    --coras-color-primary-button-hover: var(--coras-brand-primary-button-hover);\n    --coras-color-primary-button-pressed: var(--coras-brand-primary-button-pressed);\n    --coras-color-primary-button-text: var(--coras-brand-primary-button-text);\n    --coras-color-primary-button-border: var(--coras-brand-primary-button-border);\n    --coras-color-secondary-button: var(--coras-brand-secondary-button);\n    --coras-color-secondary-button-border: var(--coras-brand-secondary-button-border);\n    --coras-color-secondary-button-hover: var(--coras-brand-secondary-button-hover);\n    --coras-color-secondary-button-pressed: var(--coras-brand-secondary-button-pressed);\n    --coras-color-secondary-button-text: var(--coras-brand-secondary-button-text);\n    --coras-color-text-button: var(--coras-brand-text-button);\n    --coras-color-link: var(--coras-brand-link);\n    --coras-color-icon: var(--coras-brand-icon);\n    --coras-color-card-border: var(--coras-brand-card-border);\n    --coras-color-divider: var(--coras-brand-divider);\n    --coras-color-field-border: var(--coras-brand-field-border);\n    --coras-color-footer-border: var(--coras-brand-footer-border);\n    --coras-color-focus-ring: var(--coras-brand-focus-ring);\n    --coras-color-scrim: var(--coras-brand-scrim);\n    --coras-font-family-sans: var(--coras-brand-font);\n    --coras-font-family-heading: var(--coras-brand-heading-font);\n    --coras-font-size-xxs: 0.625rem;\n    --coras-font-size-xs: 0.75rem;\n    --coras-font-size-sm: 0.875rem;\n    --coras-font-size-base: 1rem;\n    --coras-font-size-lg: 1.125rem;\n    --coras-font-size-xl: 1.25rem;\n    --coras-font-size-2xl: 1.5rem;\n    --coras-font-size-3xl: 2.25rem;\n    --coras-font-size-4xl: 3rem;\n    --coras-font-size-5xl: 3.5rem;\n    --coras-font-size-title: calc(var(--coras-font-size-3xl) * var(--coras-brand-heading-scale));\n    --coras-font-size-heading: calc(var(--coras-font-size-2xl) * var(--coras-brand-heading-scale));\n    --coras-font-weight-light: 300;\n    --coras-font-weight-normal: 400;\n    --coras-font-weight-medium: 500;\n    --coras-font-weight-semibold: 600;\n    --coras-font-weight-bold: 700;\n    --coras-radius-none: 0;\n    --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n    --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n    --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n    --coras-radius-lg: var(--coras-brand-radius);\n    --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n    --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n    --coras-radius-full: 9999px;\n    --coras-radius-control: 0.25rem;\n    --coras-radius-field: var(--coras-brand-field-radius);\n    --coras-radius-button: var(--coras-brand-button-radius);\n    --coras-radius-chip: var(--coras-brand-chip-radius);\n    --coras-radius-search: var(--coras-brand-search-radius);\n    --coras-shadow-sm: var(--coras-brand-soft-shadow);\n    --coras-shadow-md: var(--coras-brand-button-shadow);\n    --coras-shadow-lg: var(--coras-brand-card-shadow);\n    --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n    --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n    --coras-page-max-width: 950px;\n    --coras-container-max-width: 1368px;\n    --coras-footer-max-width: 1073px;\n    --coras-z-index-overlay: 1000;\n    --coras-navbar-padding: 1rem;\n    --coras-content-padding: 0 1rem;\n    --coras-footer-padding: 4rem 2rem;\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root], .coras-theme) {\n    --coras-base-text-color: var(--coras-color-text);\n    --coras-navbar-background: var(--coras-brand-navbar-background);\n    --coras-navbar-background-image: var(--coras-brand-navbar-background-image);\n    --coras-navbar-background-image-dark: var(--coras-brand-navbar-background-image-dark, var(--coras-brand-navbar-background-image));\n    --coras-navbar-text-color: var(--coras-brand-navbar-text);\n    --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n    --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n    --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n    --coras-navbar-logo-height: var(--coras-brand-logo-height);\n    --coras-footer-background-color: var(--coras-brand-footer-background);\n    --coras-footer-background-image: var(--coras-brand-footer-background-image);\n    --coras-footer-background-image-dark: var(--coras-brand-footer-background-image-dark, var(--coras-brand-footer-background-image));\n    --coras-footer-text-color: var(--coras-brand-footer-text);\n    --coras-footer-link-color: var(--coras-brand-footer-link);\n    --coras-footer-border-top: 1px solid var(--coras-color-footer-border);\n    --coras-footer-padding-bottom: var(--coras-brand-footer-padding-bottom);\n    --coras-button-primary-background: var(--coras-color-primary-button);\n    --coras-button-primary-text-color: var(--coras-color-primary-button-text);\n    --coras-button-primary-background-hover: var(--coras-color-primary-button-hover);\n    --coras-button-primary-background-active: var(--coras-color-primary-button-pressed);\n    --coras-button-primary-border-color: var(--coras-color-primary-button-border);\n    --coras-button-secondary-border-color: var(--coras-color-secondary-button-border);\n    --coras-input-field-background-color: var(--coras-color-field);\n    --coras-basket-accent-color: var(--coras-brand-secondary);\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root]) {\n    container: coras-page / inline-size;\n    max-width: 100%;\n    background-color: var(--coras-page-background, transparent);\n    color: var(--coras-base-text-color);\n  }\n  :where([data-coras-root]) > *:where(:not(style)) {\n    display: block;\n    fill: var(--coras-color-icon);\n  }\n}\n";
 /**
  * Ensure the token stylesheet is present in `root` (a `Document` or
  * `ShadowRoot`). Idempotent: adopting the same root twice is a no-op, and the

package/dist/styles/tokens.generated.d.ts

@@ -1 +1 @@
-export declare const CORAS_TOKENS_CSS = "/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-page-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-body-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-focus-ring {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-card-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #fcfcff;\n}\n@property --coras-brand-field-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-menu-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-main-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-text-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-button-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-chip-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-navbar-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-footer-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-error {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #c9224a;\n}\n@property --coras-brand-success {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #670c93;\n}\n\n@layer coras.palette {\n  :where([data-coras-root], .coras-theme) {\n    --coras-palette-primary-50: #fcfcff;\n    --coras-palette-primary-100: #fbfbff;\n    --coras-palette-primary-200: #eef0ff;\n    --coras-palette-primary-300: #dde1ff;\n    --coras-palette-primary-400: #5468ff;\n    --coras-palette-primary-500: #4657d4;\n    --coras-palette-primary-700: #323e99;\n    --coras-palette-secondary-50: #e8e8ec;\n    --coras-palette-secondary-100: #d0d2da;\n    --coras-palette-secondary-200: #b9bbc7;\n    --coras-palette-secondary-300: #a2a4b4;\n    --coras-palette-secondary-400: #1c2355;\n    --coras-palette-secondary-500: #161c44;\n    --coras-palette-secondary-700: #121636;\n    --coras-palette-neutral-50: #f5f5f5;\n    --coras-palette-neutral-100: #eeeeee;\n    --coras-palette-neutral-200: #e6e6e6;\n    --coras-palette-neutral-300: #dddddd;\n    --coras-palette-neutral-400: #cccccc;\n    --coras-palette-neutral-500: #aaaaaa;\n    --coras-palette-neutral-600: #888888;\n    --coras-palette-neutral-700: #666666;\n    --coras-palette-neutral-800: #444444;\n    --coras-palette-neutral-900: #292929;\n    --coras-palette-error-50: #fae9ed;\n    --coras-palette-error-500: #c9224a;\n    --coras-palette-error-700: #a11b3b;\n    --coras-palette-error-900: #79142c;\n    --coras-palette-info-50: #f0e7f4;\n    --coras-palette-info-500: #670c93;\n    --coras-palette-info-700: #520a76;\n    --coras-palette-info-900: #3e0758;\n    --coras-palette-success-50: #e6f7f4;\n    --coras-palette-success-500: #00ad8f;\n    --coras-palette-success-700: #008a72;\n    --coras-palette-success-900: #006856;\n    --coras-palette-warning-50: #fdf4e8;\n    --coras-palette-warning-500: #ed8f1c;\n    --coras-palette-warning-700: #be7216;\n    --coras-palette-warning-900: #8e5611;\n    --coras-palette-pink-500: #ff2d55;\n    --coras-palette-black: #000000;\n    --coras-palette-white: #ffffff;\n  }\n}\n\n@layer coras.brand {\n  :where([data-coras-root], .coras-theme) {\n    color-scheme: light;\n    --coras-brand-primary: var(--coras-palette-primary-500);\n    --coras-brand-secondary: var(--coras-palette-secondary-500);\n    --coras-brand-page-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n    --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n    --coras-brand-link: var(--coras-brand-text-button);\n    --coras-brand-body-icon: var(--coras-brand-text);\n    --coras-brand-focus-ring: var(--coras-brand-primary);\n    --coras-brand-scrim: var(--coras-palette-black);\n    --coras-brand-card-background: light-dark(var(--coras-palette-primary-50), #191c22);\n    --coras-brand-card-border: light-dark(var(--coras-palette-neutral-200), #444444);\n    --coras-brand-field-background: light-dark(var(--coras-brand-page-background), #101216);\n    --coras-brand-field-border: light-dark(var(--coras-palette-neutral-400), #aaaaaa);\n    --coras-brand-menu-background: light-dark(var(--coras-brand-page-background), #101216);\n    --coras-brand-menu-border: var(--coras-brand-card-border);\n    --coras-brand-divider: light-dark(var(--coras-palette-neutral-200), #292929);\n    --coras-brand-card-shadow: 0px 24px 24px rgba(0, 0, 0, 0.04);\n    --coras-brand-soft-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04);\n    --coras-brand-main-button: var(--coras-brand-primary);\n    --coras-brand-main-button-text: #ffffff;\n    --coras-brand-main-button-hover: light-dark(#3f4ebf, #5968d8);\n    --coras-brand-main-button-pressed: light-dark(#3947ae, #6775dc);\n    --coras-brand-secondary-button: var(--coras-brand-secondary);\n    --coras-brand-secondary-button-text: #ffffff;\n    --coras-brand-secondary-button-hover: light-dark(#14193d, #2d3357);\n    --coras-brand-secondary-button-pressed: light-dark(#121738, #404566);\n    --coras-brand-text-button: light-dark(var(--coras-brand-primary), #6279f9);\n    --coras-brand-main-button-border: transparent;\n    --coras-brand-secondary-button-border: transparent;\n    --coras-brand-disabled: light-dark(var(--coras-palette-neutral-500), #cccccc);\n    --coras-brand-button-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);\n    --coras-brand-button-hover-light: 20%;\n    --coras-brand-button-hover-dark: 20%;\n    --coras-brand-radius: 1.5rem;\n    --coras-brand-button-radius: var(--coras-brand-radius);\n    --coras-brand-chip-radius: var(--coras-brand-radius);\n    --coras-brand-field-radius: 0.5rem;\n    --coras-brand-search-radius: 100px;\n    --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --coras-brand-heading-font: var(--coras-brand-font);\n    --coras-brand-heading-scale: 1;\n    --coras-brand-logo-height: 2rem;\n    --coras-brand-navbar-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n    --coras-brand-navbar-border: var(--coras-brand-navbar-background);\n    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n    --coras-brand-footer-background: light-dark(var(--coras-palette-neutral-200), #191c22);\n    --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-footer-link: var(--coras-brand-footer-text);\n    --coras-brand-footer-border: var(--coras-brand-footer-background);\n    --coras-brand-footer-padding-bottom: 2rem;\n    --coras-brand-error: light-dark(var(--coras-palette-error-500), #f5748a);\n    --coras-brand-error-background: light-dark(var(--coras-palette-error-50), #442e36);\n    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n    --coras-brand-success-background: light-dark(var(--coras-palette-success-50), #26403f);\n    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n    --coras-brand-warning-background: light-dark(var(--coras-palette-warning-50), #43382e);\n    --coras-brand-info: light-dark(var(--coras-palette-info-500), #ba86e1);\n    --coras-brand-info-background: light-dark(var(--coras-palette-info-50), #373045);\n    --coras-brand-primary-tint: light-dark(var(--coras-palette-primary-50), #141823);\n    --coras-brand-secondary-tint: light-dark(var(--coras-palette-secondary-50), #10131a);\n    --coras-brand-neutral-50: var(--coras-palette-neutral-50);\n    --coras-brand-neutral-100: var(--coras-palette-neutral-100);\n    --coras-brand-neutral-200: var(--coras-palette-neutral-200);\n    --coras-brand-neutral-300: var(--coras-palette-neutral-300);\n    --coras-brand-neutral-400: var(--coras-palette-neutral-400);\n    --coras-brand-neutral-500: var(--coras-palette-neutral-500);\n    --coras-brand-neutral-600: var(--coras-palette-neutral-600);\n    --coras-brand-neutral-700: var(--coras-palette-neutral-700);\n    --coras-brand-neutral-800: var(--coras-palette-neutral-800);\n    --coras-brand-neutral-900: var(--coras-palette-neutral-900);\n  }\n}\n\n@layer coras.semantic {\n  :where([data-coras-root], .coras-theme) {\n    --coras-color-primary: var(--coras-brand-primary);\n    --coras-color-primary-tint: var(--coras-brand-primary-tint);\n    --coras-color-secondary: var(--coras-brand-secondary);\n    --coras-color-secondary-tint: var(--coras-brand-secondary-tint);\n    --coras-color-error: var(--coras-brand-error);\n    --coras-color-error-background: var(--coras-brand-error-background);\n    --coras-color-success: var(--coras-brand-success);\n    --coras-color-success-background: var(--coras-brand-success-background);\n    --coras-color-warning: var(--coras-brand-warning);\n    --coras-color-warning-background: var(--coras-brand-warning-background);\n    --coras-color-info: var(--coras-brand-info);\n    --coras-color-info-background: var(--coras-brand-info-background);\n    --coras-color-neutral-50: light-dark(var(--coras-brand-neutral-50), var(--coras-brand-neutral-900));\n    --coras-color-neutral-100: light-dark(var(--coras-brand-neutral-100), var(--coras-brand-neutral-800));\n    --coras-color-neutral-200: light-dark(var(--coras-brand-neutral-200), var(--coras-brand-neutral-700));\n    --coras-color-neutral-300: light-dark(var(--coras-brand-neutral-300), var(--coras-brand-neutral-600));\n    --coras-color-neutral-400: light-dark(var(--coras-brand-neutral-400), var(--coras-brand-neutral-500));\n    --coras-color-neutral-500: light-dark(var(--coras-brand-neutral-500), var(--coras-brand-neutral-400));\n    --coras-color-neutral-600: light-dark(var(--coras-brand-neutral-600), var(--coras-brand-neutral-300));\n    --coras-color-neutral-700: light-dark(var(--coras-brand-neutral-700), var(--coras-brand-neutral-200));\n    --coras-color-neutral-800: light-dark(var(--coras-brand-neutral-800), var(--coras-brand-neutral-100));\n    --coras-color-neutral-900: light-dark(var(--coras-brand-neutral-900), var(--coras-brand-neutral-50));\n    --coras-color-background: var(--coras-brand-page-background);\n    --coras-color-card: var(--coras-brand-card-background);\n    --coras-color-card-sunken: light-dark(var(--coras-brand-neutral-50), #0b0d10);\n    --coras-color-card-hover: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-card-active: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-active));\n    --coras-color-card-muted: light-dark(color-mix(in srgb, var(--coras-brand-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n    --coras-color-field: var(--coras-brand-field-background);\n    --coras-color-field-hover: color-mix(in srgb, var(--coras-color-field), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-menu: var(--coras-brand-menu-background);\n    --coras-color-menu-border: var(--coras-brand-menu-border);\n    --coras-color-menu-hover: color-mix(in srgb, var(--coras-color-menu), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-text: var(--coras-brand-text);\n    --coras-color-text-primary: var(--coras-brand-text);\n    --coras-color-text-muted: var(--coras-brand-text-muted);\n    --coras-color-text-disabled: var(--coras-brand-disabled);\n    --coras-state-overlay: light-dark(#000, #fff);\n    --coras-state-hover: 10%;\n    --coras-state-active: 18%;\n    --coras-color-main-button: var(--coras-brand-main-button);\n    --coras-color-main-button-hover: var(--coras-brand-main-button-hover);\n    --coras-color-main-button-pressed: var(--coras-brand-main-button-pressed);\n    --coras-color-main-button-text: var(--coras-brand-main-button-text);\n    --coras-color-main-button-border: var(--coras-brand-main-button-border);\n    --coras-color-secondary-button: var(--coras-brand-secondary-button);\n    --coras-color-secondary-button-border: var(--coras-brand-secondary-button-border);\n    --coras-color-secondary-button-hover: var(--coras-brand-secondary-button-hover);\n    --coras-color-secondary-button-pressed: var(--coras-brand-secondary-button-pressed);\n    --coras-color-secondary-button-text: var(--coras-brand-secondary-button-text);\n    --coras-color-text-button: var(--coras-brand-text-button);\n    --coras-color-link: var(--coras-brand-link);\n    --coras-color-icon: var(--coras-brand-body-icon);\n    --coras-color-card-border: var(--coras-brand-card-border);\n    --coras-color-divider: var(--coras-brand-divider);\n    --coras-color-field-border: var(--coras-brand-field-border);\n    --coras-color-footer-border: var(--coras-brand-footer-border);\n    --coras-color-focus-ring: var(--coras-brand-focus-ring);\n    --coras-color-scrim: var(--coras-brand-scrim);\n    --coras-font-family-sans: var(--coras-brand-font);\n    --coras-font-family-heading: var(--coras-brand-heading-font);\n    --coras-font-size-xxs: 0.625rem;\n    --coras-font-size-xs: 0.75rem;\n    --coras-font-size-sm: 0.875rem;\n    --coras-font-size-base: 1rem;\n    --coras-font-size-lg: 1.125rem;\n    --coras-font-size-xl: 1.25rem;\n    --coras-font-size-2xl: 1.5rem;\n    --coras-font-size-3xl: 2.25rem;\n    --coras-font-size-4xl: 3rem;\n    --coras-font-size-5xl: 3.5rem;\n    --coras-font-size-title: calc(var(--coras-font-size-3xl) * var(--coras-brand-heading-scale));\n    --coras-font-size-heading: calc(var(--coras-font-size-2xl) * var(--coras-brand-heading-scale));\n    --coras-font-weight-light: 300;\n    --coras-font-weight-normal: 400;\n    --coras-font-weight-medium: 500;\n    --coras-font-weight-semibold: 600;\n    --coras-font-weight-bold: 700;\n    --coras-radius-none: 0;\n    --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n    --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n    --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n    --coras-radius-lg: var(--coras-brand-radius);\n    --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n    --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n    --coras-radius-full: 9999px;\n    --coras-radius-control: 0.25rem;\n    --coras-radius-field: var(--coras-brand-field-radius);\n    --coras-radius-button: var(--coras-brand-button-radius);\n    --coras-radius-chip: var(--coras-brand-chip-radius);\n    --coras-radius-search: var(--coras-brand-search-radius);\n    --coras-shadow-sm: var(--coras-brand-soft-shadow);\n    --coras-shadow-md: var(--coras-brand-button-shadow);\n    --coras-shadow-lg: var(--coras-brand-card-shadow);\n    --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n    --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n    --coras-page-max-width: 950px;\n    --coras-container-max-width: 1368px;\n    --coras-footer-max-width: 1073px;\n    --coras-z-index-overlay: 1000;\n    --coras-navbar-padding: 1rem;\n    --coras-content-padding: 0 1rem;\n    --coras-footer-padding: 4rem 2rem;\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root], .coras-theme) {\n    --coras-base-text-color: var(--coras-color-text);\n    --coras-navbar-background: var(--coras-brand-navbar-background);\n    --coras-navbar-text-color: var(--coras-brand-navbar-text);\n    --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n    --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n    --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n    --coras-navbar-logo-height: var(--coras-brand-logo-height);\n    --coras-footer-background-color: var(--coras-brand-footer-background);\n    --coras-footer-text-color: var(--coras-brand-footer-text);\n    --coras-footer-link-color: var(--coras-brand-footer-link);\n    --coras-footer-border-top: 1px solid var(--coras-color-footer-border);\n    --coras-footer-padding-bottom: var(--coras-brand-footer-padding-bottom);\n    --coras-button-primary-background: var(--coras-color-main-button);\n    --coras-button-primary-text-color: var(--coras-color-main-button-text);\n    --coras-button-primary-background-hover: var(--coras-color-main-button-hover);\n    --coras-button-primary-background-active: var(--coras-color-main-button-pressed);\n    --coras-button-primary-border-color: var(--coras-color-main-button-border);\n    --coras-button-secondary-border-color: var(--coras-color-secondary-button-border);\n    --coras-input-field-background-color: var(--coras-color-field);\n    --coras-basket-accent-color: var(--coras-brand-secondary);\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root]) {\n    container: coras-page / inline-size;\n    max-width: 100%;\n    background-color: var(--coras-page-background, transparent);\n    color: var(--coras-base-text-color);\n  }\n  :where([data-coras-root]) > *:where(:not(style)) {\n    display: block;\n    fill: var(--coras-color-icon);\n  }\n}\n";
+export declare const CORAS_TOKENS_CSS = "/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-page-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-focus-ring {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-card-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #fcfcff;\n}\n@property --coras-brand-field-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-menu-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-primary-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-text-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-button-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-chip-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-navbar-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-footer-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-error {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #c9224a;\n}\n@property --coras-brand-success {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #670c93;\n}\n\n@layer coras.palette {\n  :where([data-coras-root], .coras-theme) {\n    --coras-palette-primary-50: #fcfcff;\n    --coras-palette-primary-100: #fbfbff;\n    --coras-palette-primary-200: #eef0ff;\n    --coras-palette-primary-300: #dde1ff;\n    --coras-palette-primary-400: #5468ff;\n    --coras-palette-primary-500: #4657d4;\n    --coras-palette-primary-700: #323e99;\n    --coras-palette-secondary-50: #e8e8ec;\n    --coras-palette-secondary-100: #d0d2da;\n    --coras-palette-secondary-200: #b9bbc7;\n    --coras-palette-secondary-300: #a2a4b4;\n    --coras-palette-secondary-400: #1c2355;\n    --coras-palette-secondary-500: #161c44;\n    --coras-palette-secondary-700: #121636;\n    --coras-palette-neutral-50: #f5f5f5;\n    --coras-palette-neutral-100: #eeeeee;\n    --coras-palette-neutral-200: #e6e6e6;\n    --coras-palette-neutral-300: #dddddd;\n    --coras-palette-neutral-400: #cccccc;\n    --coras-palette-neutral-500: #aaaaaa;\n    --coras-palette-neutral-600: #888888;\n    --coras-palette-neutral-700: #666666;\n    --coras-palette-neutral-800: #444444;\n    --coras-palette-neutral-900: #292929;\n    --coras-palette-error-50: #fae9ed;\n    --coras-palette-error-500: #c9224a;\n    --coras-palette-error-700: #a11b3b;\n    --coras-palette-error-900: #79142c;\n    --coras-palette-info-50: #f0e7f4;\n    --coras-palette-info-500: #670c93;\n    --coras-palette-info-700: #520a76;\n    --coras-palette-info-900: #3e0758;\n    --coras-palette-success-50: #e6f7f4;\n    --coras-palette-success-500: #00ad8f;\n    --coras-palette-success-700: #008a72;\n    --coras-palette-success-900: #006856;\n    --coras-palette-warning-50: #fdf4e8;\n    --coras-palette-warning-500: #ed8f1c;\n    --coras-palette-warning-700: #be7216;\n    --coras-palette-warning-900: #8e5611;\n    --coras-palette-pink-500: #ff2d55;\n    --coras-palette-black: #000000;\n    --coras-palette-white: #ffffff;\n  }\n}\n\n@layer coras.brand {\n  :where([data-coras-root], .coras-theme) {\n    color-scheme: light;\n    --coras-brand-primary: var(--coras-palette-primary-500);\n    --coras-brand-secondary: var(--coras-palette-secondary-500);\n    --coras-brand-page-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n    --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n    --coras-brand-link: var(--coras-brand-text-button);\n    --coras-brand-icon: var(--coras-brand-text);\n    --coras-brand-focus-ring: var(--coras-brand-primary);\n    --coras-brand-scrim: var(--coras-palette-black);\n    --coras-brand-card-background: light-dark(var(--coras-palette-primary-50), #191c22);\n    --coras-brand-card-border: light-dark(var(--coras-palette-neutral-200), #444444);\n    --coras-brand-field-background: light-dark(var(--coras-brand-page-background), #101216);\n    --coras-brand-field-border: light-dark(var(--coras-palette-neutral-400), #aaaaaa);\n    --coras-brand-menu-background: light-dark(var(--coras-brand-page-background), #101216);\n    --coras-brand-menu-border: var(--coras-brand-card-border);\n    --coras-brand-divider: light-dark(var(--coras-palette-neutral-200), #292929);\n    --coras-brand-card-shadow: 0px 24px 24px rgba(0, 0, 0, 0.04);\n    --coras-brand-soft-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04);\n    --coras-brand-primary-button: var(--coras-brand-primary);\n    --coras-brand-primary-button-text: #ffffff;\n    --coras-brand-primary-button-hover: light-dark(#3f4ebf, #5968d8);\n    --coras-brand-primary-button-pressed: light-dark(#3947ae, #6775dc);\n    --coras-brand-secondary-button: var(--coras-brand-secondary);\n    --coras-brand-secondary-button-text: #ffffff;\n    --coras-brand-secondary-button-hover: light-dark(#14193d, #2d3357);\n    --coras-brand-secondary-button-pressed: light-dark(#121738, #404566);\n    --coras-brand-text-button: light-dark(var(--coras-brand-primary), #6279f9);\n    --coras-brand-primary-button-border: transparent;\n    --coras-brand-secondary-button-border: transparent;\n    --coras-brand-disabled: light-dark(var(--coras-palette-neutral-500), #cccccc);\n    --coras-brand-button-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);\n    --coras-brand-button-hover-on-light-fill: 20%;\n    --coras-brand-button-hover-on-dark-fill: 20%;\n    --coras-brand-radius: 1.5rem;\n    --coras-brand-button-radius: var(--coras-brand-radius);\n    --coras-brand-chip-radius: var(--coras-brand-radius);\n    --coras-brand-field-radius: 0.5rem;\n    --coras-brand-search-radius: 100px;\n    --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --coras-brand-heading-font: var(--coras-brand-font);\n    --coras-brand-heading-scale: 1;\n    --coras-brand-logo-height: 2rem;\n    --coras-brand-navbar-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-navbar-background-image: none;\n    --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n    --coras-brand-navbar-border: var(--coras-brand-navbar-background);\n    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n    --coras-brand-footer-background: light-dark(var(--coras-palette-neutral-200), #191c22);\n    --coras-brand-footer-background-image: none;\n    --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-footer-link: var(--coras-brand-footer-text);\n    --coras-brand-footer-border: var(--coras-brand-footer-background);\n    --coras-brand-footer-padding-bottom: 2rem;\n    --coras-brand-error: light-dark(var(--coras-palette-error-500), #f5748a);\n    --coras-brand-error-background: light-dark(var(--coras-palette-error-50), #442e36);\n    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n    --coras-brand-success-background: light-dark(var(--coras-palette-success-50), #26403f);\n    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n    --coras-brand-warning-background: light-dark(var(--coras-palette-warning-50), #43382e);\n    --coras-brand-info: light-dark(var(--coras-palette-info-500), #ba86e1);\n    --coras-brand-info-background: light-dark(var(--coras-palette-info-50), #373045);\n    --coras-brand-primary-tint: light-dark(var(--coras-palette-primary-50), #141823);\n    --coras-brand-secondary-tint: light-dark(var(--coras-palette-secondary-50), #10131a);\n    --coras-brand-neutral-50: var(--coras-palette-neutral-50);\n    --coras-brand-neutral-100: var(--coras-palette-neutral-100);\n    --coras-brand-neutral-200: var(--coras-palette-neutral-200);\n    --coras-brand-neutral-300: var(--coras-palette-neutral-300);\n    --coras-brand-neutral-400: var(--coras-palette-neutral-400);\n    --coras-brand-neutral-500: var(--coras-palette-neutral-500);\n    --coras-brand-neutral-600: var(--coras-palette-neutral-600);\n    --coras-brand-neutral-700: var(--coras-palette-neutral-700);\n    --coras-brand-neutral-800: var(--coras-palette-neutral-800);\n    --coras-brand-neutral-900: var(--coras-palette-neutral-900);\n  }\n}\n\n@layer coras.semantic {\n  :where([data-coras-root], .coras-theme) {\n    --coras-color-primary: var(--coras-brand-primary);\n    --coras-color-primary-tint: var(--coras-brand-primary-tint);\n    --coras-color-secondary: var(--coras-brand-secondary);\n    --coras-color-secondary-tint: var(--coras-brand-secondary-tint);\n    --coras-color-error: var(--coras-brand-error);\n    --coras-color-error-background: var(--coras-brand-error-background);\n    --coras-color-success: var(--coras-brand-success);\n    --coras-color-success-background: var(--coras-brand-success-background);\n    --coras-color-warning: var(--coras-brand-warning);\n    --coras-color-warning-background: var(--coras-brand-warning-background);\n    --coras-color-info: var(--coras-brand-info);\n    --coras-color-info-background: var(--coras-brand-info-background);\n    --coras-color-neutral-50: light-dark(var(--coras-brand-neutral-50), var(--coras-brand-neutral-900));\n    --coras-color-neutral-100: light-dark(var(--coras-brand-neutral-100), var(--coras-brand-neutral-800));\n    --coras-color-neutral-200: light-dark(var(--coras-brand-neutral-200), var(--coras-brand-neutral-700));\n    --coras-color-neutral-300: light-dark(var(--coras-brand-neutral-300), var(--coras-brand-neutral-600));\n    --coras-color-neutral-400: light-dark(var(--coras-brand-neutral-400), var(--coras-brand-neutral-500));\n    --coras-color-neutral-500: light-dark(var(--coras-brand-neutral-500), var(--coras-brand-neutral-400));\n    --coras-color-neutral-600: light-dark(var(--coras-brand-neutral-600), var(--coras-brand-neutral-300));\n    --coras-color-neutral-700: light-dark(var(--coras-brand-neutral-700), var(--coras-brand-neutral-200));\n    --coras-color-neutral-800: light-dark(var(--coras-brand-neutral-800), var(--coras-brand-neutral-100));\n    --coras-color-neutral-900: light-dark(var(--coras-brand-neutral-900), var(--coras-brand-neutral-50));\n    --coras-color-background: var(--coras-brand-page-background);\n    --coras-color-card: var(--coras-brand-card-background);\n    --coras-color-card-sunken: light-dark(var(--coras-brand-neutral-50), #0b0d10);\n    --coras-color-card-hover: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-card-active: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-active));\n    --coras-color-card-muted: light-dark(color-mix(in srgb, var(--coras-brand-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n    --coras-color-field: var(--coras-brand-field-background);\n    --coras-color-field-hover: color-mix(in srgb, var(--coras-color-field), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-menu: var(--coras-brand-menu-background);\n    --coras-color-menu-border: var(--coras-brand-menu-border);\n    --coras-color-menu-hover: color-mix(in srgb, var(--coras-color-menu), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-text: var(--coras-brand-text);\n    --coras-color-text-primary: var(--coras-brand-text);\n    --coras-color-text-muted: var(--coras-brand-text-muted);\n    --coras-color-text-disabled: var(--coras-brand-disabled);\n    --coras-state-overlay: light-dark(#000, #fff);\n    --coras-state-hover: 10%;\n    --coras-state-active: 18%;\n    --coras-color-primary-button: var(--coras-brand-primary-button);\n    --coras-color-primary-button-hover: var(--coras-brand-primary-button-hover);\n    --coras-color-primary-button-pressed: var(--coras-brand-primary-button-pressed);\n    --coras-color-primary-button-text: var(--coras-brand-primary-button-text);\n    --coras-color-primary-button-border: var(--coras-brand-primary-button-border);\n    --coras-color-secondary-button: var(--coras-brand-secondary-button);\n    --coras-color-secondary-button-border: var(--coras-brand-secondary-button-border);\n    --coras-color-secondary-button-hover: var(--coras-brand-secondary-button-hover);\n    --coras-color-secondary-button-pressed: var(--coras-brand-secondary-button-pressed);\n    --coras-color-secondary-button-text: var(--coras-brand-secondary-button-text);\n    --coras-color-text-button: var(--coras-brand-text-button);\n    --coras-color-link: var(--coras-brand-link);\n    --coras-color-icon: var(--coras-brand-icon);\n    --coras-color-card-border: var(--coras-brand-card-border);\n    --coras-color-divider: var(--coras-brand-divider);\n    --coras-color-field-border: var(--coras-brand-field-border);\n    --coras-color-footer-border: var(--coras-brand-footer-border);\n    --coras-color-focus-ring: var(--coras-brand-focus-ring);\n    --coras-color-scrim: var(--coras-brand-scrim);\n    --coras-font-family-sans: var(--coras-brand-font);\n    --coras-font-family-heading: var(--coras-brand-heading-font);\n    --coras-font-size-xxs: 0.625rem;\n    --coras-font-size-xs: 0.75rem;\n    --coras-font-size-sm: 0.875rem;\n    --coras-font-size-base: 1rem;\n    --coras-font-size-lg: 1.125rem;\n    --coras-font-size-xl: 1.25rem;\n    --coras-font-size-2xl: 1.5rem;\n    --coras-font-size-3xl: 2.25rem;\n    --coras-font-size-4xl: 3rem;\n    --coras-font-size-5xl: 3.5rem;\n    --coras-font-size-title: calc(var(--coras-font-size-3xl) * var(--coras-brand-heading-scale));\n    --coras-font-size-heading: calc(var(--coras-font-size-2xl) * var(--coras-brand-heading-scale));\n    --coras-font-weight-light: 300;\n    --coras-font-weight-normal: 400;\n    --coras-font-weight-medium: 500;\n    --coras-font-weight-semibold: 600;\n    --coras-font-weight-bold: 700;\n    --coras-radius-none: 0;\n    --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n    --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n    --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n    --coras-radius-lg: var(--coras-brand-radius);\n    --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n    --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n    --coras-radius-full: 9999px;\n    --coras-radius-control: 0.25rem;\n    --coras-radius-field: var(--coras-brand-field-radius);\n    --coras-radius-button: var(--coras-brand-button-radius);\n    --coras-radius-chip: var(--coras-brand-chip-radius);\n    --coras-radius-search: var(--coras-brand-search-radius);\n    --coras-shadow-sm: var(--coras-brand-soft-shadow);\n    --coras-shadow-md: var(--coras-brand-button-shadow);\n    --coras-shadow-lg: var(--coras-brand-card-shadow);\n    --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n    --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n    --coras-page-max-width: 950px;\n    --coras-container-max-width: 1368px;\n    --coras-footer-max-width: 1073px;\n    --coras-z-index-overlay: 1000;\n    --coras-navbar-padding: 1rem;\n    --coras-content-padding: 0 1rem;\n    --coras-footer-padding: 4rem 2rem;\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root], .coras-theme) {\n    --coras-base-text-color: var(--coras-color-text);\n    --coras-navbar-background: var(--coras-brand-navbar-background);\n    --coras-navbar-background-image: var(--coras-brand-navbar-background-image);\n    --coras-navbar-background-image-dark: var(--coras-brand-navbar-background-image-dark, var(--coras-brand-navbar-background-image));\n    --coras-navbar-text-color: var(--coras-brand-navbar-text);\n    --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n    --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n    --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n    --coras-navbar-logo-height: var(--coras-brand-logo-height);\n    --coras-footer-background-color: var(--coras-brand-footer-background);\n    --coras-footer-background-image: var(--coras-brand-footer-background-image);\n    --coras-footer-background-image-dark: var(--coras-brand-footer-background-image-dark, var(--coras-brand-footer-background-image));\n    --coras-footer-text-color: var(--coras-brand-footer-text);\n    --coras-footer-link-color: var(--coras-brand-footer-link);\n    --coras-footer-border-top: 1px solid var(--coras-color-footer-border);\n    --coras-footer-padding-bottom: var(--coras-brand-footer-padding-bottom);\n    --coras-button-primary-background: var(--coras-color-primary-button);\n    --coras-button-primary-text-color: var(--coras-color-primary-button-text);\n    --coras-button-primary-background-hover: var(--coras-color-primary-button-hover);\n    --coras-button-primary-background-active: var(--coras-color-primary-button-pressed);\n    --coras-button-primary-border-color: var(--coras-color-primary-button-border);\n    --coras-button-secondary-border-color: var(--coras-color-secondary-button-border);\n    --coras-input-field-background-color: var(--coras-color-field);\n    --coras-basket-accent-color: var(--coras-brand-secondary);\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root]) {\n    container: coras-page / inline-size;\n    max-width: 100%;\n    background-color: var(--coras-page-background, transparent);\n    color: var(--coras-base-text-color);\n  }\n  :where([data-coras-root]) > *:where(:not(style)) {\n    display: block;\n    fill: var(--coras-color-icon);\n  }\n}\n";

package/dist/styles/tokens.generated.js

@@ -1,4 +1,4 @@
 /* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */
 /* eslint-disable */
 // CSS-first token system as a string for runtime adoption (see tokens.ts).
-export const CORAS_TOKENS_CSS = "/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-page-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-body-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-focus-ring {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-card-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #fcfcff;\n}\n@property --coras-brand-field-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-menu-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-main-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-text-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-button-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-chip-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-navbar-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-footer-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-error {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #c9224a;\n}\n@property --coras-brand-success {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #670c93;\n}\n\n@layer coras.palette {\n  :where([data-coras-root], .coras-theme) {\n    --coras-palette-primary-50: #fcfcff;\n    --coras-palette-primary-100: #fbfbff;\n    --coras-palette-primary-200: #eef0ff;\n    --coras-palette-primary-300: #dde1ff;\n    --coras-palette-primary-400: #5468ff;\n    --coras-palette-primary-500: #4657d4;\n    --coras-palette-primary-700: #323e99;\n    --coras-palette-secondary-50: #e8e8ec;\n    --coras-palette-secondary-100: #d0d2da;\n    --coras-palette-secondary-200: #b9bbc7;\n    --coras-palette-secondary-300: #a2a4b4;\n    --coras-palette-secondary-400: #1c2355;\n    --coras-palette-secondary-500: #161c44;\n    --coras-palette-secondary-700: #121636;\n    --coras-palette-neutral-50: #f5f5f5;\n    --coras-palette-neutral-100: #eeeeee;\n    --coras-palette-neutral-200: #e6e6e6;\n    --coras-palette-neutral-300: #dddddd;\n    --coras-palette-neutral-400: #cccccc;\n    --coras-palette-neutral-500: #aaaaaa;\n    --coras-palette-neutral-600: #888888;\n    --coras-palette-neutral-700: #666666;\n    --coras-palette-neutral-800: #444444;\n    --coras-palette-neutral-900: #292929;\n    --coras-palette-error-50: #fae9ed;\n    --coras-palette-error-500: #c9224a;\n    --coras-palette-error-700: #a11b3b;\n    --coras-palette-error-900: #79142c;\n    --coras-palette-info-50: #f0e7f4;\n    --coras-palette-info-500: #670c93;\n    --coras-palette-info-700: #520a76;\n    --coras-palette-info-900: #3e0758;\n    --coras-palette-success-50: #e6f7f4;\n    --coras-palette-success-500: #00ad8f;\n    --coras-palette-success-700: #008a72;\n    --coras-palette-success-900: #006856;\n    --coras-palette-warning-50: #fdf4e8;\n    --coras-palette-warning-500: #ed8f1c;\n    --coras-palette-warning-700: #be7216;\n    --coras-palette-warning-900: #8e5611;\n    --coras-palette-pink-500: #ff2d55;\n    --coras-palette-black: #000000;\n    --coras-palette-white: #ffffff;\n  }\n}\n\n@layer coras.brand {\n  :where([data-coras-root], .coras-theme) {\n    color-scheme: light;\n    --coras-brand-primary: var(--coras-palette-primary-500);\n    --coras-brand-secondary: var(--coras-palette-secondary-500);\n    --coras-brand-page-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n    --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n    --coras-brand-link: var(--coras-brand-text-button);\n    --coras-brand-body-icon: var(--coras-brand-text);\n    --coras-brand-focus-ring: var(--coras-brand-primary);\n    --coras-brand-scrim: var(--coras-palette-black);\n    --coras-brand-card-background: light-dark(var(--coras-palette-primary-50), #191c22);\n    --coras-brand-card-border: light-dark(var(--coras-palette-neutral-200), #444444);\n    --coras-brand-field-background: light-dark(var(--coras-brand-page-background), #101216);\n    --coras-brand-field-border: light-dark(var(--coras-palette-neutral-400), #aaaaaa);\n    --coras-brand-menu-background: light-dark(var(--coras-brand-page-background), #101216);\n    --coras-brand-menu-border: var(--coras-brand-card-border);\n    --coras-brand-divider: light-dark(var(--coras-palette-neutral-200), #292929);\n    --coras-brand-card-shadow: 0px 24px 24px rgba(0, 0, 0, 0.04);\n    --coras-brand-soft-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04);\n    --coras-brand-main-button: var(--coras-brand-primary);\n    --coras-brand-main-button-text: #ffffff;\n    --coras-brand-main-button-hover: light-dark(#3f4ebf, #5968d8);\n    --coras-brand-main-button-pressed: light-dark(#3947ae, #6775dc);\n    --coras-brand-secondary-button: var(--coras-brand-secondary);\n    --coras-brand-secondary-button-text: #ffffff;\n    --coras-brand-secondary-button-hover: light-dark(#14193d, #2d3357);\n    --coras-brand-secondary-button-pressed: light-dark(#121738, #404566);\n    --coras-brand-text-button: light-dark(var(--coras-brand-primary), #6279f9);\n    --coras-brand-main-button-border: transparent;\n    --coras-brand-secondary-button-border: transparent;\n    --coras-brand-disabled: light-dark(var(--coras-palette-neutral-500), #cccccc);\n    --coras-brand-button-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);\n    --coras-brand-button-hover-light: 20%;\n    --coras-brand-button-hover-dark: 20%;\n    --coras-brand-radius: 1.5rem;\n    --coras-brand-button-radius: var(--coras-brand-radius);\n    --coras-brand-chip-radius: var(--coras-brand-radius);\n    --coras-brand-field-radius: 0.5rem;\n    --coras-brand-search-radius: 100px;\n    --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --coras-brand-heading-font: var(--coras-brand-font);\n    --coras-brand-heading-scale: 1;\n    --coras-brand-logo-height: 2rem;\n    --coras-brand-navbar-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n    --coras-brand-navbar-border: var(--coras-brand-navbar-background);\n    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n    --coras-brand-footer-background: light-dark(var(--coras-palette-neutral-200), #191c22);\n    --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-footer-link: var(--coras-brand-footer-text);\n    --coras-brand-footer-border: var(--coras-brand-footer-background);\n    --coras-brand-footer-padding-bottom: 2rem;\n    --coras-brand-error: light-dark(var(--coras-palette-error-500), #f5748a);\n    --coras-brand-error-background: light-dark(var(--coras-palette-error-50), #442e36);\n    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n    --coras-brand-success-background: light-dark(var(--coras-palette-success-50), #26403f);\n    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n    --coras-brand-warning-background: light-dark(var(--coras-palette-warning-50), #43382e);\n    --coras-brand-info: light-dark(var(--coras-palette-info-500), #ba86e1);\n    --coras-brand-info-background: light-dark(var(--coras-palette-info-50), #373045);\n    --coras-brand-primary-tint: light-dark(var(--coras-palette-primary-50), #141823);\n    --coras-brand-secondary-tint: light-dark(var(--coras-palette-secondary-50), #10131a);\n    --coras-brand-neutral-50: var(--coras-palette-neutral-50);\n    --coras-brand-neutral-100: var(--coras-palette-neutral-100);\n    --coras-brand-neutral-200: var(--coras-palette-neutral-200);\n    --coras-brand-neutral-300: var(--coras-palette-neutral-300);\n    --coras-brand-neutral-400: var(--coras-palette-neutral-400);\n    --coras-brand-neutral-500: var(--coras-palette-neutral-500);\n    --coras-brand-neutral-600: var(--coras-palette-neutral-600);\n    --coras-brand-neutral-700: var(--coras-palette-neutral-700);\n    --coras-brand-neutral-800: var(--coras-palette-neutral-800);\n    --coras-brand-neutral-900: var(--coras-palette-neutral-900);\n  }\n}\n\n@layer coras.semantic {\n  :where([data-coras-root], .coras-theme) {\n    --coras-color-primary: var(--coras-brand-primary);\n    --coras-color-primary-tint: var(--coras-brand-primary-tint);\n    --coras-color-secondary: var(--coras-brand-secondary);\n    --coras-color-secondary-tint: var(--coras-brand-secondary-tint);\n    --coras-color-error: var(--coras-brand-error);\n    --coras-color-error-background: var(--coras-brand-error-background);\n    --coras-color-success: var(--coras-brand-success);\n    --coras-color-success-background: var(--coras-brand-success-background);\n    --coras-color-warning: var(--coras-brand-warning);\n    --coras-color-warning-background: var(--coras-brand-warning-background);\n    --coras-color-info: var(--coras-brand-info);\n    --coras-color-info-background: var(--coras-brand-info-background);\n    --coras-color-neutral-50: light-dark(var(--coras-brand-neutral-50), var(--coras-brand-neutral-900));\n    --coras-color-neutral-100: light-dark(var(--coras-brand-neutral-100), var(--coras-brand-neutral-800));\n    --coras-color-neutral-200: light-dark(var(--coras-brand-neutral-200), var(--coras-brand-neutral-700));\n    --coras-color-neutral-300: light-dark(var(--coras-brand-neutral-300), var(--coras-brand-neutral-600));\n    --coras-color-neutral-400: light-dark(var(--coras-brand-neutral-400), var(--coras-brand-neutral-500));\n    --coras-color-neutral-500: light-dark(var(--coras-brand-neutral-500), var(--coras-brand-neutral-400));\n    --coras-color-neutral-600: light-dark(var(--coras-brand-neutral-600), var(--coras-brand-neutral-300));\n    --coras-color-neutral-700: light-dark(var(--coras-brand-neutral-700), var(--coras-brand-neutral-200));\n    --coras-color-neutral-800: light-dark(var(--coras-brand-neutral-800), var(--coras-brand-neutral-100));\n    --coras-color-neutral-900: light-dark(var(--coras-brand-neutral-900), var(--coras-brand-neutral-50));\n    --coras-color-background: var(--coras-brand-page-background);\n    --coras-color-card: var(--coras-brand-card-background);\n    --coras-color-card-sunken: light-dark(var(--coras-brand-neutral-50), #0b0d10);\n    --coras-color-card-hover: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-card-active: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-active));\n    --coras-color-card-muted: light-dark(color-mix(in srgb, var(--coras-brand-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n    --coras-color-field: var(--coras-brand-field-background);\n    --coras-color-field-hover: color-mix(in srgb, var(--coras-color-field), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-menu: var(--coras-brand-menu-background);\n    --coras-color-menu-border: var(--coras-brand-menu-border);\n    --coras-color-menu-hover: color-mix(in srgb, var(--coras-color-menu), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-text: var(--coras-brand-text);\n    --coras-color-text-primary: var(--coras-brand-text);\n    --coras-color-text-muted: var(--coras-brand-text-muted);\n    --coras-color-text-disabled: var(--coras-brand-disabled);\n    --coras-state-overlay: light-dark(#000, #fff);\n    --coras-state-hover: 10%;\n    --coras-state-active: 18%;\n    --coras-color-main-button: var(--coras-brand-main-button);\n    --coras-color-main-button-hover: var(--coras-brand-main-button-hover);\n    --coras-color-main-button-pressed: var(--coras-brand-main-button-pressed);\n    --coras-color-main-button-text: var(--coras-brand-main-button-text);\n    --coras-color-main-button-border: var(--coras-brand-main-button-border);\n    --coras-color-secondary-button: var(--coras-brand-secondary-button);\n    --coras-color-secondary-button-border: var(--coras-brand-secondary-button-border);\n    --coras-color-secondary-button-hover: var(--coras-brand-secondary-button-hover);\n    --coras-color-secondary-button-pressed: var(--coras-brand-secondary-button-pressed);\n    --coras-color-secondary-button-text: var(--coras-brand-secondary-button-text);\n    --coras-color-text-button: var(--coras-brand-text-button);\n    --coras-color-link: var(--coras-brand-link);\n    --coras-color-icon: var(--coras-brand-body-icon);\n    --coras-color-card-border: var(--coras-brand-card-border);\n    --coras-color-divider: var(--coras-brand-divider);\n    --coras-color-field-border: var(--coras-brand-field-border);\n    --coras-color-footer-border: var(--coras-brand-footer-border);\n    --coras-color-focus-ring: var(--coras-brand-focus-ring);\n    --coras-color-scrim: var(--coras-brand-scrim);\n    --coras-font-family-sans: var(--coras-brand-font);\n    --coras-font-family-heading: var(--coras-brand-heading-font);\n    --coras-font-size-xxs: 0.625rem;\n    --coras-font-size-xs: 0.75rem;\n    --coras-font-size-sm: 0.875rem;\n    --coras-font-size-base: 1rem;\n    --coras-font-size-lg: 1.125rem;\n    --coras-font-size-xl: 1.25rem;\n    --coras-font-size-2xl: 1.5rem;\n    --coras-font-size-3xl: 2.25rem;\n    --coras-font-size-4xl: 3rem;\n    --coras-font-size-5xl: 3.5rem;\n    --coras-font-size-title: calc(var(--coras-font-size-3xl) * var(--coras-brand-heading-scale));\n    --coras-font-size-heading: calc(var(--coras-font-size-2xl) * var(--coras-brand-heading-scale));\n    --coras-font-weight-light: 300;\n    --coras-font-weight-normal: 400;\n    --coras-font-weight-medium: 500;\n    --coras-font-weight-semibold: 600;\n    --coras-font-weight-bold: 700;\n    --coras-radius-none: 0;\n    --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n    --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n    --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n    --coras-radius-lg: var(--coras-brand-radius);\n    --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n    --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n    --coras-radius-full: 9999px;\n    --coras-radius-control: 0.25rem;\n    --coras-radius-field: var(--coras-brand-field-radius);\n    --coras-radius-button: var(--coras-brand-button-radius);\n    --coras-radius-chip: var(--coras-brand-chip-radius);\n    --coras-radius-search: var(--coras-brand-search-radius);\n    --coras-shadow-sm: var(--coras-brand-soft-shadow);\n    --coras-shadow-md: var(--coras-brand-button-shadow);\n    --coras-shadow-lg: var(--coras-brand-card-shadow);\n    --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n    --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n    --coras-page-max-width: 950px;\n    --coras-container-max-width: 1368px;\n    --coras-footer-max-width: 1073px;\n    --coras-z-index-overlay: 1000;\n    --coras-navbar-padding: 1rem;\n    --coras-content-padding: 0 1rem;\n    --coras-footer-padding: 4rem 2rem;\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root], .coras-theme) {\n    --coras-base-text-color: var(--coras-color-text);\n    --coras-navbar-background: var(--coras-brand-navbar-background);\n    --coras-navbar-text-color: var(--coras-brand-navbar-text);\n    --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n    --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n    --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n    --coras-navbar-logo-height: var(--coras-brand-logo-height);\n    --coras-footer-background-color: var(--coras-brand-footer-background);\n    --coras-footer-text-color: var(--coras-brand-footer-text);\n    --coras-footer-link-color: var(--coras-brand-footer-link);\n    --coras-footer-border-top: 1px solid var(--coras-color-footer-border);\n    --coras-footer-padding-bottom: var(--coras-brand-footer-padding-bottom);\n    --coras-button-primary-background: var(--coras-color-main-button);\n    --coras-button-primary-text-color: var(--coras-color-main-button-text);\n    --coras-button-primary-background-hover: var(--coras-color-main-button-hover);\n    --coras-button-primary-background-active: var(--coras-color-main-button-pressed);\n    --coras-button-primary-border-color: var(--coras-color-main-button-border);\n    --coras-button-secondary-border-color: var(--coras-color-secondary-button-border);\n    --coras-input-field-background-color: var(--coras-color-field);\n    --coras-basket-accent-color: var(--coras-brand-secondary);\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root]) {\n    container: coras-page / inline-size;\n    max-width: 100%;\n    background-color: var(--coras-page-background, transparent);\n    color: var(--coras-base-text-color);\n  }\n  :where([data-coras-root]) > *:where(:not(style)) {\n    display: block;\n    fill: var(--coras-color-icon);\n  }\n}\n";
+export const CORAS_TOKENS_CSS = "/* GENERATED by scripts/generate-tokens.mjs - do not edit by hand. */\n/* CSS-first four-tier token system (plan F-004, P-051..P-055). */\n\n@layer coras.palette, coras.brand, coras.semantic, coras.components;\n\n@property --coras-brand-primary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-page-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-focus-ring {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-card-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #fcfcff;\n}\n@property --coras-brand-field-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-menu-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-primary-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-secondary-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-text-button {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #4657d4;\n}\n@property --coras-brand-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-button-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-chip-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 24px;\n}\n@property --coras-brand-navbar-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-navbar-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-icon {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-navbar-border {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-footer-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #e6e6e6;\n}\n@property --coras-brand-footer-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-footer-link {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #000000;\n}\n@property --coras-brand-error {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #c9224a;\n}\n@property --coras-brand-success {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #00ad8f;\n}\n@property --coras-brand-warning {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ed8f1c;\n}\n@property --coras-brand-info {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #670c93;\n}\n\n@layer coras.palette {\n  :where([data-coras-root], .coras-theme) {\n    --coras-palette-primary-50: #fcfcff;\n    --coras-palette-primary-100: #fbfbff;\n    --coras-palette-primary-200: #eef0ff;\n    --coras-palette-primary-300: #dde1ff;\n    --coras-palette-primary-400: #5468ff;\n    --coras-palette-primary-500: #4657d4;\n    --coras-palette-primary-700: #323e99;\n    --coras-palette-secondary-50: #e8e8ec;\n    --coras-palette-secondary-100: #d0d2da;\n    --coras-palette-secondary-200: #b9bbc7;\n    --coras-palette-secondary-300: #a2a4b4;\n    --coras-palette-secondary-400: #1c2355;\n    --coras-palette-secondary-500: #161c44;\n    --coras-palette-secondary-700: #121636;\n    --coras-palette-neutral-50: #f5f5f5;\n    --coras-palette-neutral-100: #eeeeee;\n    --coras-palette-neutral-200: #e6e6e6;\n    --coras-palette-neutral-300: #dddddd;\n    --coras-palette-neutral-400: #cccccc;\n    --coras-palette-neutral-500: #aaaaaa;\n    --coras-palette-neutral-600: #888888;\n    --coras-palette-neutral-700: #666666;\n    --coras-palette-neutral-800: #444444;\n    --coras-palette-neutral-900: #292929;\n    --coras-palette-error-50: #fae9ed;\n    --coras-palette-error-500: #c9224a;\n    --coras-palette-error-700: #a11b3b;\n    --coras-palette-error-900: #79142c;\n    --coras-palette-info-50: #f0e7f4;\n    --coras-palette-info-500: #670c93;\n    --coras-palette-info-700: #520a76;\n    --coras-palette-info-900: #3e0758;\n    --coras-palette-success-50: #e6f7f4;\n    --coras-palette-success-500: #00ad8f;\n    --coras-palette-success-700: #008a72;\n    --coras-palette-success-900: #006856;\n    --coras-palette-warning-50: #fdf4e8;\n    --coras-palette-warning-500: #ed8f1c;\n    --coras-palette-warning-700: #be7216;\n    --coras-palette-warning-900: #8e5611;\n    --coras-palette-pink-500: #ff2d55;\n    --coras-palette-black: #000000;\n    --coras-palette-white: #ffffff;\n  }\n}\n\n@layer coras.brand {\n  :where([data-coras-root], .coras-theme) {\n    color-scheme: light;\n    --coras-brand-primary: var(--coras-palette-primary-500);\n    --coras-brand-secondary: var(--coras-palette-secondary-500);\n    --coras-brand-page-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);\n    --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);\n    --coras-brand-link: var(--coras-brand-text-button);\n    --coras-brand-icon: var(--coras-brand-text);\n    --coras-brand-focus-ring: var(--coras-brand-primary);\n    --coras-brand-scrim: var(--coras-palette-black);\n    --coras-brand-card-background: light-dark(var(--coras-palette-primary-50), #191c22);\n    --coras-brand-card-border: light-dark(var(--coras-palette-neutral-200), #444444);\n    --coras-brand-field-background: light-dark(var(--coras-brand-page-background), #101216);\n    --coras-brand-field-border: light-dark(var(--coras-palette-neutral-400), #aaaaaa);\n    --coras-brand-menu-background: light-dark(var(--coras-brand-page-background), #101216);\n    --coras-brand-menu-border: var(--coras-brand-card-border);\n    --coras-brand-divider: light-dark(var(--coras-palette-neutral-200), #292929);\n    --coras-brand-card-shadow: 0px 24px 24px rgba(0, 0, 0, 0.04);\n    --coras-brand-soft-shadow: 0px 4px 4px rgba(0, 0, 0, 0.04);\n    --coras-brand-primary-button: var(--coras-brand-primary);\n    --coras-brand-primary-button-text: #ffffff;\n    --coras-brand-primary-button-hover: light-dark(#3f4ebf, #5968d8);\n    --coras-brand-primary-button-pressed: light-dark(#3947ae, #6775dc);\n    --coras-brand-secondary-button: var(--coras-brand-secondary);\n    --coras-brand-secondary-button-text: #ffffff;\n    --coras-brand-secondary-button-hover: light-dark(#14193d, #2d3357);\n    --coras-brand-secondary-button-pressed: light-dark(#121738, #404566);\n    --coras-brand-text-button: light-dark(var(--coras-brand-primary), #6279f9);\n    --coras-brand-primary-button-border: transparent;\n    --coras-brand-secondary-button-border: transparent;\n    --coras-brand-disabled: light-dark(var(--coras-palette-neutral-500), #cccccc);\n    --coras-brand-button-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);\n    --coras-brand-button-hover-on-light-fill: 20%;\n    --coras-brand-button-hover-on-dark-fill: 20%;\n    --coras-brand-radius: 1.5rem;\n    --coras-brand-button-radius: var(--coras-brand-radius);\n    --coras-brand-chip-radius: var(--coras-brand-radius);\n    --coras-brand-field-radius: 0.5rem;\n    --coras-brand-search-radius: 100px;\n    --coras-brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --coras-brand-heading-font: var(--coras-brand-font);\n    --coras-brand-heading-scale: 1;\n    --coras-brand-logo-height: 2rem;\n    --coras-brand-navbar-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-navbar-background-image: none;\n    --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-navbar-icon: var(--coras-brand-navbar-text);\n    --coras-brand-navbar-border: var(--coras-brand-navbar-background);\n    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n    --coras-brand-footer-background: light-dark(var(--coras-palette-neutral-200), #191c22);\n    --coras-brand-footer-background-image: none;\n    --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);\n    --coras-brand-footer-link: var(--coras-brand-footer-text);\n    --coras-brand-footer-border: var(--coras-brand-footer-background);\n    --coras-brand-footer-padding-bottom: 2rem;\n    --coras-brand-error: light-dark(var(--coras-palette-error-500), #f5748a);\n    --coras-brand-error-background: light-dark(var(--coras-palette-error-50), #442e36);\n    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n    --coras-brand-success-background: light-dark(var(--coras-palette-success-50), #26403f);\n    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n    --coras-brand-warning-background: light-dark(var(--coras-palette-warning-50), #43382e);\n    --coras-brand-info: light-dark(var(--coras-palette-info-500), #ba86e1);\n    --coras-brand-info-background: light-dark(var(--coras-palette-info-50), #373045);\n    --coras-brand-primary-tint: light-dark(var(--coras-palette-primary-50), #141823);\n    --coras-brand-secondary-tint: light-dark(var(--coras-palette-secondary-50), #10131a);\n    --coras-brand-neutral-50: var(--coras-palette-neutral-50);\n    --coras-brand-neutral-100: var(--coras-palette-neutral-100);\n    --coras-brand-neutral-200: var(--coras-palette-neutral-200);\n    --coras-brand-neutral-300: var(--coras-palette-neutral-300);\n    --coras-brand-neutral-400: var(--coras-palette-neutral-400);\n    --coras-brand-neutral-500: var(--coras-palette-neutral-500);\n    --coras-brand-neutral-600: var(--coras-palette-neutral-600);\n    --coras-brand-neutral-700: var(--coras-palette-neutral-700);\n    --coras-brand-neutral-800: var(--coras-palette-neutral-800);\n    --coras-brand-neutral-900: var(--coras-palette-neutral-900);\n  }\n}\n\n@layer coras.semantic {\n  :where([data-coras-root], .coras-theme) {\n    --coras-color-primary: var(--coras-brand-primary);\n    --coras-color-primary-tint: var(--coras-brand-primary-tint);\n    --coras-color-secondary: var(--coras-brand-secondary);\n    --coras-color-secondary-tint: var(--coras-brand-secondary-tint);\n    --coras-color-error: var(--coras-brand-error);\n    --coras-color-error-background: var(--coras-brand-error-background);\n    --coras-color-success: var(--coras-brand-success);\n    --coras-color-success-background: var(--coras-brand-success-background);\n    --coras-color-warning: var(--coras-brand-warning);\n    --coras-color-warning-background: var(--coras-brand-warning-background);\n    --coras-color-info: var(--coras-brand-info);\n    --coras-color-info-background: var(--coras-brand-info-background);\n    --coras-color-neutral-50: light-dark(var(--coras-brand-neutral-50), var(--coras-brand-neutral-900));\n    --coras-color-neutral-100: light-dark(var(--coras-brand-neutral-100), var(--coras-brand-neutral-800));\n    --coras-color-neutral-200: light-dark(var(--coras-brand-neutral-200), var(--coras-brand-neutral-700));\n    --coras-color-neutral-300: light-dark(var(--coras-brand-neutral-300), var(--coras-brand-neutral-600));\n    --coras-color-neutral-400: light-dark(var(--coras-brand-neutral-400), var(--coras-brand-neutral-500));\n    --coras-color-neutral-500: light-dark(var(--coras-brand-neutral-500), var(--coras-brand-neutral-400));\n    --coras-color-neutral-600: light-dark(var(--coras-brand-neutral-600), var(--coras-brand-neutral-300));\n    --coras-color-neutral-700: light-dark(var(--coras-brand-neutral-700), var(--coras-brand-neutral-200));\n    --coras-color-neutral-800: light-dark(var(--coras-brand-neutral-800), var(--coras-brand-neutral-100));\n    --coras-color-neutral-900: light-dark(var(--coras-brand-neutral-900), var(--coras-brand-neutral-50));\n    --coras-color-background: var(--coras-brand-page-background);\n    --coras-color-card: var(--coras-brand-card-background);\n    --coras-color-card-sunken: light-dark(var(--coras-brand-neutral-50), #0b0d10);\n    --coras-color-card-hover: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-card-active: color-mix(in srgb, var(--coras-color-card), var(--coras-state-overlay) var(--coras-state-active));\n    --coras-color-card-muted: light-dark(color-mix(in srgb, var(--coras-brand-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n    --coras-color-field: var(--coras-brand-field-background);\n    --coras-color-field-hover: color-mix(in srgb, var(--coras-color-field), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-menu: var(--coras-brand-menu-background);\n    --coras-color-menu-border: var(--coras-brand-menu-border);\n    --coras-color-menu-hover: color-mix(in srgb, var(--coras-color-menu), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-text: var(--coras-brand-text);\n    --coras-color-text-primary: var(--coras-brand-text);\n    --coras-color-text-muted: var(--coras-brand-text-muted);\n    --coras-color-text-disabled: var(--coras-brand-disabled);\n    --coras-state-overlay: light-dark(#000, #fff);\n    --coras-state-hover: 10%;\n    --coras-state-active: 18%;\n    --coras-color-primary-button: var(--coras-brand-primary-button);\n    --coras-color-primary-button-hover: var(--coras-brand-primary-button-hover);\n    --coras-color-primary-button-pressed: var(--coras-brand-primary-button-pressed);\n    --coras-color-primary-button-text: var(--coras-brand-primary-button-text);\n    --coras-color-primary-button-border: var(--coras-brand-primary-button-border);\n    --coras-color-secondary-button: var(--coras-brand-secondary-button);\n    --coras-color-secondary-button-border: var(--coras-brand-secondary-button-border);\n    --coras-color-secondary-button-hover: var(--coras-brand-secondary-button-hover);\n    --coras-color-secondary-button-pressed: var(--coras-brand-secondary-button-pressed);\n    --coras-color-secondary-button-text: var(--coras-brand-secondary-button-text);\n    --coras-color-text-button: var(--coras-brand-text-button);\n    --coras-color-link: var(--coras-brand-link);\n    --coras-color-icon: var(--coras-brand-icon);\n    --coras-color-card-border: var(--coras-brand-card-border);\n    --coras-color-divider: var(--coras-brand-divider);\n    --coras-color-field-border: var(--coras-brand-field-border);\n    --coras-color-footer-border: var(--coras-brand-footer-border);\n    --coras-color-focus-ring: var(--coras-brand-focus-ring);\n    --coras-color-scrim: var(--coras-brand-scrim);\n    --coras-font-family-sans: var(--coras-brand-font);\n    --coras-font-family-heading: var(--coras-brand-heading-font);\n    --coras-font-size-xxs: 0.625rem;\n    --coras-font-size-xs: 0.75rem;\n    --coras-font-size-sm: 0.875rem;\n    --coras-font-size-base: 1rem;\n    --coras-font-size-lg: 1.125rem;\n    --coras-font-size-xl: 1.25rem;\n    --coras-font-size-2xl: 1.5rem;\n    --coras-font-size-3xl: 2.25rem;\n    --coras-font-size-4xl: 3rem;\n    --coras-font-size-5xl: 3.5rem;\n    --coras-font-size-title: calc(var(--coras-font-size-3xl) * var(--coras-brand-heading-scale));\n    --coras-font-size-heading: calc(var(--coras-font-size-2xl) * var(--coras-brand-heading-scale));\n    --coras-font-weight-light: 300;\n    --coras-font-weight-normal: 400;\n    --coras-font-weight-medium: 500;\n    --coras-font-weight-semibold: 600;\n    --coras-font-weight-bold: 700;\n    --coras-radius-none: 0;\n    --coras-radius-xs: calc(var(--coras-brand-radius) / 6);\n    --coras-radius-sm: calc(var(--coras-brand-radius) / 3);\n    --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);\n    --coras-radius-lg: var(--coras-brand-radius);\n    --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);\n    --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);\n    --coras-radius-full: 9999px;\n    --coras-radius-control: 0.25rem;\n    --coras-radius-field: var(--coras-brand-field-radius);\n    --coras-radius-button: var(--coras-brand-button-radius);\n    --coras-radius-chip: var(--coras-brand-chip-radius);\n    --coras-radius-search: var(--coras-brand-search-radius);\n    --coras-shadow-sm: var(--coras-brand-soft-shadow);\n    --coras-shadow-md: var(--coras-brand-button-shadow);\n    --coras-shadow-lg: var(--coras-brand-card-shadow);\n    --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);\n    --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n    --coras-page-max-width: 950px;\n    --coras-container-max-width: 1368px;\n    --coras-footer-max-width: 1073px;\n    --coras-z-index-overlay: 1000;\n    --coras-navbar-padding: 1rem;\n    --coras-content-padding: 0 1rem;\n    --coras-footer-padding: 4rem 2rem;\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root], .coras-theme) {\n    --coras-base-text-color: var(--coras-color-text);\n    --coras-navbar-background: var(--coras-brand-navbar-background);\n    --coras-navbar-background-image: var(--coras-brand-navbar-background-image);\n    --coras-navbar-background-image-dark: var(--coras-brand-navbar-background-image-dark, var(--coras-brand-navbar-background-image));\n    --coras-navbar-text-color: var(--coras-brand-navbar-text);\n    --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);\n    --coras-navbar-shadow: var(--coras-brand-navbar-shadow);\n    --coras-navbar-icon-color: var(--coras-brand-navbar-icon);\n    --coras-navbar-logo-height: var(--coras-brand-logo-height);\n    --coras-footer-background-color: var(--coras-brand-footer-background);\n    --coras-footer-background-image: var(--coras-brand-footer-background-image);\n    --coras-footer-background-image-dark: var(--coras-brand-footer-background-image-dark, var(--coras-brand-footer-background-image));\n    --coras-footer-text-color: var(--coras-brand-footer-text);\n    --coras-footer-link-color: var(--coras-brand-footer-link);\n    --coras-footer-border-top: 1px solid var(--coras-color-footer-border);\n    --coras-footer-padding-bottom: var(--coras-brand-footer-padding-bottom);\n    --coras-button-primary-background: var(--coras-color-primary-button);\n    --coras-button-primary-text-color: var(--coras-color-primary-button-text);\n    --coras-button-primary-background-hover: var(--coras-color-primary-button-hover);\n    --coras-button-primary-background-active: var(--coras-color-primary-button-pressed);\n    --coras-button-primary-border-color: var(--coras-color-primary-button-border);\n    --coras-button-secondary-border-color: var(--coras-color-secondary-button-border);\n    --coras-input-field-background-color: var(--coras-color-field);\n    --coras-basket-accent-color: var(--coras-brand-secondary);\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root]) {\n    container: coras-page / inline-size;\n    max-width: 100%;\n    background-color: var(--coras-page-background, transparent);\n    color: var(--coras-base-text-color);\n  }\n  :where([data-coras-root]) > *:where(:not(style)) {\n    display: block;\n    fill: var(--coras-color-icon);\n  }\n}\n";

package/dist/styles/tokens.metadata.d.ts

@@ -1,4 +1,4 @@
-export type TokenControlType = "color" | "length" | "font" | "shadow" | "scale";
+export type TokenControlType = "color" | "length" | "font" | "shadow" | "scale" | "gradient";
 export type TokenControl = {
     /** Matches the corresponding `CorasTheme` key. */
     key: string;

package/dist/styles/tokens.metadata.js

@@ -55,8 +55,8 @@ export const TOKEN_CONTROLS = [
         "description": "This follows the Text Button Colour, which itself defaults to the Primary Brand Colour. Adjust here if desired."
     },
     {
-        "key": "bodyIcon",
-        "cssVar": "--coras-brand-body-icon",
+        "key": "icon",
+        "cssVar": "--coras-brand-icon",
         "type": "color",
         "group": "Key colours",
         "label": "Icon Colour (In Page)",
@@ -145,8 +145,8 @@ export const TOKEN_CONTROLS = [
         "description": "The subtle shadow on smaller raised elements"
     },
     {
-        "key": "mainButton",
-        "cssVar": "--coras-brand-main-button",
+        "key": "primaryButton",
+        "cssVar": "--coras-brand-primary-button",
         "type": "color",
         "group": "Buttons",
         "label": "Primary Button Fill Colour",
@@ -154,8 +154,8 @@ export const TOKEN_CONTROLS = [
         "description": "This defaults to the Primary Brand Colour but can be adjusted here if required"
     },
     {
-        "key": "mainButtonText",
-        "cssVar": "--coras-brand-main-button-text",
+        "key": "primaryButtonText",
+        "cssVar": "--coras-brand-primary-button-text",
         "type": "color",
         "group": "Buttons",
         "label": "Primary Button Text Colour",
@@ -190,8 +190,8 @@ export const TOKEN_CONTROLS = [
         "description": "This defaults to the Primary Brand Colour. It can be adjusted here if required."
     },
     {
-        "key": "mainButtonBorder",
-        "cssVar": "--coras-brand-main-button-border",
+        "key": "primaryButtonBorder",
+        "cssVar": "--coras-brand-primary-button-border",
         "type": "color",
         "group": "Buttons",
         "label": "Primary Button Border",
@@ -226,8 +226,8 @@ export const TOKEN_CONTROLS = [
         "description": "Default values applied. Set values to 0 if not required"
     },
     {
-        "key": "buttonHoverLight",
-        "cssVar": "--coras-brand-button-hover-light",
+        "key": "buttonHoverOnLightFill",
+        "cssVar": "--coras-brand-button-hover-on-light-fill",
         "type": "length",
         "group": "Buttons",
         "label": "On Hover - Light / Bright Fill Button",
@@ -235,8 +235,8 @@ export const TOKEN_CONTROLS = [
         "description": "Strength of the black overlay applied on hover when the button fill is light. Default values applied. Adjust if desired."
     },
     {
-        "key": "buttonHoverDark",
-        "cssVar": "--coras-brand-button-hover-dark",
+        "key": "buttonHoverOnDarkFill",
+        "cssVar": "--coras-brand-button-hover-on-dark-fill",
         "type": "length",
         "group": "Buttons",
         "label": "On Hover - Dark Fill Button",
@@ -333,6 +333,15 @@ export const TOKEN_CONTROLS = [
         "default": "#ffffff",
         "description": "Navbar background (independent of the page background)"
     },
+    {
+        "key": "navbarBackgroundImage",
+        "cssVar": "--coras-brand-navbar-background-image",
+        "type": "gradient",
+        "group": "Navigation bar",
+        "label": "Background Gradient",
+        "default": "none",
+        "description": "Optional gradient painted over the Background Colour on the web. The mobile menu, the border and emails keep the solid colour"
+    },
     {
         "key": "navbarText",
         "cssVar": "--coras-brand-navbar-text",
@@ -378,6 +387,15 @@ export const TOKEN_CONTROLS = [
         "default": "#e6e6e6",
         "description": "Footer background, on the web and in emails"
     },
+    {
+        "key": "footerBackgroundImage",
+        "cssVar": "--coras-brand-footer-background-image",
+        "type": "gradient",
+        "group": "Footer",
+        "label": "Background Gradient",
+        "default": "none",
+        "description": "Optional gradient painted over the Background Colour on the web. The border and emails keep the solid colour"
+    },
     {
         "key": "footerText",
         "cssVar": "--coras-brand-footer-text",

package/dist/views/details-page/details-page.component.js

@@ -145,8 +145,12 @@ let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixi
                         size: 0,
                     },
                 }));
+                // A failed or empty response has no attraction to render. Returning an
+                // empty object here would complete the task, so every render branch below
+                // would dereference `attraction` on it and throw. Fail the task instead so
+                // the error modal is shown.
                 if (!result.data) {
-                    return {};
+                    throw new Error("Attraction data not available");
                 }
                 this.verifyDate(result.data.first_instance_date, result.data.last_instance_date, result.data.attraction.timezone);
                 this.isSingleDayAvailability = isSingleDayAvailability(result.data.attraction.sale_periods ?? null);

package/package.json

@@ -20,7 +20,7 @@
   "engines": {
     "node": ">=22"
   },
-  "version": "0.3.0",
+  "version": "0.5.0",
   "private": false,
   "homepage": "https://embed.coras.io",
   "bugs": {
@@ -104,7 +104,7 @@
     "typescript-eslint": "8.67.0",
     "vite": "8.2.2",
     "vitest": "4.1.11",
-    "@coras-io/static": "0.0.3"
+    "@coras-io/static": "0.0.4"
   },
   "dependencies": {
     "@coinbase/cdp-core": "0.0.122",
@@ -122,7 +122,7 @@
     "lit": "^3.3.3",
     "openapi-fetch": "0.17.0",
     "viem": "2.55.19",
-    "@coras-io/brand-tokens": "^0.3.0"
+    "@coras-io/brand-tokens": "^0.4.0"
   },
   "scripts": {
     "lint": "eslint \"src/**/*.ts*\"",
@@ -143,7 +143,7 @@
     "check:styles": "node scripts/check-styles.mjs",
     "measure:bundle": "node scripts/measure-bundle.mjs",
     "localize:extract": "lit-localize extract",
-    "localize:build": "lit-localize build",
+    "localize:build": "lit-localize build && node scripts/decode-locale-entities.mjs",
     "storybook": "storybook dev --no-open -p 8082",
     "storybook:build": "storybook build --output-dir dist-storybook",
     "storybook:test": "vitest run --config vitest.storybook.config.ts",