@coras-io/embed 0.1.0

package/dist/styles/tokens.css

@@ -0,0 +1,359 @@
+/* GENERATED by scripts/generate-tokens.mjs — do not edit by hand. */
+/* CSS-first four-tier token system (plan F-004, P-051..P-055). */
+
+@layer coras.palette, coras.brand, coras.semantic, coras.components;
+
+@property --coras-brand-primary {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #4657d4;
+}
+@property --coras-brand-secondary {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #161c44;
+}
+@property --coras-brand-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ffffff;
+}
+@property --coras-brand-surface {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #fcfcff;
+}
+@property --coras-brand-text {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #161c44;
+}
+@property --coras-brand-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1.5rem;
+}
+@property --coras-brand-text-button {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #4657d4;
+}
+@property --coras-brand-body-icon {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #161c44;
+}
+@property --coras-brand-button-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1.5rem;
+}
+@property --coras-brand-chip-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1.5rem;
+}
+@property --coras-brand-navbar {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ffffff;
+}
+@property --coras-brand-navbar-text {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #000000;
+}
+@property --coras-brand-navbar-icon {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #000000;
+}
+@property --coras-brand-navbar-border {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --coras-brand-footer {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #e6e6e6;
+}
+@property --coras-brand-footer-text {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #000000;
+}
+@property --coras-brand-footer-link {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #000000;
+}
+@property --coras-brand-error {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #c9224a;
+}
+@property --coras-brand-success {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #00ad8f;
+}
+@property --coras-brand-warning {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ed8f1c;
+}
+@property --coras-brand-info {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #670c93;
+}
+
+@layer coras.palette {
+  :where([data-coras-root], .coras-theme) {
+    --coras-palette-primary-50: #fcfcff;
+    --coras-palette-primary-100: #fbfbff;
+    --coras-palette-primary-200: #eef0ff;
+    --coras-palette-primary-300: #dde1ff;
+    --coras-palette-primary-400: #5468ff;
+    --coras-palette-primary-500: #4657d4;
+    --coras-palette-primary-700: #323e99;
+    --coras-palette-secondary-50: #e8e8ec;
+    --coras-palette-secondary-100: #d0d2da;
+    --coras-palette-secondary-200: #b9bbc7;
+    --coras-palette-secondary-300: #a2a4b4;
+    --coras-palette-secondary-400: #1c2355;
+    --coras-palette-secondary-500: #161c44;
+    --coras-palette-secondary-700: #121636;
+    --coras-palette-neutral-50: #f5f5f5;
+    --coras-palette-neutral-100: #eeeeee;
+    --coras-palette-neutral-200: #e6e6e6;
+    --coras-palette-neutral-300: #dddddd;
+    --coras-palette-neutral-400: #cccccc;
+    --coras-palette-neutral-500: #aaaaaa;
+    --coras-palette-neutral-600: #888888;
+    --coras-palette-neutral-700: #666666;
+    --coras-palette-neutral-800: #444444;
+    --coras-palette-neutral-900: #292929;
+    --coras-palette-error-50: #fae9ed;
+    --coras-palette-error-500: #c9224a;
+    --coras-palette-error-700: #a11b3b;
+    --coras-palette-error-900: #79142c;
+    --coras-palette-info-50: #f0e7f4;
+    --coras-palette-info-500: #670c93;
+    --coras-palette-info-700: #520a76;
+    --coras-palette-info-900: #3e0758;
+    --coras-palette-success-50: #e6f7f4;
+    --coras-palette-success-500: #00ad8f;
+    --coras-palette-success-700: #008a72;
+    --coras-palette-success-900: #006856;
+    --coras-palette-warning-50: #fdf4e8;
+    --coras-palette-warning-500: #ed8f1c;
+    --coras-palette-warning-700: #be7216;
+    --coras-palette-warning-900: #8e5611;
+    --coras-palette-pink-500: #ff2d55;
+    --coras-palette-black: #000000;
+    --coras-palette-white: #ffffff;
+  }
+}
+
+@layer coras.brand {
+  :where([data-coras-root], .coras-theme) {
+    color-scheme: light;
+    --coras-brand-primary: var(--coras-palette-primary-500);
+    --coras-brand-secondary: var(--coras-palette-secondary-500);
+    --coras-brand-background: light-dark(var(--coras-palette-white), #101216);
+    --coras-brand-surface: light-dark(var(--coras-palette-primary-50), #191c22);
+    --coras-brand-text: light-dark(var(--coras-palette-secondary-500), #ffffff);
+    --coras-brand-text-muted: light-dark(var(--coras-palette-neutral-600), #cccccc);
+    --coras-brand-radius: 1.5rem;
+    --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";
+    --coras-brand-text-button: var(--coras-brand-primary);
+    --coras-brand-body-icon: var(--coras-brand-text);
+    --coras-brand-button-radius: var(--coras-brand-radius);
+    --coras-brand-chip-radius: var(--coras-brand-radius);
+    --coras-brand-navbar: light-dark(var(--coras-palette-white), #101216);
+    --coras-brand-navbar-text: light-dark(var(--coras-palette-black), #ffffff);
+    --coras-brand-navbar-icon: var(--coras-brand-navbar-text);
+    --coras-brand-navbar-border: transparent;
+    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);
+    --coras-brand-footer: light-dark(var(--coras-palette-neutral-200), #191c22);
+    --coras-brand-footer-text: light-dark(var(--coras-palette-black), #ffffff);
+    --coras-brand-footer-link: var(--coras-brand-footer-text);
+    --coras-brand-error: light-dark(var(--coras-palette-error-500), #ef6e85);
+    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);
+    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);
+    --coras-brand-info: light-dark(var(--coras-palette-info-500), #b07cd6);
+  }
+}
+
+@layer coras.semantic {
+  :where([data-coras-root], .coras-theme) {
+    --coras-color-primary-50: color-mix(in oklch, var(--coras-brand-primary) 8%, var(--coras-brand-surface));
+    --coras-color-primary-100: color-mix(in oklch, var(--coras-brand-primary) 14%, var(--coras-brand-surface));
+    --coras-color-primary-200: color-mix(in oklch, var(--coras-brand-primary) 24%, var(--coras-brand-surface));
+    --coras-color-primary-300: color-mix(in oklch, var(--coras-brand-primary) 48%, var(--coras-brand-surface));
+    --coras-color-primary-400: color-mix(in oklch, var(--coras-brand-primary) 72%, var(--coras-brand-surface));
+    --coras-color-primary-500: var(--coras-brand-primary);
+    --coras-color-primary-700: color-mix(in oklch, var(--coras-brand-primary), black 32%);
+    --coras-color-secondary-50: color-mix(in oklch, var(--coras-brand-secondary) 8%, var(--coras-brand-surface));
+    --coras-color-secondary-100: color-mix(in oklch, var(--coras-brand-secondary) 14%, var(--coras-brand-surface));
+    --coras-color-secondary-200: color-mix(in oklch, var(--coras-brand-secondary) 24%, var(--coras-brand-surface));
+    --coras-color-secondary-300: color-mix(in oklch, var(--coras-brand-secondary) 48%, var(--coras-brand-surface));
+    --coras-color-secondary-400: color-mix(in oklch, var(--coras-brand-secondary) 72%, var(--coras-brand-surface));
+    --coras-color-secondary-500: var(--coras-brand-secondary);
+    --coras-color-secondary-700: color-mix(in oklch, var(--coras-brand-secondary), black 32%);
+    --coras-color-error-50: color-mix(in oklch, var(--coras-brand-error) 8%, var(--coras-brand-surface));
+    --coras-color-error-500: var(--coras-brand-error);
+    --coras-color-error-700: color-mix(in oklch, var(--coras-brand-error), black 32%);
+    --coras-color-error-900: color-mix(in oklch, var(--coras-brand-error), black 55%);
+    --coras-color-success-50: color-mix(in oklch, var(--coras-brand-success) 8%, var(--coras-brand-surface));
+    --coras-color-success-500: var(--coras-brand-success);
+    --coras-color-success-700: color-mix(in oklch, var(--coras-brand-success), black 32%);
+    --coras-color-success-900: color-mix(in oklch, var(--coras-brand-success), black 55%);
+    --coras-color-warning-50: color-mix(in oklch, var(--coras-brand-warning) 8%, var(--coras-brand-surface));
+    --coras-color-warning-500: var(--coras-brand-warning);
+    --coras-color-warning-700: color-mix(in oklch, var(--coras-brand-warning), black 32%);
+    --coras-color-warning-900: color-mix(in oklch, var(--coras-brand-warning), black 55%);
+    --coras-color-info-50: color-mix(in oklch, var(--coras-brand-info) 8%, var(--coras-brand-surface));
+    --coras-color-info-500: var(--coras-brand-info);
+    --coras-color-info-700: color-mix(in oklch, var(--coras-brand-info), black 32%);
+    --coras-color-info-900: color-mix(in oklch, var(--coras-brand-info), black 55%);
+    --coras-color-neutral-50: var(--coras-palette-neutral-50);
+    --coras-color-neutral-100: var(--coras-palette-neutral-100);
+    --coras-color-neutral-200: var(--coras-palette-neutral-200);
+    --coras-color-neutral-300: var(--coras-palette-neutral-300);
+    --coras-color-neutral-400: var(--coras-palette-neutral-400);
+    --coras-color-neutral-500: var(--coras-palette-neutral-500);
+    --coras-color-neutral-600: var(--coras-palette-neutral-600);
+    --coras-color-neutral-700: var(--coras-palette-neutral-700);
+    --coras-color-neutral-800: var(--coras-palette-neutral-800);
+    --coras-color-neutral-900: var(--coras-palette-neutral-900);
+    --coras-color-background: var(--coras-brand-background);
+    --coras-color-surface: var(--coras-brand-surface);
+    --coras-color-surface-sunken: light-dark(var(--coras-palette-neutral-50), #0b0d10);
+    --coras-color-surface-hover: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 50%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 8%, transparent));
+    --coras-color-surface-muted: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));
+    --coras-color-text: var(--coras-brand-text);
+    --coras-color-text-primary: var(--coras-brand-text);
+    --coras-color-text-secondary: light-dark(var(--coras-palette-neutral-700), var(--coras-palette-neutral-300));
+    --coras-color-text-muted: var(--coras-brand-text-muted);
+    --coras-color-text-disabled: var(--coras-palette-neutral-500);
+    --coras-state-overlay: #000;
+    --coras-state-hover: 10%;
+    --coras-state-active: 18%;
+    --coras-state-selected: 12%;
+    --coras-color-action: var(--coras-brand-primary);
+    --coras-color-action-hover: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-hover));
+    --coras-color-action-active: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-active));
+    --coras-color-action-text: var(--coras-palette-white);
+    --coras-color-primary: var(--coras-brand-primary);
+    --coras-color-primary-hover: var(--coras-color-action-hover);
+    --coras-color-text-button: var(--coras-brand-text-button);
+    --coras-color-icon: var(--coras-brand-body-icon);
+    --coras-color-border: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-800));
+    --coras-color-divider: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-900));
+    --coras-color-focus-ring: var(--coras-brand-primary);
+    --coras-color-error: var(--coras-brand-error);
+    --coras-color-error-surface: var(--coras-color-error-50);
+    --coras-color-success: var(--coras-brand-success);
+    --coras-color-success-surface: var(--coras-color-success-50);
+    --coras-color-warning: var(--coras-brand-warning);
+    --coras-color-warning-surface: var(--coras-color-warning-50);
+    --coras-color-info: var(--coras-brand-info);
+    --coras-color-info-surface: var(--coras-color-info-50);
+    --coras-font-family-sans: var(--coras-brand-font);
+    --coras-font-size-xxs: 0.625rem;
+    --coras-font-size-xs: 0.75rem;
+    --coras-font-size-sm: 0.875rem;
+    --coras-font-size-base: 1rem;
+    --coras-font-size-lg: 1.125rem;
+    --coras-font-size-xl: 1.25rem;
+    --coras-font-size-2xl: 1.5rem;
+    --coras-font-size-3xl: 2.25rem;
+    --coras-font-size-4xl: 3rem;
+    --coras-font-size-5xl: 3.5rem;
+    --coras-font-weight-light: 300;
+    --coras-font-weight-normal: 400;
+    --coras-font-weight-medium: 500;
+    --coras-font-weight-semibold: 600;
+    --coras-font-weight-bold: 700;
+    --coras-radius-none: 0;
+    --coras-radius-xs: calc(var(--coras-brand-radius) / 6);
+    --coras-radius-sm: calc(var(--coras-brand-radius) / 3);
+    --coras-radius-md: calc(var(--coras-brand-radius) * 2 / 3);
+    --coras-radius-lg: var(--coras-brand-radius);
+    --coras-radius-xl: calc(var(--coras-brand-radius) * 7 / 6);
+    --coras-radius-2xl: calc(var(--coras-brand-radius) * 4 / 3);
+    --coras-radius-full: 9999px;
+    --coras-radius-control: 0.25rem;
+    --coras-radius-field: 0.5rem;
+    --coras-radius-button: var(--coras-brand-button-radius);
+    --coras-radius-chip: var(--coras-brand-chip-radius);
+    --coras-shadow-sm: 0px 4px 4px rgba(0, 0, 0, 0.04);
+    --coras-shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.1);
+    --coras-shadow-lg: 0px 24px 24px rgba(0, 0, 0, 0.04);
+    --coras-shadow-top: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);
+    --coras-shadow-strong: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
+    --coras-page-max-width: 950px;
+    --coras-container-max-width: 1368px;
+    --coras-footer-max-width: 1073px;
+    --coras-z-index-overlay: 1000;
+    --coras-navbar-padding: 1rem;
+    --coras-content-padding: 0 1rem;
+    --coras-footer-padding: 4rem 2rem;
+    --coras-width-mobile: 375px;
+    --coras-width-tablet: 768px;
+    --coras-width-desktop: 1024px;
+  }
+}
+
+@layer coras.components {
+  :where([data-coras-root], .coras-theme) {
+    --coras-base-background-color: var(--coras-color-background);
+    --coras-base-text-color: var(--coras-color-text);
+    --coras-base-primary-background-color: var(--coras-color-text);
+    --coras-base-footer-background-color: light-dark(var(--coras-palette-primary-100), #191c22);
+    --coras-navbar-background: var(--coras-brand-navbar);
+    --coras-navbar-text-color: var(--coras-brand-navbar-text);
+    --coras-navbar-border-bottom: 1px solid var(--coras-brand-navbar-border);
+    --coras-navbar-shadow: var(--coras-brand-navbar-shadow);
+    --coras-navbar-icon-color: var(--coras-brand-navbar-icon);
+    --coras-footer-background-color: var(--coras-brand-footer);
+    --coras-footer-text-color: var(--coras-brand-footer-text);
+    --coras-footer-link-color: var(--coras-brand-footer-link);
+    --coras-button-primary-background: var(--coras-color-action);
+    --coras-button-primary-text-color: var(--coras-color-action-text);
+    --coras-button-primary-background-hover: var(--coras-color-action-hover);
+    --coras-button-primary-text-color-hover: var(--coras-color-action-text);
+    --coras-button-primary-background-active: var(--coras-color-action-active);
+    --coras-button-primary-text-color-active: var(--coras-color-action-text);
+    --coras-input-field-background-color: var(--coras-color-background);
+    --coras-basket-accent-color: var(--coras-brand-secondary);
+  }
+}
+
+@layer coras.components {
+  /* SDK-owned query container: embedded pages respond to the container width,
+     never the viewport (P-062). Components query `@container coras-page`. */
+  :where([data-coras-root]) {
+    container: coras-page / inline-size;
+    max-width: 100%;
+    /* The page background is opt-in: transparent by default so the embed adopts
+       the host page's background, and painted only when the brand sets a
+       background (the theme/override paths mirror it onto --coras-page-background,
+       which is intentionally undefined here). The text colour always follows the
+       brand; chrome paints its own background on top. */
+    background-color: var(--coras-page-background, transparent);
+    color: var(--coras-base-text-color);
+  }
+  /* The SDK-created page element is the root's only child. Make it block-level
+     so it fills the container: custom elements default to `display: inline`,
+     whose `clientWidth` is 0, which forces width-aware layouts into mobile.
+     The body icon colour is set here as an inherited `fill`: content icons pick
+     it up, while chrome (navbar/footer) sets its own fill and is unaffected. */
+  :where([data-coras-root]) > * {
+    display: block;
+    fill: var(--coras-color-icon);
+  }
+}

package/dist/styles/tokens.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The CSS-first four-tier token system (plan F-004). Tokens are scoped to the
+ * mount container (`[data-coras-root]`, or `.coras-theme` for standalone
+ * usage), never global `:root`, so several differently
+ * themed Coras mounts can share one page (P-061).
+ *
+ * Custom properties inherit across shadow boundaries, so defining them on the
+ * 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 \u2014 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-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-surface {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #fcfcff;\n}\n@property --coras-brand-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-text-button {\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-button-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-chip-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-navbar {\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: transparent;\n}\n@property --coras-brand-footer {\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-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-surface: light-dark(var(--coras-palette-primary-50), #191c22);\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-radius: 1.5rem;\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-text-button: var(--coras-brand-primary);\n    --coras-brand-body-icon: var(--coras-brand-text);\n    --coras-brand-button-radius: var(--coras-brand-radius);\n    --coras-brand-chip-radius: var(--coras-brand-radius);\n    --coras-brand-navbar: 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: transparent;\n    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n    --coras-brand-footer: 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-error: light-dark(var(--coras-palette-error-500), #ef6e85);\n    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n    --coras-brand-info: light-dark(var(--coras-palette-info-500), #b07cd6);\n  }\n}\n\n@layer coras.semantic {\n  :where([data-coras-root], .coras-theme) {\n    --coras-color-primary-50: color-mix(in oklch, var(--coras-brand-primary) 8%, var(--coras-brand-surface));\n    --coras-color-primary-100: color-mix(in oklch, var(--coras-brand-primary) 14%, var(--coras-brand-surface));\n    --coras-color-primary-200: color-mix(in oklch, var(--coras-brand-primary) 24%, var(--coras-brand-surface));\n    --coras-color-primary-300: color-mix(in oklch, var(--coras-brand-primary) 48%, var(--coras-brand-surface));\n    --coras-color-primary-400: color-mix(in oklch, var(--coras-brand-primary) 72%, var(--coras-brand-surface));\n    --coras-color-primary-500: var(--coras-brand-primary);\n    --coras-color-primary-700: color-mix(in oklch, var(--coras-brand-primary), black 32%);\n    --coras-color-secondary-50: color-mix(in oklch, var(--coras-brand-secondary) 8%, var(--coras-brand-surface));\n    --coras-color-secondary-100: color-mix(in oklch, var(--coras-brand-secondary) 14%, var(--coras-brand-surface));\n    --coras-color-secondary-200: color-mix(in oklch, var(--coras-brand-secondary) 24%, var(--coras-brand-surface));\n    --coras-color-secondary-300: color-mix(in oklch, var(--coras-brand-secondary) 48%, var(--coras-brand-surface));\n    --coras-color-secondary-400: color-mix(in oklch, var(--coras-brand-secondary) 72%, var(--coras-brand-surface));\n    --coras-color-secondary-500: var(--coras-brand-secondary);\n    --coras-color-secondary-700: color-mix(in oklch, var(--coras-brand-secondary), black 32%);\n    --coras-color-error-50: color-mix(in oklch, var(--coras-brand-error) 8%, var(--coras-brand-surface));\n    --coras-color-error-500: var(--coras-brand-error);\n    --coras-color-error-700: color-mix(in oklch, var(--coras-brand-error), black 32%);\n    --coras-color-error-900: color-mix(in oklch, var(--coras-brand-error), black 55%);\n    --coras-color-success-50: color-mix(in oklch, var(--coras-brand-success) 8%, var(--coras-brand-surface));\n    --coras-color-success-500: var(--coras-brand-success);\n    --coras-color-success-700: color-mix(in oklch, var(--coras-brand-success), black 32%);\n    --coras-color-success-900: color-mix(in oklch, var(--coras-brand-success), black 55%);\n    --coras-color-warning-50: color-mix(in oklch, var(--coras-brand-warning) 8%, var(--coras-brand-surface));\n    --coras-color-warning-500: var(--coras-brand-warning);\n    --coras-color-warning-700: color-mix(in oklch, var(--coras-brand-warning), black 32%);\n    --coras-color-warning-900: color-mix(in oklch, var(--coras-brand-warning), black 55%);\n    --coras-color-info-50: color-mix(in oklch, var(--coras-brand-info) 8%, var(--coras-brand-surface));\n    --coras-color-info-500: var(--coras-brand-info);\n    --coras-color-info-700: color-mix(in oklch, var(--coras-brand-info), black 32%);\n    --coras-color-info-900: color-mix(in oklch, var(--coras-brand-info), black 55%);\n    --coras-color-neutral-50: var(--coras-palette-neutral-50);\n    --coras-color-neutral-100: var(--coras-palette-neutral-100);\n    --coras-color-neutral-200: var(--coras-palette-neutral-200);\n    --coras-color-neutral-300: var(--coras-palette-neutral-300);\n    --coras-color-neutral-400: var(--coras-palette-neutral-400);\n    --coras-color-neutral-500: var(--coras-palette-neutral-500);\n    --coras-color-neutral-600: var(--coras-palette-neutral-600);\n    --coras-color-neutral-700: var(--coras-palette-neutral-700);\n    --coras-color-neutral-800: var(--coras-palette-neutral-800);\n    --coras-color-neutral-900: var(--coras-palette-neutral-900);\n    --coras-color-background: var(--coras-brand-background);\n    --coras-color-surface: var(--coras-brand-surface);\n    --coras-color-surface-sunken: light-dark(var(--coras-palette-neutral-50), #0b0d10);\n    --coras-color-surface-hover: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 50%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 8%, transparent));\n    --coras-color-surface-muted: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n    --coras-color-text: var(--coras-brand-text);\n    --coras-color-text-primary: var(--coras-brand-text);\n    --coras-color-text-secondary: light-dark(var(--coras-palette-neutral-700), var(--coras-palette-neutral-300));\n    --coras-color-text-muted: var(--coras-brand-text-muted);\n    --coras-color-text-disabled: var(--coras-palette-neutral-500);\n    --coras-state-overlay: #000;\n    --coras-state-hover: 10%;\n    --coras-state-active: 18%;\n    --coras-state-selected: 12%;\n    --coras-color-action: var(--coras-brand-primary);\n    --coras-color-action-hover: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-action-active: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-active));\n    --coras-color-action-text: var(--coras-palette-white);\n    --coras-color-primary: var(--coras-brand-primary);\n    --coras-color-primary-hover: var(--coras-color-action-hover);\n    --coras-color-text-button: var(--coras-brand-text-button);\n    --coras-color-icon: var(--coras-brand-body-icon);\n    --coras-color-border: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-800));\n    --coras-color-divider: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-900));\n    --coras-color-focus-ring: var(--coras-brand-primary);\n    --coras-color-error: var(--coras-brand-error);\n    --coras-color-error-surface: var(--coras-color-error-50);\n    --coras-color-success: var(--coras-brand-success);\n    --coras-color-success-surface: var(--coras-color-success-50);\n    --coras-color-warning: var(--coras-brand-warning);\n    --coras-color-warning-surface: var(--coras-color-warning-50);\n    --coras-color-info: var(--coras-brand-info);\n    --coras-color-info-surface: var(--coras-color-info-50);\n    --coras-font-family-sans: var(--coras-brand-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-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: 0.5rem;\n    --coras-radius-button: var(--coras-brand-button-radius);\n    --coras-radius-chip: var(--coras-brand-chip-radius);\n    --coras-shadow-sm: 0px 4px 4px rgba(0, 0, 0, 0.04);\n    --coras-shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.1);\n    --coras-shadow-lg: 0px 24px 24px rgba(0, 0, 0, 0.04);\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    --coras-width-mobile: 375px;\n    --coras-width-tablet: 768px;\n    --coras-width-desktop: 1024px;\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root], .coras-theme) {\n    --coras-base-background-color: var(--coras-color-background);\n    --coras-base-text-color: var(--coras-color-text);\n    --coras-base-primary-background-color: var(--coras-color-text);\n    --coras-base-footer-background-color: light-dark(var(--coras-palette-primary-100), #191c22);\n    --coras-navbar-background: var(--coras-brand-navbar);\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-footer-background-color: var(--coras-brand-footer);\n    --coras-footer-text-color: var(--coras-brand-footer-text);\n    --coras-footer-link-color: var(--coras-brand-footer-link);\n    --coras-button-primary-background: var(--coras-color-action);\n    --coras-button-primary-text-color: var(--coras-color-action-text);\n    --coras-button-primary-background-hover: var(--coras-color-action-hover);\n    --coras-button-primary-text-color-hover: var(--coras-color-action-text);\n    --coras-button-primary-background-active: var(--coras-color-action-active);\n    --coras-button-primary-text-color-active: var(--coras-color-action-text);\n    --coras-input-field-background-color: var(--coras-color-background);\n    --coras-basket-accent-color: var(--coras-brand-secondary);\n  }\n}\n\n@layer coras.components {\n  /* SDK-owned query container: embedded pages respond to the container width,\n     never the viewport (P-062). Components query `@container coras-page`. */\n  :where([data-coras-root]) {\n    container: coras-page / inline-size;\n    max-width: 100%;\n    /* The page background is opt-in: transparent by default so the embed adopts\n       the host page's background, and painted only when the brand sets a\n       background (the theme/override paths mirror it onto --coras-page-background,\n       which is intentionally undefined here). The text colour always follows the\n       brand; chrome paints its own background on top. */\n    background-color: var(--coras-page-background, transparent);\n    color: var(--coras-base-text-color);\n  }\n  /* The SDK-created page element is the root's only child. Make it block-level\n     so it fills the container: custom elements default to `display: inline`,\n     whose `clientWidth` is 0, which forces width-aware layouts into mobile.\n     The body icon colour is set here as an inherited `fill`: content icons pick\n     it up, while chrome (navbar/footer) sets its own fill and is unaffected. */\n  :where([data-coras-root]) > * {\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
+ * single constructable sheet is shared across every mount. Falls back to an
+ * injected `<style>` element when constructable stylesheets are unavailable.
+ */
+export declare function ensureTokensInjected(root: Document | ShadowRoot): void;

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

@@ -0,0 +1 @@
+export declare const CORAS_TOKENS_CSS = "/* GENERATED by scripts/generate-tokens.mjs \u2014 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-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-surface {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #fcfcff;\n}\n@property --coras-brand-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-text-button {\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-button-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-chip-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-navbar {\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: transparent;\n}\n@property --coras-brand-footer {\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-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-surface: light-dark(var(--coras-palette-primary-50), #191c22);\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-radius: 1.5rem;\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-text-button: var(--coras-brand-primary);\n    --coras-brand-body-icon: var(--coras-brand-text);\n    --coras-brand-button-radius: var(--coras-brand-radius);\n    --coras-brand-chip-radius: var(--coras-brand-radius);\n    --coras-brand-navbar: 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: transparent;\n    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n    --coras-brand-footer: 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-error: light-dark(var(--coras-palette-error-500), #ef6e85);\n    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n    --coras-brand-info: light-dark(var(--coras-palette-info-500), #b07cd6);\n  }\n}\n\n@layer coras.semantic {\n  :where([data-coras-root], .coras-theme) {\n    --coras-color-primary-50: color-mix(in oklch, var(--coras-brand-primary) 8%, var(--coras-brand-surface));\n    --coras-color-primary-100: color-mix(in oklch, var(--coras-brand-primary) 14%, var(--coras-brand-surface));\n    --coras-color-primary-200: color-mix(in oklch, var(--coras-brand-primary) 24%, var(--coras-brand-surface));\n    --coras-color-primary-300: color-mix(in oklch, var(--coras-brand-primary) 48%, var(--coras-brand-surface));\n    --coras-color-primary-400: color-mix(in oklch, var(--coras-brand-primary) 72%, var(--coras-brand-surface));\n    --coras-color-primary-500: var(--coras-brand-primary);\n    --coras-color-primary-700: color-mix(in oklch, var(--coras-brand-primary), black 32%);\n    --coras-color-secondary-50: color-mix(in oklch, var(--coras-brand-secondary) 8%, var(--coras-brand-surface));\n    --coras-color-secondary-100: color-mix(in oklch, var(--coras-brand-secondary) 14%, var(--coras-brand-surface));\n    --coras-color-secondary-200: color-mix(in oklch, var(--coras-brand-secondary) 24%, var(--coras-brand-surface));\n    --coras-color-secondary-300: color-mix(in oklch, var(--coras-brand-secondary) 48%, var(--coras-brand-surface));\n    --coras-color-secondary-400: color-mix(in oklch, var(--coras-brand-secondary) 72%, var(--coras-brand-surface));\n    --coras-color-secondary-500: var(--coras-brand-secondary);\n    --coras-color-secondary-700: color-mix(in oklch, var(--coras-brand-secondary), black 32%);\n    --coras-color-error-50: color-mix(in oklch, var(--coras-brand-error) 8%, var(--coras-brand-surface));\n    --coras-color-error-500: var(--coras-brand-error);\n    --coras-color-error-700: color-mix(in oklch, var(--coras-brand-error), black 32%);\n    --coras-color-error-900: color-mix(in oklch, var(--coras-brand-error), black 55%);\n    --coras-color-success-50: color-mix(in oklch, var(--coras-brand-success) 8%, var(--coras-brand-surface));\n    --coras-color-success-500: var(--coras-brand-success);\n    --coras-color-success-700: color-mix(in oklch, var(--coras-brand-success), black 32%);\n    --coras-color-success-900: color-mix(in oklch, var(--coras-brand-success), black 55%);\n    --coras-color-warning-50: color-mix(in oklch, var(--coras-brand-warning) 8%, var(--coras-brand-surface));\n    --coras-color-warning-500: var(--coras-brand-warning);\n    --coras-color-warning-700: color-mix(in oklch, var(--coras-brand-warning), black 32%);\n    --coras-color-warning-900: color-mix(in oklch, var(--coras-brand-warning), black 55%);\n    --coras-color-info-50: color-mix(in oklch, var(--coras-brand-info) 8%, var(--coras-brand-surface));\n    --coras-color-info-500: var(--coras-brand-info);\n    --coras-color-info-700: color-mix(in oklch, var(--coras-brand-info), black 32%);\n    --coras-color-info-900: color-mix(in oklch, var(--coras-brand-info), black 55%);\n    --coras-color-neutral-50: var(--coras-palette-neutral-50);\n    --coras-color-neutral-100: var(--coras-palette-neutral-100);\n    --coras-color-neutral-200: var(--coras-palette-neutral-200);\n    --coras-color-neutral-300: var(--coras-palette-neutral-300);\n    --coras-color-neutral-400: var(--coras-palette-neutral-400);\n    --coras-color-neutral-500: var(--coras-palette-neutral-500);\n    --coras-color-neutral-600: var(--coras-palette-neutral-600);\n    --coras-color-neutral-700: var(--coras-palette-neutral-700);\n    --coras-color-neutral-800: var(--coras-palette-neutral-800);\n    --coras-color-neutral-900: var(--coras-palette-neutral-900);\n    --coras-color-background: var(--coras-brand-background);\n    --coras-color-surface: var(--coras-brand-surface);\n    --coras-color-surface-sunken: light-dark(var(--coras-palette-neutral-50), #0b0d10);\n    --coras-color-surface-hover: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 50%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 8%, transparent));\n    --coras-color-surface-muted: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n    --coras-color-text: var(--coras-brand-text);\n    --coras-color-text-primary: var(--coras-brand-text);\n    --coras-color-text-secondary: light-dark(var(--coras-palette-neutral-700), var(--coras-palette-neutral-300));\n    --coras-color-text-muted: var(--coras-brand-text-muted);\n    --coras-color-text-disabled: var(--coras-palette-neutral-500);\n    --coras-state-overlay: #000;\n    --coras-state-hover: 10%;\n    --coras-state-active: 18%;\n    --coras-state-selected: 12%;\n    --coras-color-action: var(--coras-brand-primary);\n    --coras-color-action-hover: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-action-active: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-active));\n    --coras-color-action-text: var(--coras-palette-white);\n    --coras-color-primary: var(--coras-brand-primary);\n    --coras-color-primary-hover: var(--coras-color-action-hover);\n    --coras-color-text-button: var(--coras-brand-text-button);\n    --coras-color-icon: var(--coras-brand-body-icon);\n    --coras-color-border: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-800));\n    --coras-color-divider: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-900));\n    --coras-color-focus-ring: var(--coras-brand-primary);\n    --coras-color-error: var(--coras-brand-error);\n    --coras-color-error-surface: var(--coras-color-error-50);\n    --coras-color-success: var(--coras-brand-success);\n    --coras-color-success-surface: var(--coras-color-success-50);\n    --coras-color-warning: var(--coras-brand-warning);\n    --coras-color-warning-surface: var(--coras-color-warning-50);\n    --coras-color-info: var(--coras-brand-info);\n    --coras-color-info-surface: var(--coras-color-info-50);\n    --coras-font-family-sans: var(--coras-brand-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-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: 0.5rem;\n    --coras-radius-button: var(--coras-brand-button-radius);\n    --coras-radius-chip: var(--coras-brand-chip-radius);\n    --coras-shadow-sm: 0px 4px 4px rgba(0, 0, 0, 0.04);\n    --coras-shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.1);\n    --coras-shadow-lg: 0px 24px 24px rgba(0, 0, 0, 0.04);\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    --coras-width-mobile: 375px;\n    --coras-width-tablet: 768px;\n    --coras-width-desktop: 1024px;\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root], .coras-theme) {\n    --coras-base-background-color: var(--coras-color-background);\n    --coras-base-text-color: var(--coras-color-text);\n    --coras-base-primary-background-color: var(--coras-color-text);\n    --coras-base-footer-background-color: light-dark(var(--coras-palette-primary-100), #191c22);\n    --coras-navbar-background: var(--coras-brand-navbar);\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-footer-background-color: var(--coras-brand-footer);\n    --coras-footer-text-color: var(--coras-brand-footer-text);\n    --coras-footer-link-color: var(--coras-brand-footer-link);\n    --coras-button-primary-background: var(--coras-color-action);\n    --coras-button-primary-text-color: var(--coras-color-action-text);\n    --coras-button-primary-background-hover: var(--coras-color-action-hover);\n    --coras-button-primary-text-color-hover: var(--coras-color-action-text);\n    --coras-button-primary-background-active: var(--coras-color-action-active);\n    --coras-button-primary-text-color-active: var(--coras-color-action-text);\n    --coras-input-field-background-color: var(--coras-color-background);\n    --coras-basket-accent-color: var(--coras-brand-secondary);\n  }\n}\n\n@layer coras.components {\n  /* SDK-owned query container: embedded pages respond to the container width,\n     never the viewport (P-062). Components query `@container coras-page`. */\n  :where([data-coras-root]) {\n    container: coras-page / inline-size;\n    max-width: 100%;\n    /* The page background is opt-in: transparent by default so the embed adopts\n       the host page's background, and painted only when the brand sets a\n       background (the theme/override paths mirror it onto --coras-page-background,\n       which is intentionally undefined here). The text colour always follows the\n       brand; chrome paints its own background on top. */\n    background-color: var(--coras-page-background, transparent);\n    color: var(--coras-base-text-color);\n  }\n  /* The SDK-created page element is the root's only child. Make it block-level\n     so it fills the container: custom elements default to `display: inline`,\n     whose `clientWidth` is 0, which forces width-aware layouts into mobile.\n     The body icon colour is set here as an inherited `fill`: content icons pick\n     it up, while chrome (navbar/footer) sets its own fill and is unaffected. */\n  :where([data-coras-root]) > * {\n    display: block;\n    fill: var(--coras-color-icon);\n  }\n}\n";

package/dist/styles/tokens.generated.js

@@ -0,0 +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-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #ffffff;\n}\n@property --coras-brand-surface {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #fcfcff;\n}\n@property --coras-brand-text {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: #161c44;\n}\n@property --coras-brand-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-text-button {\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-button-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-chip-radius {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 1.5rem;\n}\n@property --coras-brand-navbar {\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: transparent;\n}\n@property --coras-brand-footer {\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-background: light-dark(var(--coras-palette-white), #101216);\n    --coras-brand-surface: light-dark(var(--coras-palette-primary-50), #191c22);\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-radius: 1.5rem;\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-text-button: var(--coras-brand-primary);\n    --coras-brand-body-icon: var(--coras-brand-text);\n    --coras-brand-button-radius: var(--coras-brand-radius);\n    --coras-brand-chip-radius: var(--coras-brand-radius);\n    --coras-brand-navbar: 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: transparent;\n    --coras-brand-navbar-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);\n    --coras-brand-footer: 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-error: light-dark(var(--coras-palette-error-500), #ef6e85);\n    --coras-brand-success: light-dark(var(--coras-palette-success-500), #34d8b4);\n    --coras-brand-warning: light-dark(var(--coras-palette-warning-500), #f4a93c);\n    --coras-brand-info: light-dark(var(--coras-palette-info-500), #b07cd6);\n  }\n}\n\n@layer coras.semantic {\n  :where([data-coras-root], .coras-theme) {\n    --coras-color-primary-50: color-mix(in oklch, var(--coras-brand-primary) 8%, var(--coras-brand-surface));\n    --coras-color-primary-100: color-mix(in oklch, var(--coras-brand-primary) 14%, var(--coras-brand-surface));\n    --coras-color-primary-200: color-mix(in oklch, var(--coras-brand-primary) 24%, var(--coras-brand-surface));\n    --coras-color-primary-300: color-mix(in oklch, var(--coras-brand-primary) 48%, var(--coras-brand-surface));\n    --coras-color-primary-400: color-mix(in oklch, var(--coras-brand-primary) 72%, var(--coras-brand-surface));\n    --coras-color-primary-500: var(--coras-brand-primary);\n    --coras-color-primary-700: color-mix(in oklch, var(--coras-brand-primary), black 32%);\n    --coras-color-secondary-50: color-mix(in oklch, var(--coras-brand-secondary) 8%, var(--coras-brand-surface));\n    --coras-color-secondary-100: color-mix(in oklch, var(--coras-brand-secondary) 14%, var(--coras-brand-surface));\n    --coras-color-secondary-200: color-mix(in oklch, var(--coras-brand-secondary) 24%, var(--coras-brand-surface));\n    --coras-color-secondary-300: color-mix(in oklch, var(--coras-brand-secondary) 48%, var(--coras-brand-surface));\n    --coras-color-secondary-400: color-mix(in oklch, var(--coras-brand-secondary) 72%, var(--coras-brand-surface));\n    --coras-color-secondary-500: var(--coras-brand-secondary);\n    --coras-color-secondary-700: color-mix(in oklch, var(--coras-brand-secondary), black 32%);\n    --coras-color-error-50: color-mix(in oklch, var(--coras-brand-error) 8%, var(--coras-brand-surface));\n    --coras-color-error-500: var(--coras-brand-error);\n    --coras-color-error-700: color-mix(in oklch, var(--coras-brand-error), black 32%);\n    --coras-color-error-900: color-mix(in oklch, var(--coras-brand-error), black 55%);\n    --coras-color-success-50: color-mix(in oklch, var(--coras-brand-success) 8%, var(--coras-brand-surface));\n    --coras-color-success-500: var(--coras-brand-success);\n    --coras-color-success-700: color-mix(in oklch, var(--coras-brand-success), black 32%);\n    --coras-color-success-900: color-mix(in oklch, var(--coras-brand-success), black 55%);\n    --coras-color-warning-50: color-mix(in oklch, var(--coras-brand-warning) 8%, var(--coras-brand-surface));\n    --coras-color-warning-500: var(--coras-brand-warning);\n    --coras-color-warning-700: color-mix(in oklch, var(--coras-brand-warning), black 32%);\n    --coras-color-warning-900: color-mix(in oklch, var(--coras-brand-warning), black 55%);\n    --coras-color-info-50: color-mix(in oklch, var(--coras-brand-info) 8%, var(--coras-brand-surface));\n    --coras-color-info-500: var(--coras-brand-info);\n    --coras-color-info-700: color-mix(in oklch, var(--coras-brand-info), black 32%);\n    --coras-color-info-900: color-mix(in oklch, var(--coras-brand-info), black 55%);\n    --coras-color-neutral-50: var(--coras-palette-neutral-50);\n    --coras-color-neutral-100: var(--coras-palette-neutral-100);\n    --coras-color-neutral-200: var(--coras-palette-neutral-200);\n    --coras-color-neutral-300: var(--coras-palette-neutral-300);\n    --coras-color-neutral-400: var(--coras-palette-neutral-400);\n    --coras-color-neutral-500: var(--coras-palette-neutral-500);\n    --coras-color-neutral-600: var(--coras-palette-neutral-600);\n    --coras-color-neutral-700: var(--coras-palette-neutral-700);\n    --coras-color-neutral-800: var(--coras-palette-neutral-800);\n    --coras-color-neutral-900: var(--coras-palette-neutral-900);\n    --coras-color-background: var(--coras-brand-background);\n    --coras-color-surface: var(--coras-brand-surface);\n    --coras-color-surface-sunken: light-dark(var(--coras-palette-neutral-50), #0b0d10);\n    --coras-color-surface-hover: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 50%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 8%, transparent));\n    --coras-color-surface-muted: light-dark(color-mix(in srgb, var(--coras-palette-neutral-200) 35%, var(--coras-palette-white)), color-mix(in srgb, var(--coras-palette-white) 5%, transparent));\n    --coras-color-text: var(--coras-brand-text);\n    --coras-color-text-primary: var(--coras-brand-text);\n    --coras-color-text-secondary: light-dark(var(--coras-palette-neutral-700), var(--coras-palette-neutral-300));\n    --coras-color-text-muted: var(--coras-brand-text-muted);\n    --coras-color-text-disabled: var(--coras-palette-neutral-500);\n    --coras-state-overlay: #000;\n    --coras-state-hover: 10%;\n    --coras-state-active: 18%;\n    --coras-state-selected: 12%;\n    --coras-color-action: var(--coras-brand-primary);\n    --coras-color-action-hover: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-hover));\n    --coras-color-action-active: color-mix(in srgb, var(--coras-color-action), var(--coras-state-overlay) var(--coras-state-active));\n    --coras-color-action-text: var(--coras-palette-white);\n    --coras-color-primary: var(--coras-brand-primary);\n    --coras-color-primary-hover: var(--coras-color-action-hover);\n    --coras-color-text-button: var(--coras-brand-text-button);\n    --coras-color-icon: var(--coras-brand-body-icon);\n    --coras-color-border: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-800));\n    --coras-color-divider: light-dark(var(--coras-palette-neutral-200), var(--coras-palette-neutral-900));\n    --coras-color-focus-ring: var(--coras-brand-primary);\n    --coras-color-error: var(--coras-brand-error);\n    --coras-color-error-surface: var(--coras-color-error-50);\n    --coras-color-success: var(--coras-brand-success);\n    --coras-color-success-surface: var(--coras-color-success-50);\n    --coras-color-warning: var(--coras-brand-warning);\n    --coras-color-warning-surface: var(--coras-color-warning-50);\n    --coras-color-info: var(--coras-brand-info);\n    --coras-color-info-surface: var(--coras-color-info-50);\n    --coras-font-family-sans: var(--coras-brand-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-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: 0.5rem;\n    --coras-radius-button: var(--coras-brand-button-radius);\n    --coras-radius-chip: var(--coras-brand-chip-radius);\n    --coras-shadow-sm: 0px 4px 4px rgba(0, 0, 0, 0.04);\n    --coras-shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.1);\n    --coras-shadow-lg: 0px 24px 24px rgba(0, 0, 0, 0.04);\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    --coras-width-mobile: 375px;\n    --coras-width-tablet: 768px;\n    --coras-width-desktop: 1024px;\n  }\n}\n\n@layer coras.components {\n  :where([data-coras-root], .coras-theme) {\n    --coras-base-background-color: var(--coras-color-background);\n    --coras-base-text-color: var(--coras-color-text);\n    --coras-base-primary-background-color: var(--coras-color-text);\n    --coras-base-footer-background-color: light-dark(var(--coras-palette-primary-100), #191c22);\n    --coras-navbar-background: var(--coras-brand-navbar);\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-footer-background-color: var(--coras-brand-footer);\n    --coras-footer-text-color: var(--coras-brand-footer-text);\n    --coras-footer-link-color: var(--coras-brand-footer-link);\n    --coras-button-primary-background: var(--coras-color-action);\n    --coras-button-primary-text-color: var(--coras-color-action-text);\n    --coras-button-primary-background-hover: var(--coras-color-action-hover);\n    --coras-button-primary-text-color-hover: var(--coras-color-action-text);\n    --coras-button-primary-background-active: var(--coras-color-action-active);\n    --coras-button-primary-text-color-active: var(--coras-color-action-text);\n    --coras-input-field-background-color: var(--coras-color-background);\n    --coras-basket-accent-color: var(--coras-brand-secondary);\n  }\n}\n\n@layer coras.components {\n  /* SDK-owned query container: embedded pages respond to the container width,\n     never the viewport (P-062). Components query `@container coras-page`. */\n  :where([data-coras-root]) {\n    container: coras-page / inline-size;\n    max-width: 100%;\n    /* The page background is opt-in: transparent by default so the embed adopts\n       the host page's background, and painted only when the brand sets a\n       background (the theme/override paths mirror it onto --coras-page-background,\n       which is intentionally undefined here). The text colour always follows the\n       brand; chrome paints its own background on top. */\n    background-color: var(--coras-page-background, transparent);\n    color: var(--coras-base-text-color);\n  }\n  /* The SDK-created page element is the root's only child. Make it block-level\n     so it fills the container: custom elements default to `display: inline`,\n     whose `clientWidth` is 0, which forces width-aware layouts into mobile.\n     The body icon colour is set here as an inherited `fill`: content icons pick\n     it up, while chrome (navbar/footer) sets its own fill and is unaffected. */\n  :where([data-coras-root]) > * {\n    display: block;\n    fill: var(--coras-color-icon);\n  }\n}\n";

package/dist/styles/tokens.js

@@ -0,0 +1,54 @@
+import { CORAS_TOKENS_CSS } from "./tokens.generated.js";
+/**
+ * The CSS-first four-tier token system (plan F-004). Tokens are scoped to the
+ * mount container (`[data-coras-root]`, or `.coras-theme` for standalone
+ * usage), never global `:root`, so several differently
+ * themed Coras mounts can share one page (P-061).
+ *
+ * Custom properties inherit across shadow boundaries, so defining them on the
+ * 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 const CORAS_TOKENS_TEXT = CORAS_TOKENS_CSS;
+const adopted = new WeakSet();
+let sheet;
+function tokenSheet() {
+    if (typeof CSSStyleSheet === "undefined")
+        return undefined;
+    try {
+        if (!sheet) {
+            sheet = new CSSStyleSheet();
+            sheet.replaceSync(CORAS_TOKENS_CSS);
+        }
+        return sheet;
+    }
+    catch {
+        return undefined;
+    }
+}
+/**
+ * Ensure the token stylesheet is present in `root` (a `Document` or
+ * `ShadowRoot`). Idempotent: adopting the same root twice is a no-op, and the
+ * single constructable sheet is shared across every mount. Falls back to an
+ * injected `<style>` element when constructable stylesheets are unavailable.
+ */
+export function ensureTokensInjected(root) {
+    if (adopted.has(root))
+        return;
+    const constructable = tokenSheet();
+    if (constructable && "adoptedStyleSheets" in root) {
+        if (!root.adoptedStyleSheets.includes(constructable)) {
+            root.adoptedStyleSheets = [...root.adoptedStyleSheets, constructable];
+        }
+        adopted.add(root);
+        return;
+    }
+    const target = root instanceof Document ? (root.head ?? root.documentElement) : root;
+    if (!target)
+        return;
+    const style = (target.ownerDocument ?? document).createElement("style");
+    style.setAttribute("data-coras-tokens", "");
+    style.textContent = CORAS_TOKENS_CSS;
+    target.appendChild(style);
+    adopted.add(root);
+}

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

@@ -0,0 +1,14 @@
+export type TokenControlType = "color" | "length" | "font";
+export type TokenControl = {
+    /** Matches the corresponding `CorasTheme` key. */
+    key: string;
+    cssVar: string;
+    type: TokenControlType;
+    group: string;
+    label: string;
+    default: string;
+    /** One-line helper explaining what the control affects. */
+    description?: string;
+};
+/** Editable branding controls shared by the Studio, docs, and tests. */
+export declare const TOKEN_CONTROLS: readonly TokenControl[];