@webority/theme 0.7.3 → 0.7.5

package/scss/_marketing.scss

@@ -0,0 +1,337 @@
+// =====================================================================
+// Webority UI — marketing / editorial surface helpers (OPT-IN).
+// Not part of the default theme chain. Import AFTER core theme when a
+// marketing site needs section rhythm, hero chrome, pill CTAs, or scroll
+// motion — portals should omit this file.
+//
+// @import "@webority/theme/scss/components";
+// @import "@webority/theme/scss/wui-components";
+// @import "@webority/theme/scss/marketing";
+// =====================================================================
+
+// ---- Section helpers ------------------------------------------------
+// Marketing + portal both use vertically-padded sections with the
+// brand's spacing rhythm. Bootstrap's py-* gets you part-way; these
+// are the named variants the design system reaches for.
+.section-y-sm { padding-block: 3rem; }
+.section-y { padding-block: 5rem; }
+.section-y-lg { padding-block: 7rem; }
+@media (min-width: 768px) {
+    .section-y-sm { padding-block: 4rem; }
+    .section-y { padding-block: 6rem; }
+    .section-y-lg { padding-block: 9rem; }
+}
+
+// ---- Eyebrow (accent-dot + label) -----------------------------------
+.eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--wui-primary);
+}
+.eyebrow::before {
+    content: "";
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 9999px;
+    background: var(--wui-primary);
+}
+.eyebrow--on-dark {
+    color: rgba(255, 255, 255, 0.85);
+}
+.eyebrow--on-dark::before {
+    background: #FFFFFF;
+}
+
+// ---- Display heading -------------------------------------------------
+// Bootstrap's .display-1..6 ladder skews bigger than our locked design.
+// .h-display drops in where the marketing hero needs the locked
+// font-weight 500 + tight letter-spacing. font-family reads --wui-font-display
+// so a product can swap in a serif/brand display face by overriding just that
+// token (default: the same body stack .font-display already uses).
+.h-display {
+    font-family: var(--wui-font-display, var(--bs-body-font-family));
+    font-weight: 500;
+    letter-spacing: -0.03em;
+    line-height: 1.05;
+}
+
+// ---- Gradient backgrounds -------------------------------------------
+.bg-hero-gradient { background: var(--wui-hero-gradient); }
+.bg-cta-gradient { background: var(--wui-cta-gradient); }
+
+// ---- Marketing pill buttons (locked design parity) -------------------
+// Pixel-locked to the standalone reference's `btn-squircle inline-flex
+// h-12 items-center text-sm font-medium` pattern. Each marketing CTA
+// layers .btn-pill on a Bootstrap variant — these classes only override
+// Bootstrap's btn CSS vars (height / padding / radius / font), so
+// every variant inherits the right size without redefining colors.
+//
+// Reference values:
+// - height : 48px (h-12 = 3rem)
+// - radius : 16px (--wui-radius-xl)
+// - font : 14px / 500 (text-sm font-medium)
+// - padding-x : 20px (px-5) default — Watch demo / outline-dark
+// Primary CTA overrides to 24px (px-6) inline
+// - corner-shape : squircle (iOS-style smooth curve)
+//
+// Example:
+// <a class="btn btn-primary btn-pill" style="--bs-btn-padding-x:1.5rem;">…</a>
+// <a class="btn btn-light btn-pill-sm">Learn more</a>
+.btn-pill {
+    --bs-btn-padding-y: 0; // height driven by min-height + flex centering
+    --bs-btn-padding-x: 1.25rem; // 20px (px-5)
+    --bs-btn-font-size: 0.875rem; // 14px
+    --bs-btn-font-weight: 500;
+    --bs-btn-line-height: 1.25;
+    --bs-btn-border-radius: var(--wui-radius-xl); // 16px
+    min-height: 3rem; // 48px (h-12)
+
+
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem; // 6px — matches primary arrow's ml-1.5
+}
+.btn-pill-sm {
+    --bs-btn-padding-y: 0;
+    --bs-btn-padding-x: 0.875rem; // 14px (px-3.5)
+    --bs-btn-font-size: 0.875rem; // 14px (text-sm)
+    --bs-btn-font-weight: 500;
+    --bs-btn-line-height: 1.25;
+    --bs-btn-border-radius: 12px;
+    min-height: 2.5rem; // 40px (h-10) — reference "Learn more" CTA
+
+
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+}
+
+// ---- Ghost-dark button (frosted glass on light surface) -------------
+// Pixel-locked to the reference's `WatchDemoButton` "outline-dark" variant
+// (src/components/marketing/brand/watch-demo-button.tsx):
+// - border : rgba(13, 24, 43, 0.15) (foreground/15 in marketing-root)
+// - bg : rgba(255, 255, 255, 0.6) (surface/60)
+// - text : --wui-text-heading (text-foreground in marketing-root)
+// - blur : 4px (backdrop-blur-sm)
+// - hover bg: #ffffff (hover:bg-surface = full opacity)
+.btn-ghost-dark {
+    --bs-btn-color: var(--wui-text-heading);
+    --bs-btn-bg: rgba(255, 255, 255, 0.60);
+    --bs-btn-border-color: rgba(13, 24, 43, 0.15);
+    --bs-btn-hover-color: var(--wui-text-heading);
+    --bs-btn-hover-bg: #ffffff;
+    --bs-btn-hover-border-color: rgba(13, 24, 43, 0.20);
+    --bs-btn-active-color: var(--wui-text-heading);
+    --bs-btn-active-bg: #ffffff;
+    --bs-btn-active-border-color: rgba(13, 24, 43, 0.20);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+}
+
+// ---- Link with the marketing wipe underline (matches locked design) -
+// Uses background-image (not a pseudo-element with inline-block) so the link
+// stays inline. inline-block + overflow:hidden used to give the link its own
+// baseline, which dropped it below surrounding prose whenever the parent had
+// a non-default font-size (see Pricing footnote "Talk to sales" regression).
+
+.link-wipe {
+    background-image: linear-gradient(currentColor, currentColor);
+    background-repeat: no-repeat;
+    background-position-x: 100%;
+    background-position-y: 100%;
+    background-size: 0 1px;
+    transition: background-size 500ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+@media (hover: hover) {
+    .link-wipe:hover {
+        background-position-x: 0%;
+        background-size: 100% 1px;
+    }
+}
+.link-wipe--accent {
+    background-image: linear-gradient(var(--wui-primary), var(--wui-primary));
+}
+
+// ---- Container with the marketing 1512px canvas ---------------------
+// Pair with --wui-container-pad (responsive). Distinct from Bootstrap's
+// .container (max-width steps at 540/720/960/1140/1320). Use this when a
+// section needs to breathe up to 1512px on wide monitors.
+.container-cloves {
+    max-width: var(--wui-container-max, 1512px);
+    margin-inline: auto;
+    padding-inline: var(--wui-container-pad, 24px);
+    width: 100%;
+}
+
+// ---- Hero radial wash ------------------------------------------------
+// Soft tinted glow over an elevated surface — sits behind hero copy.
+.hero-wash {
+    background:
+        radial-gradient(80% 50% at 50% 0%,
+            color-mix(in srgb, var(--wui-primary) 8%, transparent), transparent 70%),
+        var(--wui-bg-elevated);
+}
+
+// ---- Page entry fade -------------------------------------------------
+// Apply to <main> in _Layout so every page entry has a polite fade-up.
+.page-fade-in {
+    animation: pageFadeIn 0.25s var(--wui-ease-ui) backwards;
+}
+
+// ---- Single-element fade-in ------------------------------------------
+.fade-in {
+    animation: fadeIn 220ms var(--wui-ease-out-quart);
+}
+
+// ---- Stagger groups --------------------------------------------------
+// Wrap a container in `.stagger-children` and its direct children
+// cascade in 40ms apart, capped at 12 children. For bigger groups,
+// use the IntersectionObserver-driven `[data-reveal]` pattern below.
+.stagger-children > * {
+    animation: staggerRise 360ms var(--wui-ease-out-quart) backwards;
+}
+.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
+.stagger-children > *:nth-child(2) { animation-delay: 40ms; }
+.stagger-children > *:nth-child(3) { animation-delay: 80ms; }
+.stagger-children > *:nth-child(4) { animation-delay: 120ms; }
+.stagger-children > *:nth-child(5) { animation-delay: 160ms; }
+.stagger-children > *:nth-child(6) { animation-delay: 200ms; }
+.stagger-children > *:nth-child(7) { animation-delay: 240ms; }
+.stagger-children > *:nth-child(8) { animation-delay: 280ms; }
+.stagger-children > *:nth-child(9) { animation-delay: 320ms; }
+.stagger-children > *:nth-child(10) { animation-delay: 360ms; }
+.stagger-children > *:nth-child(11) { animation-delay: 400ms; }
+.stagger-children > *:nth-child(12) { animation-delay: 440ms; }
+
+// ---- Opt-in single-element stagger -----------------------------------
+// Use when you need granular control: set `--stagger: 240ms` inline on
+// individual items inside a non-stagger-children container.
+.stagger-item {
+    opacity: 0;
+    animation: rise 320ms var(--wui-ease-out-quart) forwards;
+    animation-delay: var(--stagger, 0ms);
+}
+
+// ---- Marquee (customer-logo carousel etc.) ---------------------------
+// Pair with a flex wrapper that duplicates its children so the
+// translateX(-50%) loops seamlessly. Example:
+// <div class="overflow-hidden">
+// <div class="d-flex animate-marquee" style="width: max-content;">
+// <ul class="d-flex gap-5 mb-0 list-unstyled">...</ul>
+// <ul class="d-flex gap-5 mb-0 list-unstyled" aria-hidden="true">...</ul>
+// </div>
+// </div>
+.animate-marquee {
+    animation: marketing-marquee 32s linear infinite;
+}
+
+// ---- Scroll-triggered reveals (paired with wwwroot/js/reveal.js) -----
+// Author opts in by adding `data-reveal` to a section. The JS module
+// adds `.is-visible` when the element scrolls into view; CSS transitions
+// fade + lift on the transition. Stagger descendants via
+// `[data-reveal-stagger] > *` with `--reveal-step` inline (default 40ms).
+[data-reveal] {
+    opacity: 0;
+    transform: translateY(8px);
+    transition:
+        opacity 540ms var(--wui-ease-out-quart),
+        transform 540ms var(--wui-ease-out-quart);
+    will-change: opacity, transform;
+}
+[data-reveal].is-visible {
+    opacity: 1;
+    transform: none;
+}
+
+[data-reveal-stagger] > * {
+    opacity: 0;
+    transform: translateY(8px);
+    transition:
+        opacity 540ms var(--wui-ease-out-quart),
+        transform 540ms var(--wui-ease-out-quart);
+}
+[data-reveal-stagger].is-visible > * {
+    opacity: 1;
+    transform: none;
+}
+[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: calc(var(--reveal-step, 40ms) * 0); }
+[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: calc(var(--reveal-step, 40ms) * 1); }
+[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: calc(var(--reveal-step, 40ms) * 2); }
+[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: calc(var(--reveal-step, 40ms) * 3); }
+[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: calc(var(--reveal-step, 40ms) * 4); }
+[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: calc(var(--reveal-step, 40ms) * 5); }
+[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: calc(var(--reveal-step, 40ms) * 6); }
+[data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: calc(var(--reveal-step, 40ms) * 7); }
+[data-reveal-stagger].is-visible > *:nth-child(9) { transition-delay: calc(var(--reveal-step, 40ms) * 8); }
+[data-reveal-stagger].is-visible > *:nth-child(10) { transition-delay: calc(var(--reveal-step, 40ms) * 9); }
+[data-reveal-stagger].is-visible > *:nth-child(11) { transition-delay: calc(var(--reveal-step, 40ms) * 10); }
+[data-reveal-stagger].is-visible > *:nth-child(12) { transition-delay: calc(var(--reveal-step, 40ms) * 11); }
+
+// ---- Section content-visibility (marketing long pages) ----
+// Opt-in long marketing pages: skip layout/paint for offscreen sections.
+// Do not apply to sticky hosts or the first/above-fold section.
+[data-section]:not(:first-of-type):not([data-section="inner-hero"]):not([data-section="home-hero"]):not([data-section-skip-cv]),
+.section-y:not(:first-of-type):not([data-section-skip-cv]),
+.section-y-sm:not(:first-of-type):not([data-section-skip-cv]),
+.section-y-lg:not(:first-of-type):not([data-section-skip-cv]) {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 720px;
+}
+
+// ---- Marketing motion keyframes ------------------------------------
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+@keyframes pageFadeIn {
+    from { opacity: 0; transform: translateY(6px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+@keyframes rise {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+@keyframes staggerRise {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+@keyframes marketing-marquee {
+    from { transform: translateX(0); }
+    to { transform: translateX(-50%); }
+}
+
+// GPU / reduced-motion for marketing-only selectors
+.btn-pill,
+.btn-pill-sm,
+[data-reveal],
+[data-reveal-stagger] > * {
+    will-change: auto;
+}
+.btn-pill:hover,
+.btn-pill-sm:hover,
+[data-reveal]:not(.is-visible),
+[data-reveal-stagger]:not(.is-visible) > * {
+    will-change: transform, opacity;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .link-wipe {
+        transition: none;
+    }
+    .page-fade-in,
+    .fade-in,
+    .stagger-children > *,
+    .stagger-item,
+    .animate-marquee,
+    [data-reveal],
+    [data-reveal-stagger] > * {
+        animation: none;
+        opacity: 1;
+        transform: none;
+        transition: none;
+    }
+}

package/scss/_tokens.scss

@@ -8,37 +8,37 @@
 :root {
     // Extended primary ramp — neutral indigo default; used for tints,
     // washes, hovers. Products override --wui-primary* with their brand.
-    --wui-primary:          #4F46E5;
-    --wui-primary-hover:    #6366F1;
-    --wui-primary-pressed:  #4338CA;
-    --wui-primary-50:       #818CF8;
-    --wui-primary-30:       #A5B4FC;
-    --wui-primary-20:       #C7D2FE;
-    --wui-primary-15:       #DDE1FD;
-    --wui-primary-10:       #E0E7FF;
-    --wui-primary-5:        #EEF2FF;
+    --wui-primary: #4F46E5;
+    --wui-primary-hover: #6366F1;
+    --wui-primary-pressed: #4338CA;
+    --wui-primary-50: #818CF8;
+    --wui-primary-30: #A5B4FC;
+    --wui-primary-20: #C7D2FE;
+    --wui-primary-15: #DDE1FD;
+    --wui-primary-10: #E0E7FF;
+    --wui-primary-5: #EEF2FF;
 
     // Foreground ramp (cool blue-grey neutrals) — for text hierarchy
     // beyond Bootstrap's body-color / body-secondary-color.
     --wui-text-heading: #071437;
-    --wui-text-1:       #252F4A;
-    --wui-text-2:       #4B5675;
+    --wui-text-1: #252F4A;
+    --wui-text-2: #4B5675;
     // Tertiary text — hints, captions, labels, timestamps, placeholders. Was #78829D,
     // which measured 3.5:1 on white and 3.1:1 on a tinted panel: below WCAG AA (4.5:1)
     // everywhere it was used. A tier meant for readable-but-secondary copy has to BE
     // readable, so it darkens to 4.55:1 on every neutral surface. It stays clearly
     // lighter than --wui-text-2; --wui-text-4/5 remain for genuinely decorative use.
-    --wui-text-3:       #687088;
-    --wui-text-4:       #99A1B7;
-    --wui-text-5:       #C4CADA;
+    --wui-text-3: #687088;
+    --wui-text-4: #99A1B7;
+    --wui-text-5: #C4CADA;
 
     // Surfaces
-    --wui-bg-page:      #F4F6F8;
-    --wui-bg-light:     #FFFFFF;
-    --wui-bg-elevated:  #F9FBFC;
-    --wui-bg-muted:     #F5F6FA;
+    --wui-bg-page: #F4F6F8;
+    --wui-bg-light: #FFFFFF;
+    --wui-bg-elevated: #F9FBFC;
+    --wui-bg-muted: #F5F6FA;
     --wui-border-light: #EBEDF3;
-    --wui-border-soft:  #F4F6F8;
+    --wui-border-soft: #F4F6F8;
 
     // Gradients (hero, CTA)
     --wui-hero-gradient:
@@ -50,24 +50,19 @@
 
     // Easing curves — match locked design's CSS / Framer Motion exports
     --wui-ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
-    --wui-ease-ui:        cubic-bezier(0.32, 0.72, 0, 1);
+    --wui-ease-ui: cubic-bezier(0.32, 0.72, 0, 1);
     // Elastic / spring — overshoots the target then settles (the y > 1 control point).
     // Used by the tab ink-bar so a tab switch springs into place rather than sliding flat.
-    --wui-ease-elastic:   cubic-bezier(0.34, 1.56, 0.64, 1);
-
-    // Elevation — exposes the Bootstrap $box-shadow* SCSS vars (set in
-    // _variables.scss) as CSS vars so inline styles / JS / the portal
-    // can reach the same values Bootstrap utilities use.
-    --wui-shadow-card:               #{$box-shadow-sm};
-    --wui-shadow-card-lifted:        #{$box-shadow};
-    --wui-shadow-card-lifted-hover:  #{$box-shadow-lg};
-
-    // Overlay elevation. The rule: in-page surfaces stay FLAT (a card is a
-    // border, not a shadow); only things that float above the page lift —
-    // menus, popovers, modals. One ink (the heading navy) so every overlay
-    // casts the same light; components must never hand-roll a shadow.
-    --wui-shadow-overlay:    0 8px 28px -6px rgba(7, 20, 55, 0.14);
-    --wui-shadow-overlay-lg: 0 24px 60px -16px rgba(7, 20, 55, 0.28);
+    --wui-ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    // Elevation. In-page card tokens are flat (none). Overlay
+    // rungs match $wui-shadow-overlay* in _variables.scss — one ink for menus,
+    // popovers, modals. Do not hand-roll a third shadow.
+    --wui-shadow-card: none;
+    --wui-shadow-card-lifted: none;
+    --wui-shadow-card-lifted-hover: none;
+    --wui-shadow-overlay: #{$wui-shadow-overlay};
+    --wui-shadow-overlay-lg: #{$wui-shadow-overlay-lg};
 
     // One height for every form control. Buttons, inputs and selects share form
     // rows, so they must line up — they were 46.8px and 45px, which reads as a
@@ -79,19 +74,19 @@
     --wui-control-height-lg: 52px;
 
     // Scrollbar thumb — one quiet grey-blue at three interaction strengths.
-    --wui-scrollbar:        rgba(145, 158, 171, 0.45);
-    --wui-scrollbar-hover:  rgba(145, 158, 171, 0.65);
+    --wui-scrollbar: rgba(145, 158, 171, 0.45);
+    --wui-scrollbar-hover: rgba(145, 158, 171, 0.65);
     --wui-scrollbar-active: rgba(145, 158, 171, 0.85);
 
     // ---- Marketing surface ramp -------------------------------------
     // Soft tints + neutral washes used by mega-menu hover, callout cards,
     // and section accents. Distinct from --wui-bg-* (which are the
     // platform/portal palette).
-    --wui-surface-soft:      #F2EFFE;
-    --wui-surface-blue:      #ECE4FE;
+    --wui-surface-soft: #F2EFFE;
+    --wui-surface-blue: #ECE4FE;
     --wui-surface-blue-soft: #FCFCFC;
-    --wui-surface-mute:      #F9FBFC;
-    --wui-ink:               #000000;
+    --wui-surface-mute: #F9FBFC;
+    --wui-ink: #000000;
 
     // ---- Foreground ramp aliases -----------------------------------
     // Marketing-side parlance — names mirror the standalone design.
@@ -105,16 +100,16 @@
 
     // ---- Neutral ramp ----------------------------------------------
     // Used by table emphasis, dividers, and mega-menu hover surfaces.
-    --wui-neutral-border-dark:  #EBEDF3;
+    --wui-neutral-border-dark: #EBEDF3;
     --wui-neutral-border-light: #F9FBFC;
-    --wui-neutral-bg-dark:      #F5F6FA;
-    --wui-neutral-bg-light:     #F9FBFC;
+    --wui-neutral-bg-dark: #F5F6FA;
+    --wui-neutral-bg-light: #F9FBFC;
 
     // ---- Accent-dark -----------------------------------------------
-    // Link hover, focused button, deep-purple CTA underline. Matches
-    // $link-hover-color in _variables.scss but exposed as a CSS
-    // var so JS / inline styles can reach it.
-    --wui-accent-dark: #4338CA;
+    // Darker primary for pressed/hover accents in CSS (not SCSS $link-hover).
+    // Aliased onto --wui-primary-pressed so a product that rebrands the pressed
+    // token once also updates this name (was a frozen indigo hex).
+    --wui-accent-dark: var(--wui-primary-pressed);
 
     // ---- Container width + responsive padding ----------------------
     // The standalone design uses a 1512px max canvas with generous side
@@ -135,71 +130,76 @@
     // Canonical info/success/warning/danger scales: `active` (text/icon on
     // light), the base `100` (vivid fills/dots), then tints 50/30/20/10/5.
     // Shared by the portal (aliased to --color-*) and marketing alerts/badges.
-    --wui-info-text:      #1460ba;
-    --wui-info-active:    #056EE9;
-    --wui-info:           #1B84FF;
-    --wui-info-50:        #8DC2FF;
-    --wui-info-30:        #BBDBFF;
-    --wui-info-20:        #D1E6FF;
-    --wui-info-10:        #E9F3FF;
-    --wui-info-5:         #F3F9FF;
+    --wui-info-text: #1460ba;
+    --wui-info-active: #056EE9;
+    --wui-info: #1B84FF;
+    --wui-info-50: #8DC2FF;
+    --wui-info-30: #BBDBFF;
+    --wui-info-20: #D1E6FF;
+    --wui-info-10: #E9F3FF;
+    --wui-info-5: #F3F9FF;
 
     // `-text` variants exist because the status colours are FILLS. #F8285A and #04B440
     // are correct on a button or a badge, and both fail AA as text on a light surface
     // (3.6:1 and 2.6:1) — which is how a validation error message, of all things, came
     // to be unreadable. Darkening the base tokens would change every red button and
     // green badge in the system, so text gets its own value and the fills keep theirs.
-    --wui-success-text:   #0e7531;
+    --wui-success-text: #0e7531;
+    // Deepened success fill for surfaces that carry WHITE text (progress-bar labels), mirroring
+    // --wui-danger-strong below. The brighter --wui-success/-active are far too light for white
+    // (2.78:1 / 2.78:1, under AA); this clears it (#0e7531 → 5.86:1). Keep white-on-success off
+    // the other tokens so buttons/badges keep the vibrant fill.
+    --wui-success-strong: #0e7531;
     --wui-success-active: #04B440;
-    --wui-success:        #17C653;
-    --wui-success-50:     #8BE3A9;
-    --wui-success-30:     #BAEECC;
-    --wui-success-20:     #D1F4DD;
-    --wui-success-10:     #E8FAEE;
-    --wui-success-5:      #F3FCF6;
-
-    --wui-warning-text:   #876100;
+    --wui-success: #17C653;
+    --wui-success-50: #8BE3A9;
+    --wui-success-30: #BAEECC;
+    --wui-success-20: #D1F4DD;
+    --wui-success-10: #E8FAEE;
+    --wui-success-5: #F3FCF6;
+
+    --wui-warning-text: #876100;
     --wui-warning-active: #DFA000;
-    --wui-warning:        #F6B100;
-    --wui-warning-50:     #FBD880;
-    --wui-warning-30:     #FDE8B3;
-    --wui-warning-20:     #FDEFCC;
-    --wui-warning-10:     #FFF8E6;
-    --wui-warning-5:      #FEFBF2;
-
-    --wui-danger-text:    #b61d42;
+    --wui-warning: #F6B100;
+    --wui-warning-50: #FBD880;
+    --wui-warning-30: #FDE8B3;
+    --wui-warning-20: #FDEFCC;
+    --wui-warning-10: #FFF8E6;
+    --wui-warning-5: #FEFBF2;
+
+    --wui-danger-text: #b61d42;
     // Deepened danger fill for surfaces that carry WHITE text (btn-danger). The brighter
     // --wui-danger/-active below are too light for white (3.86:1 / 4.38:1, under AA); these
     // clear it — #C81340 → 5.80:1, hover → higher. Keep white-on-danger off the other tokens.
-    --wui-danger-strong:  #C81340;
+    --wui-danger-strong: #C81340;
     --wui-danger-strong-hover: #AB1036;
-    --wui-danger-active:  #E82646;
-    --wui-danger:         #F8285A;
-    --wui-danger-50:      #FC94AD;
-    --wui-danger-30:      #FDBFCE;
-    --wui-danger-20:      #FED4DE;
-    --wui-danger-10:      #FFEAEF;
-    --wui-danger-5:       #FEF4F6;
+    --wui-danger-active: #E82646;
+    --wui-danger: #F8285A;
+    --wui-danger-50: #FC94AD;
+    --wui-danger-30: #FDBFCE;
+    --wui-danger-20: #FED4DE;
+    --wui-danger-10: #FFEAEF;
+    --wui-danger-5: #FEF4F6;
 
     // Corner radii (DESIGN.md scale) — portal aliases as --radius-*
     --wui-radius-sm: 6px;
-    --wui-radius:    8px;
+    --wui-radius: 8px;
     --wui-radius-lg: 12px;
     --wui-radius-xl: 16px;
 
     // ---- Portal dark palette ----------------------------------------
     // Marketing stays light. Portal flips [data-theme="dark"] and maps
     // --color-* aliases onto these so dark hexes live in theme/, not the app.
-    --wui-dark-bg-page:      #0f1117;
-    --wui-dark-bg-elevated:  #0d0f15;
-    --wui-dark-bg-muted:     #232733;
-    --wui-dark-bg-surface:   #181b23;
-    --wui-dark-border:       #2a2f3a;
+    --wui-dark-bg-page: #0f1117;
+    --wui-dark-bg-elevated: #0d0f15;
+    --wui-dark-bg-muted: #232733;
+    --wui-dark-bg-surface: #181b23;
+    --wui-dark-border: #2a2f3a;
     --wui-dark-border-strong:#3a414f;
-    --wui-dark-text:         #e6e8ee;
-    --wui-dark-text-muted:   #b4b9c6;
-    --wui-dark-text-subtle:  #8a90a0;
-    --wui-dark-primary:      #6B83EC;
+    --wui-dark-text: #e6e8ee;
+    --wui-dark-text-muted: #b4b9c6;
+    --wui-dark-text-subtle: #8a90a0;
+    --wui-dark-primary: #6B83EC;
     --wui-dark-primary-hover:#93A6F2;
 
     // ---- Fluid type scale --------------------------------------------
@@ -207,13 +207,13 @@
     // stepping at Bootstrap's breakpoints. `base` sits close to Bootstrap's own 1rem body
     // size; every other step is derived at a consistent ratio, up and down. Additive only —
     // nothing in the shared theme consumes these yet, a product opts in per element.
-    --wui-fs-xs:   clamp(0.75rem,  0.73rem + 0.1vw,  0.8125rem);
-    --wui-fs-sm:   clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
-    --wui-fs-base: clamp(0.95rem,  0.9rem + 0.25vw,  1.05rem);
-    --wui-fs-lg:   clamp(1.05rem,  0.98rem + 0.35vw, 1.25rem);
-    --wui-fs-xl:   clamp(1.25rem,  1.15rem + 0.5vw,  1.5rem);
-    --wui-fs-2xl:  clamp(1.5rem,   1.3rem + 1vw,     2rem);
-    --wui-fs-3xl:  clamp(1.875rem, 1.5rem + 1.75vw,  2.75rem);
+    --wui-fs-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
+    --wui-fs-sm: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
+    --wui-fs-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
+    --wui-fs-lg: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
+    --wui-fs-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
+    --wui-fs-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
+    --wui-fs-3xl: clamp(1.875rem, 1.5rem + 1.75vw, 2.75rem);
 
     // ---- Display font slot --------------------------------------------
     // A dedicated slot for a display/heading typeface, kept separate from
@@ -223,16 +223,27 @@
     --wui-font-display: var(--bs-body-font-family);
 
     // ---- Z-index scale -------------------------------------------------
-    // Bootstrap's own ladder ($zindex-dropdown etc.), exposed as CSS vars so a component
-    // or a consuming product can layer against the same scale instead of inventing values.
-    --wui-z-dropdown:       1000;
-    --wui-z-sticky:         1020;
-    --wui-z-fixed:          1030;
-    --wui-z-modal-backdrop: 1040;
-    --wui-z-modal:          1050;
-    --wui-z-popover:        1060;
-    --wui-z-tooltip:        1070;
-    --wui-z-toast:          1080;
+    // One page-level ladder. Local stacking inside a component (1, 5, 10, 40…) is
+    // NOT on this scale — only fixed/portalled layers that compete across the page.
+    //
+    // Why not Bootstrap's raw 1040/1050 for modals? App shell sticky chrome uses
+    // 1040–1045; a BS-height modal would paint under the mobile drawer. Modals are
+    // elevated to 1500+ so the shell never covers a dialog. Portalled menus
+    // (select / date / phone / infotip) sit at 1600 so a combobox inside a modal
+    // is not trapped under the dialog. Never invent a third number in component CSS —
+    // pick a rung from this list.
+    --wui-z-dropdown: 1000;
+    --wui-z-sticky: 1020;
+    --wui-z-fixed: 1030;
+    --wui-z-shell: 1040; // splash, shell base chrome
+    --wui-z-shell-scrim: 1044; // mobile drawer scrim
+    --wui-z-shell-drawer: 1045; // mobile sidebar drawer
+    --wui-z-modal-backdrop: 1500;
+    --wui-z-modal: 1505;
+    --wui-z-menu: 1600; // portalled select/date/phone menus + infotip
+    --wui-z-popover: 1600; // same rung as --wui-z-menu (above modal)
+    --wui-z-tooltip: 1650;
+    --wui-z-toast: 1700;
 }
 
 // Bootstrap md / xl (not invented px)