/* @waev/ui-kit — generated bundle. DO NOT EDIT. Concatenation of every kit sheet wrapped in its canonical @layer. Source: packages/ui-kit/scripts/build-bundle.mjs */ @layer ui-kit.reset, ui-kit.base, ui-kit.tokens, ui-kit.themes, ui-kit.supports, ui-kit.layout, ui-kit.components, ui-kit.responsive, ui-kit.motion, app; /* ── ui-kit.reset: src/styles/reset.css ── */ @layer ui-kit.reset { /* ── Reset (modern-normalize-adjacent) ──────────────────────────────────── Universal box-sizing + body/html/a/img/button/input/strong/code/pre/hr/::selection/:focus-visible. */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Single tracking baseline — every text element inherits -1% (-0.01em) unless it explicitly overrides letter-spacing. Pairs with the unified --ls-* tokens above so class-based rules that bind `letter-spacing: var(--ls-)` resolve to the same value and inline styles can fall through to the inherited default. */ letter-spacing: -0.01em; /* Prevent overscroll bounce / pull-to-refresh on mobile */ overscroll-behavior-y: none; /* Reserve a stable scrollbar gutter so the page contents do NOT shift horizontally when `useScrollLock` removes the scrollbar while a modal is open. Without this, opening a Dialog or BottomSheet on Linux/Windows (and on macOS with "Always show scrollbars") visibly jumps the body ~15 px to the right. Baseline: Safari 16+, Chrome 94+, Firefox 97+ — within the existing WebGL2 baseline. Older browsers ignore the property and fall back to the previous behaviour. */ scrollbar-gutter: stable; } body { font-family: var(--font); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); /* Body baseline weight — REGULAR (400). Every text element inherits this unless it explicitly overrides. Headers/header-style classes step up to semibold (600); subhead / title classes to medium (500). Body copy + reading text ride this 400 baseline so paragraphs read light and open (matching the type-standard artifact), instead of the old 500 baseline that made all body copy read a weight too heavy. Chrome that needs more presence (buttons, nav) sets its own weight. */ font-weight: var(--fw-regular); letter-spacing: var(--ls-body-lg); background: var(--bg); color: var(--text); overflow-x: hidden; min-height: 100vh; min-height: 100dvh; /* Lock vertical axis — no rubber-band bounce */ overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; } a { color: inherit; text-decoration: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; background: transparent; border: 0; } strong, b { font-weight: var(--fw-semibold); } code, kbd { font-family: var(--mono); font-size: 0.875em; letter-spacing: var(--ls-body-md); } pre { font-family: var(--mono); font-size: var(--fs-body-md); line-height: var(--lh-body-md); overflow-x: auto; -webkit-overflow-scrolling: touch; } hr { border: none; border-top: 1px solid var(--border-subtle); margin-block: var(--sp-6); } ::selection { background: var(--accent); color: var(--on-primary); } :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } } /* ── ui-kit.base: src/styles/base-type.css ── */ @layer ui-kit.base { /* ── Base type scale (M3 defaults — semantic HTML) ──────────────────────── */ /* ── Base type scale (M3 defaults — semantic HTML) ────────────────────── */ h1, h2, h3, h4, h5, h6 { text-wrap: balance; } p { text-wrap: pretty; } /* Header roles (h1–h3) all render at semibold; subhead roles (h4–h6) at medium. Class rules that re-skin an h-tag at a different size role still inherit these weights unless they explicitly opt out. */ h1 { font-size: var(--fs-headline-lg); line-height: var(--lh-headline-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-headline-lg); } h2 { font-size: var(--fs-headline-md); line-height: var(--lh-headline-md); font-weight: var(--fw-semibold); letter-spacing: var(--ls-headline-md); } h3 { font-size: var(--fs-headline-sm); line-height: var(--lh-headline-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-headline-sm); } h4 { font-size: var(--fs-title-lg); line-height: var(--lh-title-lg); font-weight: var(--fw-medium); letter-spacing: var(--ls-title-lg); color: var(--text-muted); } h5 { font-size: var(--fs-title-md); line-height: var(--lh-title-md); font-weight: var(--fw-medium); letter-spacing: var(--ls-title-md); } h6 { font-size: var(--fs-title-sm); line-height: var(--lh-title-sm); font-weight: var(--fw-medium); letter-spacing: var(--ls-title-sm); } small { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); letter-spacing: var(--ls-body-sm); } } /* ── ui-kit.tokens: dist/css/tokens.css ── */ @layer ui-kit.tokens { /** * Do not edit directly, this file was auto-generated. */ :root { --ind-red: #ff002f; --ind-green: #00ff24; --ind-yellow: #fff600; --ind-blue: #0024ff; --ind-indigo: #7700ff; --ind-white: #ffffff; --sys-zinc-50: #faf9f7; --sys-zinc-100: #f4f2f0; --sys-zinc-200: #e2dfdc; --sys-zinc-250: #d8d5d2; --sys-zinc-300: #cfcbc8; --sys-zinc-350: #bab7b2; --sys-zinc-375: #b1ada9; --sys-zinc-400: #a7a29d; --sys-zinc-500: #76726d; --sys-zinc-600: #54504c; --sys-zinc-700: #3f3b37; --sys-zinc-800: #24211e; --sys-zinc-850: #1b1916; --sys-zinc-900: #12100e; --sys-zinc-925: #0d0b09; --sys-zinc-950: #080605; --sys-zinc-975: #030302; --sys-white-4: rgba(255, 255, 255, 0.04); --sys-white-5: rgba(255, 255, 255, 0.05); --sys-white-7: rgba(255, 255, 255, 0.07); --sys-white-8: rgba(255, 255, 255, 0.08); --sys-white-9: rgba(255, 255, 255, 0.09); --sys-white-10: rgba(255, 255, 255, 0.1); --sys-white-12: rgba(255, 255, 255, 0.12); --sys-white-14: rgba(255, 255, 255, 0.14); --sys-white-16: rgba(255, 255, 255, 0.16); --sys-white-default: #ffffff; --sys-black-4: rgba(0, 0, 0, 0.04); --sys-black-6: rgba(0, 0, 0, 0.06); --sys-black-8: rgba(0, 0, 0, 0.08); --sys-black-12: rgba(0, 0, 0, 0.12); --sys-black-40: rgba(0, 0, 0, 0.4); --sys-black-50: rgba(0, 0, 0, 0.5); --sys-black-60: rgba(0, 0, 0, 0.6); --sys-red-50: #d8c0ba; --sys-red-100: #d6b0a6; --sys-red-200: #d4938c; --sys-red-300: #d8665c; --sys-red-400: #d4252b; --sys-red-500: #bf0030; --sys-red-600: #a50009; --sys-red-700: #7c192e; --sys-red-800: #520c1c; --sys-red-900: #291517; --sys-red-950: #160b0c; --sys-red-500-12: rgba(191, 0, 48, 0.12); --sys-orangered-50: #ddb7b2; --sys-orangered-100: #dfa199; --sys-orangered-200: #e18870; --sys-orangered-300: #e35535; --sys-orangered-400: #df2014; --sys-orangered-500: #c82400; --sys-orangered-600: #be1400; --sys-orangered-700: #9d1903; --sys-orangered-800: #5d1005; --sys-orangered-900: #361610; --sys-orangered-950: #1d0c08; --sys-orangered-500-12: rgba(200, 36, 0, 0.12); --sys-redorange-50: #e0bfb5; --sys-redorange-100: #e4a69a; --sys-redorange-200: #e38d72; --sys-redorange-300: #e4643f; --sys-redorange-400: #d83c18; --sys-redorange-500: #c83700; --sys-redorange-600: #ae3400; --sys-redorange-700: #a12500; --sys-redorange-800: #601805; --sys-redorange-900: #3d1408; --sys-redorange-950: #210b04; --sys-redorange-500-12: rgba(200, 55, 0, 0.12); --sys-orange-50: #dec2b4; --sys-orange-100: #e0b59c; --sys-orange-200: #de9d7f; --sys-orange-300: #e68057; --sys-orange-400: #e05724; --sys-orange-500: #d74105; --sys-orange-600: #bf2f02; --sys-orange-700: #8f2c19; --sys-orange-800: #571b13; --sys-orange-900: #381b0f; --sys-orange-950: #1e0e08; --sys-orange-500-12: rgba(215, 65, 5, 0.12); --sys-yelloworange-50: #e4c5ae; --sys-yelloworange-100: #e7bb93; --sys-yelloworange-200: #e7a774; --sys-yelloworange-300: #f09952; --sys-yelloworange-400: #ed830d; --sys-yelloworange-500: #e47400; --sys-yelloworange-600: #d05a00; --sys-yelloworange-700: #a34000; --sys-yelloworange-800: #5b2709; --sys-yelloworange-900: #471d07; --sys-yelloworange-950: #270f03; --sys-yelloworange-500-12: rgba(228, 116, 0, 0.12); --sys-orangeyellow-50: #e2c7aa; --sys-orangeyellow-100: #ecc48f; --sys-orangeyellow-200: #eab776; --sys-orangeyellow-300: #e9ad51; --sys-orangeyellow-400: #e6941b; --sys-orangeyellow-500: #db8600; --sys-orangeyellow-600: #cd7b04; --sys-orangeyellow-700: #a86a22; --sys-orangeyellow-800: #673c07; --sys-orangeyellow-900: #492906; --sys-orangeyellow-950: #281603; --sys-orangeyellow-500-12: rgba(219, 134, 0, 0.12); --sys-yellow-50: #e1d1a7; --sys-yellow-100: #e3c990; --sys-yellow-200: #e4c05f; --sys-yellow-300: #e7b43e; --sys-yellow-400: #dea800; --sys-yellow-500: #cf9800; --sys-yellow-600: #c48900; --sys-yellow-700: #a37500; --sys-yellow-800: #6c540b; --sys-yellow-900: #3c3115; --sys-yellow-950: #211a0b; --sys-yellow-500-12: rgba(207, 152, 0, 0.12); --sys-greenyellow-50: #d4d3a4; --sys-greenyellow-100: #ced086; --sys-greenyellow-200: #c7c78a; --sys-greenyellow-300: #bfbc77; --sys-greenyellow-400: #beb942; --sys-greenyellow-500: #a8ad1f; --sys-greenyellow-600: #a0983c; --sys-greenyellow-700: #808315; --sys-greenyellow-800: #605b13; --sys-greenyellow-900: #38382a; --sys-greenyellow-950: #1e1e17; --sys-greenyellow-500-12: rgba(168, 173, 31, 0.12); --sys-yellowgreen-50: #d1d0a0; --sys-yellowgreen-100: #bbc591; --sys-yellowgreen-200: #a6b47c; --sys-yellowgreen-300: #93a359; --sys-yellowgreen-400: #979a4f; --sys-yellowgreen-500: #7e8939; --sys-yellowgreen-600: #6e7936; --sys-yellowgreen-700: #5d6b04; --sys-yellowgreen-800: #4c5807; --sys-yellowgreen-900: #363823; --sys-yellowgreen-950: #1d1e13; --sys-yellowgreen-500-12: rgba(126, 137, 57, 0.12); --sys-green-50: #c3c8c2; --sys-green-100: #a8bfa1; --sys-green-200: #92ac85; --sys-green-300: #7d9672; --sys-green-400: #648a5a; --sys-green-500: #547555; --sys-green-600: #4d5b40; --sys-green-700: #384d26; --sys-green-800: #2d3327; --sys-green-900: #232923; --sys-green-950: #131613; --sys-green-500-12: rgba(84, 117, 85, 0.12); --sys-bluegreen-50: #bfd3bd; --sys-bluegreen-100: #a3c6ad; --sys-bluegreen-200: #8eb895; --sys-bluegreen-300: #6ea596; --sys-bluegreen-400: #5c917f; --sys-bluegreen-500: #477f6a; --sys-bluegreen-600: #3a6c56; --sys-bluegreen-700: #2d614a; --sys-bluegreen-800: #253732; --sys-bluegreen-900: #1d2c2b; --sys-bluegreen-950: #0f1817; --sys-bluegreen-500-12: rgba(71, 127, 106, 0.12); --sys-greenblue-50: #bed2d0; --sys-greenblue-100: #a3c3bd; --sys-greenblue-200: #7ea8a7; --sys-greenblue-300: #559b9f; --sys-greenblue-400: #008da2; --sys-greenblue-500: #006d8b; --sys-greenblue-600: #005b7e; --sys-greenblue-700: #27485d; --sys-greenblue-800: #213e4b; --sys-greenblue-900: #1c2e3a; --sys-greenblue-950: #0f191f; --sys-greenblue-500-12: rgba(0, 109, 139, 0.12); --sys-blue-50: #b3c7c8; --sys-blue-100: #97b7c9; --sys-blue-200: #73a0b8; --sys-blue-300: #0b76a5; --sys-blue-400: #006890; --sys-blue-500: #005b8a; --sys-blue-600: #004e79; --sys-blue-700: #013e6d; --sys-blue-800: #052f5e; --sys-blue-900: #0e2247; --sys-blue-950: #071227; --sys-blue-500-12: rgba(0, 91, 138, 0.12); --sys-purpleblue-50: #bac1c7; --sys-purpleblue-100: #99adc6; --sys-purpleblue-200: #8295bc; --sys-purpleblue-300: #4564a3; --sys-purpleblue-400: #314b91; --sys-purpleblue-500: #1c4295; --sys-purpleblue-600: #1c3077; --sys-purpleblue-700: #212961; --sys-purpleblue-800: #152753; --sys-purpleblue-900: #172242; --sys-purpleblue-950: #0c1224; --sys-purpleblue-500-12: rgba(28, 66, 149, 0.12); --sys-bluepurple-50: #bcbbc2; --sys-bluepurple-100: #9da2c6; --sys-bluepurple-200: #8787bf; --sys-bluepurple-300: #595fb4; --sys-bluepurple-400: #4a559a; --sys-bluepurple-500: #3e3e96; --sys-bluepurple-600: #2f2d7d; --sys-bluepurple-700: #2c2761; --sys-bluepurple-800: #1e2152; --sys-bluepurple-900: #20223a; --sys-bluepurple-950: #11121f; --sys-bluepurple-500-8: rgba(62, 62, 150, 0.08); --sys-bluepurple-500-12: rgba(62, 62, 150, 0.12); --sys-bluepurple-500-15: rgba(62, 62, 150, 0.15); --sys-bluepurple-500-20: rgba(62, 62, 150, 0.2); --sys-bluepurple-300-8: rgba(89, 95, 180, 0.08); --sys-bluepurple-300-12: rgba(89, 95, 180, 0.12); --sys-bluepurple-300-15: rgba(89, 95, 180, 0.15); --sys-bluepurple-300-20: rgba(89, 95, 180, 0.2); --sys-purple-50: #c8bbc8; --sys-purple-100: #b1a9ce; --sys-purple-200: #a28eb9; --sys-purple-300: #8e74a7; --sys-purple-400: #714c9e; --sys-purple-500: #633893; --sys-purple-600: #482e7a; --sys-purple-700: #3b285b; --sys-purple-800: #2a244a; --sys-purple-900: #262231; --sys-purple-950: #14121a; --sys-purple-500-12: rgba(99, 56, 147, 0.12); --sys-redpurple-50: #d7c1d3; --sys-redpurple-100: #c5a8c1; --sys-redpurple-200: #b387ac; --sys-redpurple-300: #a35997; --sys-redpurple-400: #983971; --sys-redpurple-500: #852962; --sys-redpurple-600: #72235e; --sys-redpurple-700: #5c1f4b; --sys-redpurple-800: #4b1e3b; --sys-redpurple-900: #391636; --sys-redpurple-950: #1f0c1d; --sys-redpurple-500-12: rgba(133, 41, 98, 0.12); --sys-purplered-50: #dab7b6; --sys-purplered-100: #cca1b4; --sys-purplered-200: #d17497; --sys-purplered-300: #c6427a; --sys-purplered-400: #bc246e; --sys-purplered-500: #ac003e; --sys-purplered-600: #7f0e34; --sys-purplered-700: #5f1d32; --sys-purplered-800: #570b2a; --sys-purplered-900: #390c21; --sys-purplered-950: #1f0612; --sys-purplered-500-12: rgba(172, 0, 62, 0.12); --font: 'Inter Variable', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: 'JetBrains Mono Variable', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --fw-regular: 300; --fw-medium: 400; --fw-semibold: 500; --fw-bold: 600; --fs-display-lg: 3.5625rem; --lh-display-lg: 4rem; --fs-display-md: 2.8125rem; --lh-display-md: 3.25rem; --fs-display-sm: 2.25rem; --lh-display-sm: 2.75rem; --fs-headline-lg: 2rem; --lh-headline-lg: 2.5rem; --fs-headline-md: 1.75rem; --lh-headline-md: 2.25rem; --fs-headline-sm: 1.5rem; --lh-headline-sm: 2rem; --fs-title-lg: 1.375rem; --lh-title-lg: 1.75rem; --fs-title-md: 1rem; --lh-title-md: 1.5rem; --fs-title-sm: 0.875rem; --lh-title-sm: 1.25rem; --fs-body-lg: 1rem; --lh-body-lg: 1.5rem; --fs-body-md: 0.875rem; --lh-body-md: 1.25rem; --fs-body-sm: 0.75rem; --lh-body-sm: 1rem; --fs-label-lg: 0.875rem; --lh-label-lg: 1.25rem; --fs-label-md: 0.75rem; --lh-label-md: 1rem; --fs-label-sm: 0.6875rem; --lh-label-sm: 1rem; --fs-label-xs: 0.625rem; --lh-label-xs: 0.875rem; --ls-display-lg: -0.01em; --ls-display-md: -0.01em; --ls-display-sm: -0.01em; --ls-headline-lg: -0.01em; --ls-headline-md: -0.01em; --ls-headline-sm: -0.01em; --ls-title-lg: -0.01em; --ls-title-md: -0.01em; --ls-title-sm: -0.01em; --ls-body-lg: -0.01em; --ls-body-md: -0.01em; --ls-body-sm: -0.01em; --ls-label-lg: -0.01em; --ls-label-md: -0.01em; --ls-label-sm: -0.01em; --ls-label-xs: -0.01em; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --map-ctrl-size: 42.5px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-10: 40px; --sp-12: 48px; --sp-15: 60px; --sp-20: 80px; --sp-25: 100px; --shape-3xs: 1px; --shape-2xs: 4px; /** TEMP flatten (2026-07-07): was 2px, a step in the graduated corner-radius scale. Founder-requested global flatten to a single 4px radius across 2xs–xl while a from-scratch shape pass is pending — hand-correcting every consumer wasn't worth it yet. Revert to the graduated scale once that pass happens. */ --shape-xs: 4px; --shape-sm: 4px; /** TEMP flatten (2026-07-07): was 8px. See `shape-2xs`'s description for the full rationale. */ --shape-md: 4px; /** TEMP flatten (2026-07-07): was 12px. See `shape-2xs`'s description for the full rationale. */ --shape-lg: 4px; /** TEMP flatten (2026-07-07): was 16px. See `shape-2xs`'s description for the full rationale. */ --shape-xl: 4px; /** TEMP flatten (2026-07-07): was 28px. See `shape-2xs`'s description for the full rationale. */ --shape-full: 9999px; --blur-sm: blur(8px); --blur-md: blur(10px); --blur-lg: blur(12px); --blur-xl: blur(16px); --blur-2xl: blur(20px); --surface-hover: transparent; --brand-stable-300: #595fb4; --brand-stable-400: #4a559a; --maplibre-glass-bg: rgba(0, 0, 0, 0.7); --maplibre-glass-border: rgba(255, 255, 255, 0.12); --maplibre-glass-fg: rgba(255, 255, 255, 0.8); --maplibre-glass-fg-dim: rgba(255, 255, 255, 0.7); --maplibre-glass-divider: rgba(255, 255, 255, 0.08); --maplibre-glass-hover: rgba(255, 255, 255, 0.08); --maplibre-attrib-bg: rgba(0, 0, 0, 0.5); --maplibre-attrib-fg: rgba(255, 255, 255, 0.5); --grid-columns: 12; --grid-body: 1200px; --dur-short-2: 100ms; --dur-short-3: 200ms; --dur-short-4: 300ms; --dur-medium-3: 500ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1); --elevation-1: 0 1px 3px 1px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.3); --elevation-2: 0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.3); --elevation-3: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px rgba(0,0,0,0.14), 0 1px 18px rgba(0,0,0,0.12); --elevation-4: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12); --shadow-elev-inner-glow: rgba(255, 255, 255, 0.18); --shadow-elev-occlusion: rgba(0, 0, 0, 0.3); --shadow-elev-depth: rgba(0, 0, 0, 0.18); --container-bevel-bright: #ababab; --container-bevel-mid: #454545; --container-stroke: 0.66px; --ctl-h-compact: 28px; --ctl-h-default: 32px; --state-outlined-bg: transparent; --z-bg: 0; --z-default: 1; --z-nav: 10; --z-overlay: 50; --z-modal: 100; --z-toast: 200; --sig-0: #f14254; --sig-1: #f64f4c; --sig-2: #fa5c44; --sig-3: #fd693d; --sig-4: #ff7c24; --sig-5: #ff9000; --sig-6: #ffa300; --sig-7: #fab700; --sig-8: #f1bf00; --sig-9: #e6c700; --sig-10: #d7d000; --sig-11: #c5d900; --sig-12: #b1e300; --sig-13: #94ed00; --sig-14: #64f80a; --sig-15: #00ff40; --bg: var(--sys-zinc-950); --bg-raised: var(--sys-zinc-900); --surface: var(--sys-zinc-925); --surface-active: var(--sys-white-10); --overlay: var(--sys-black-50); --text: var(--sys-zinc-100); --text-muted: var(--sys-zinc-400); --text-tertiary: var(--sys-zinc-400); --text-accent: var(--sys-bluepurple-100); --tone-bluepurple-fg: var(--sys-bluepurple-100); /** Bluepurple tonal badge foreground — theme-aware step that passes WCAG AA for small text on each theme background. Dark/dim: bluepurple-200; light: bluepurple-600. */ --tone-blue-fg: var(--sys-blue-200); /** Blue tonal text/icon foreground — WCAG AA-passing step per theme. Dark/dim: blue-200; light: blue-700. */ --tone-red-fg: var(--sys-red-200); /** Red tonal text/icon foreground — WCAG AA-passing step per theme. Dark/dim: red-300; light: red-700. */ --tone-purplered-fg: var(--sys-purplered-200); /** Purplered tonal badge foreground — WCAG AA-passing step per theme. Dark/dim: purplered-200; light: purplered-700. */ --tone-orangered-fg: var(--sys-orangered-300); /** orangered tonal text/icon foreground — WCAG AA-passing step per theme. */ --tone-redorange-fg: var(--sys-redorange-300); /** redorange tonal text/icon foreground — WCAG AA-passing step per theme. */ --tone-orange-fg: var(--sys-orange-200); /** orange tonal text/icon foreground — WCAG AA-passing step per theme. */ --tone-yelloworange-fg: var(--sys-yelloworange-500); /** yelloworange tonal text/icon foreground — WCAG AA-passing step per theme. */ --tone-orangeyellow-fg: var(--sys-orangeyellow-600); /** orangeyellow tonal text/icon foreground — WCAG AA-passing step per theme. */ --tone-yellow-fg: var(--sys-yellow-600); /** yellow tonal text/icon foreground — WCAG AA-passing step per theme. */ --tone-greenyellow-fg: var(--sys-greenyellow-600); /** greenyellow tonal text/icon foreground — WCAG AA-passing step per theme. */ --tone-yellowgreen-fg: var(--sys-yellowgreen-500); /** yellowgreen tonal text/icon foreground — WCAG AA-passing step per theme. */ --tone-green-fg: var(--sys-green-200); /** green tonal text/icon foreground — WCAG AA-passing step per theme. */ --tone-bluegreen-fg: var(--sys-bluegreen-400); /** bluegreen tonal text/icon foreground — WCAG AA-passing step per theme. */ --tone-greenblue-fg: var(--sys-greenblue-300); /** greenblue tonal text/icon foreground — WCAG AA-passing step per theme. */ --tone-purpleblue-fg: var(--sys-purpleblue-200); /** purpleblue tonal text/icon foreground — WCAG AA-passing step per theme. */ --tone-purple-fg: var(--sys-purple-200); /** purple tonal text/icon foreground — WCAG AA-passing step per theme. */ --tone-redpurple-fg: var(--sys-redpurple-200); /** redpurple tonal text/icon foreground — WCAG AA-passing step per theme. */ --on-primary: var(--sys-bluepurple-950); --on-primary-deep: var(--sys-bluepurple-950); --border: var(--sys-zinc-850); --border-subtle: var(--sys-white-8); --border-hover: var(--sys-white-14); --border-focus: var(--sys-bluepurple-400); --border-accent: var(--sys-bluepurple-500-20); --chart-grid: var(--sys-zinc-850); --accent: var(--sys-bluepurple-300); --accent-light: var(--sys-bluepurple-400); --accent-dark: var(--sys-bluepurple-600); --accent-subtle: var(--sys-bluepurple-500-8); --glow: var(--sys-bluepurple-500-15); --hover-halo: var(--sys-bluepurple-300); --badge-success-bg: var(--sys-green-500-12); --badge-warning-bg: var(--sys-orangeyellow-500-12); --badge-warning-fg: var(--sys-orangeyellow-400); --badge-danger-bg: var(--sys-red-500-12); --badge-info-bg: var(--sys-greenblue-500-12); --surface-sunken: var(--sys-zinc-975); --surface-glass: color-mix(in srgb, var(--sys-zinc-900) 75%, transparent); --outline-glass: var(--sys-zinc-800); --surface-tint-1: var(--sys-white-4); --surface-tint-2: var(--sys-white-7); --surface-tint-3: var(--sys-white-8); --surface-tint-4: var(--sys-white-12); --surface-tint-5: var(--sys-white-14); --grid-gutter: var(--sp-6); --grid-margin: var(--sp-2); --pane-spacer: var(--sp-6); --pane-padding: var(--sp-4); --page-pt: var(--sp-10); --page-pb: var(--sp-15); --page-px: var(--sp-4); --section-gap: var(--sp-12); --block-gap: var(--sp-4); --card-pad: var(--sp-5); --card-pad-tight: var(--sp-4); --card-pad-hero: var(--sp-7); --card-gap: var(--sp-4); --shadow-container: inset 7px 14px 64.1px -46px var(--shadow-elev-inner-glow), 0 1px 3px 0 var(--shadow-elev-occlusion), 0 4px 14px -3px var(--shadow-elev-depth); --container-bevel: linear-gradient(to bottom right, color-mix(in srgb, var(--container-bevel-bright) 80%, transparent) 0%, color-mix(in srgb, var(--container-bevel-mid) 33%, transparent) 32%, color-mix(in srgb, var(--container-bevel-mid) 66%, transparent) 82%, color-mix(in srgb, var(--container-bevel-bright) 50%, transparent) 100%) border-box; --container-border: var(--container-stroke) solid transparent; --ctl-pad-inline: var(--sp-4); --ctl-pad-inline-compact: var(--sp-3); --ctl-fs: var(--fs-label-lg); --ctl-lh: var(--lh-label-lg); --ctl-ls: var(--ls-label-lg); --ctl-fw: var(--fw-medium); --ctl-fs-compact: var(--fs-label-md); --ctl-shape-pill: var(--shape-sm); --ctl-shape-rect: var(--shape-sm); --state-filled-bg: var(--brand-stable-300); --state-filled-bg-hover: var(--brand-stable-300); --state-hover-bg: var(--brand-stable-300); --state-tonal-bg: var(--brand-stable-300); --state-tonal-bg-hover: var(--brand-stable-300); --state-outlined-stroke: var(--brand-stable-400); --state-danger-bg: var(--sys-red-500); --state-danger-bg-hover: var(--sys-red-600); --state-danger-stroke: var(--sys-red-400); --ctl-neutral-bg-on-surface: var(--sys-zinc-800); --ctl-neutral-bg-on-surface-hover: var(--sys-zinc-800); --ctl-neutral-fg: var(--sys-zinc-100); --badge-neutral-bg: var(--surface); --badge-neutral-fg: var(--text-muted); --badge-neutral-stroke: var(--border); --badge-accent-bg: var(--accent-subtle); --badge-accent-fg: var(--text-accent); /** Bluepurple tonal badge foreground — routes through --text-accent (bluepurple-200 dark/dim, bluepurple-600 light) so .m3-tag--accent passes WCAG AA. */ --badge-accent-stroke: var(--border-accent); --badge-success-fg: var(--tone-green-fg); --badge-danger-fg: var(--tone-red-fg); --badge-info-fg: var(--tone-greenblue-fg); --surface-1: var(--bg-raised); --container-bg: linear-gradient(var(--bg), var(--bg)) padding-box, var(--container-bevel); --container-bg-sunken: linear-gradient(var(--surface-sunken), var(--surface-sunken)) padding-box, linear-gradient(-1deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.25) 100%) border-box; --card-fill-zinc: var(--surface); --card-fill-bluepurple-tonal: var(--glow); --state-text-bg: var(--surface-tint-1); --state-outlined-fg: var(--tone-bluepurple-fg); /** Outlined button/icon label — routes through --tone-bluepurple-fg for WCAG AA text contrast. */ --state-elevated-bg: var(--bg-raised); --state-danger-fg: var(--tone-red-fg); --ctl-neutral-bg: var(--bg-raised); --ctl-neutral-bg-hover: var(--bg-raised); } } /* ── ui-kit.themes: dist/css/themes/dark.css ── */ @layer ui-kit.themes { /** * Do not edit directly, this file was auto-generated. * Theme overrides for data-theme="dark". */ :root[data-theme="dark"] { --bg: var(--sys-zinc-950); --bg-raised: var(--sys-zinc-900); --surface: var(--sys-zinc-925); --surface-hover: transparent; --surface-active: var(--sys-white-10); --text: var(--sys-zinc-100); --text-muted: var(--sys-zinc-400); --text-tertiary: var(--sys-zinc-400); --text-accent: var(--sys-bluepurple-100); --tone-bluepurple-fg: var(--sys-bluepurple-100); --tone-blue-fg: var(--sys-blue-200); --tone-red-fg: var(--sys-red-200); --tone-purplered-fg: var(--sys-purplered-200); --tone-orangered-fg: var(--sys-orangered-300); --tone-redorange-fg: var(--sys-redorange-300); --tone-orange-fg: var(--sys-orange-200); --tone-yelloworange-fg: var(--sys-yelloworange-500); --tone-orangeyellow-fg: var(--sys-orangeyellow-600); --tone-yellow-fg: var(--sys-yellow-600); --tone-greenyellow-fg: var(--sys-greenyellow-600); --tone-yellowgreen-fg: var(--sys-yellowgreen-500); --tone-green-fg: var(--sys-green-200); --tone-bluegreen-fg: var(--sys-bluegreen-400); --tone-greenblue-fg: var(--sys-greenblue-300); --tone-purpleblue-fg: var(--sys-purpleblue-200); --tone-purple-fg: var(--sys-purple-200); --tone-redpurple-fg: var(--sys-redpurple-200); --border: var(--sys-zinc-850); --border-subtle: var(--sys-white-8); --border-hover: var(--sys-white-14); --border-focus: var(--sys-bluepurple-400); --surface-1: var(--sys-zinc-900); --surface-sunken: var(--sys-zinc-975); --surface-glass: color-mix(in srgb, var(--sys-zinc-900) 75%, transparent); --outline-glass: var(--sys-zinc-800); --surface-tint-1: var(--sys-white-4); --surface-tint-2: var(--sys-white-7); --surface-tint-3: var(--sys-white-8); --surface-tint-4: var(--sys-white-12); --surface-tint-5: var(--sys-white-14); --maplibre-glass-bg: rgba(0, 0, 0, 0.70); --maplibre-glass-border: rgba(255, 255, 255, 0.12); --maplibre-glass-fg: rgba(255, 255, 255, 0.80); --maplibre-glass-fg-dim: rgba(255, 255, 255, 0.70); --maplibre-glass-divider: rgba(255, 255, 255, 0.08); --maplibre-glass-hover: rgba(255, 255, 255, 0.08); --maplibre-attrib-bg: rgba(0, 0, 0, 0.50); --maplibre-attrib-fg: rgba(255, 255, 255, 0.50); --ctl-neutral-bg: var(--bg-raised); --ctl-neutral-bg-hover: var(--bg-raised); --ctl-neutral-bg-on-surface: var(--sys-zinc-800); --ctl-neutral-bg-on-surface-hover: var(--sys-zinc-800); } } /* ── ui-kit.themes: dist/css/themes/dim.css ── */ @layer ui-kit.themes { /** * Do not edit directly, this file was auto-generated. * Theme overrides for data-theme="dim". */ :root[data-theme="dim"] { --chart-grid: var(--sys-zinc-700); --bg: var(--sys-zinc-850); --bg-raised: #30302F; --surface: #262525; --surface-hover: transparent; --surface-active: var(--sys-white-12); --text: var(--sys-zinc-100); --text-muted: var(--sys-zinc-300); --text-tertiary: var(--sys-zinc-400); --text-accent: var(--sys-bluepurple-100); --tone-bluepurple-fg: var(--sys-bluepurple-100); --tone-blue-fg: var(--sys-blue-200); --tone-red-fg: var(--sys-red-200); --tone-purplered-fg: var(--sys-purplered-200); --tone-orangered-fg: var(--sys-orangered-300); --tone-redorange-fg: var(--sys-redorange-300); --tone-orange-fg: var(--sys-orange-200); --tone-yelloworange-fg: var(--sys-yelloworange-500); --tone-orangeyellow-fg: var(--sys-orangeyellow-600); --tone-yellow-fg: var(--sys-yellow-600); --tone-greenyellow-fg: var(--sys-greenyellow-600); --tone-yellowgreen-fg: var(--sys-yellowgreen-500); --tone-green-fg: var(--sys-green-200); --tone-bluegreen-fg: var(--sys-bluegreen-400); --tone-greenblue-fg: var(--sys-greenblue-300); --tone-purpleblue-fg: var(--sys-purpleblue-200); --tone-purple-fg: var(--sys-purple-200); --tone-redpurple-fg: var(--sys-redpurple-200); --border: transparent; --border-subtle: var(--sys-white-12); --border-hover: var(--sys-white-16); --border-focus: var(--sys-bluepurple-400); --surface-1: #30302F; --surface-sunken: #1C1C1B; --surface-glass: color-mix(in srgb, #1C1C1B 75%, transparent); --outline-glass: var(--sys-zinc-500); --surface-tint-1: var(--sys-white-5); --surface-tint-2: var(--sys-white-9); --surface-tint-3: var(--sys-white-10); --surface-tint-4: var(--sys-white-14); --surface-tint-5: var(--sys-white-16); --maplibre-glass-bg: rgba(28, 28, 27, 0.75); --maplibre-glass-border: rgba(255, 255, 255, 0.12); --maplibre-glass-fg: rgba(255, 255, 255, 0.80); --maplibre-glass-fg-dim: rgba(255, 255, 255, 0.70); --maplibre-glass-divider: rgba(255, 255, 255, 0.08); --maplibre-glass-hover: rgba(255, 255, 255, 0.08); --maplibre-attrib-bg: rgba(28, 28, 27, 0.55); --maplibre-attrib-fg: rgba(255, 255, 255, 0.55); --shadow-elev-inner-glow: rgba(255, 255, 255, 0.18); --shadow-elev-occlusion: rgba(0, 0, 0, 0.20); --shadow-elev-depth: rgba(0, 0, 0, 0.12); --ctl-neutral-bg: var(--bg-raised); --ctl-neutral-bg-hover: var(--bg-raised); --ctl-neutral-bg-on-surface: #363535; --ctl-neutral-bg-on-surface-hover: #363535; } } /* ── ui-kit.themes: dist/css/themes/light.css ── */ @layer ui-kit.themes { /** * Do not edit directly, this file was auto-generated. * Theme overrides for data-theme="light". */ :root[data-theme="light"] { --bg: var(--sys-zinc-100); --bg-raised: var(--sys-zinc-50); --surface: var(--sys-zinc-50); --surface-hover: transparent; --surface-active: var(--sys-black-8); --text: var(--sys-zinc-900); --text-muted: var(--sys-zinc-600); --text-tertiary: var(--sys-zinc-500); --text-accent: var(--sys-bluepurple-600); --tone-bluepurple-fg: var(--sys-bluepurple-600); --tone-blue-fg: var(--sys-blue-700); --tone-red-fg: var(--sys-red-700); --tone-purplered-fg: var(--sys-purplered-700); --tone-orangered-fg: var(--sys-orangered-800); --tone-redorange-fg: var(--sys-redorange-800); --tone-orange-fg: var(--sys-orange-800); --tone-yelloworange-fg: var(--sys-yelloworange-800); --tone-orangeyellow-fg: var(--sys-orangeyellow-900); --tone-yellow-fg: var(--sys-yellow-900); --tone-greenyellow-fg: var(--sys-greenyellow-900); --tone-yellowgreen-fg: var(--sys-yellowgreen-900); --tone-green-fg: var(--sys-green-800); --tone-bluegreen-fg: var(--sys-bluegreen-800); --tone-greenblue-fg: var(--sys-greenblue-800); --tone-purpleblue-fg: var(--sys-purpleblue-600); --tone-purple-fg: var(--sys-purple-600); --tone-redpurple-fg: var(--sys-redpurple-700); --border: transparent; --container-bevel-bright: var(--sys-zinc-50); --container-bevel-mid: var(--sys-zinc-300); --border-subtle: var(--sys-zinc-250); --border-hover: var(--sys-zinc-300); --border-focus: var(--sys-bluepurple-500); --chart-grid: var(--sys-zinc-200); --surface-1: var(--sys-zinc-50); --surface-sunken: var(--sys-zinc-200); --surface-glass: var(--bg-raised); --outline-glass: var(--sys-zinc-250); --surface-tint-1: var(--sys-black-4); --surface-tint-2: var(--sys-black-6); --surface-tint-3: var(--sys-black-8); --surface-tint-4: var(--sys-black-12); --surface-tint-5: var(--sys-black-12); --maplibre-glass-bg: rgba(255, 255, 255, 0.75); --maplibre-glass-border: rgba(0, 0, 0, 0.12); --maplibre-glass-fg: rgba(0, 0, 0, 0.80); --maplibre-glass-fg-dim: rgba(0, 0, 0, 0.65); --maplibre-glass-divider: rgba(0, 0, 0, 0.08); --maplibre-glass-hover: rgba(0, 0, 0, 0.06); --maplibre-attrib-bg: rgba(255, 255, 255, 0.55); --maplibre-attrib-fg: rgba(0, 0, 0, 0.55); --shadow-elev-inner-glow: rgba(255, 255, 255, 0.06); --shadow-elev-occlusion: rgba(0, 0, 0, 0.05); --shadow-elev-depth: rgba(0, 0, 0, 0.03); --accent: var(--sys-bluepurple-500); --hover-halo: rgba(28, 66, 149, 0.30); --accent-light: var(--sys-bluepurple-400); --on-primary: var(--sys-zinc-100); --ctl-neutral-bg: var(--sys-zinc-200); --ctl-neutral-bg-hover: var(--sys-zinc-300); --ctl-neutral-bg-on-surface: var(--sys-zinc-200); --ctl-neutral-bg-on-surface-hover: var(--sys-zinc-300); --ctl-neutral-fg: var(--sys-zinc-900); --state-elevated-bg: var(--sys-zinc-50); } } /* ── ui-kit.themes: src/styles/theme-extras.css ── */ @layer ui-kit.themes { /* ── Theme extras: dark card drop-shadow boost + theme-swap suppressor ─── */ /* ── Dark theme — container/surface card depth-shadow boost ──────── Class-level override: bumps the DEPTH slot (`--shadow-elev-depth`) on the canonical container surfaces so cards cast a more pronounced separation against the zinc-950 body in explicit dark mode. The liquid-glass base dark depth (0.18) is already heavier than the old raised-paper recipe (0.10), so the class-level bump here is softer than the previous 0.80 — just enough extra atmosphere to keep the card silhouette legible on the near-black body. The other three slots (highlight / reflect / occlusion) inherit the :root anchors automatically because `--shadow-container` resolves its `var(--shadow-elev-*)` references at use-time on each element. Mirrors the dim-theme token-level tune but applied at the class level per design spec. Targets the canonical roster of card surfaces (`.m3-card` + every legacy layout alias) via `:is(…)` and skips the two flat chrome modifiers (`--flat-inset`, `--flat`) whose recipes intentionally drop the shadow stack. */ /* Phase 5f: kit boosts only `.m3-card`. Legacy app-class aliases that participate in the canonical-card chrome opt into the boost via the app-side roster (kit-aliases.css). */ :root[data-theme="dark"] .m3-card:not(.m3-card--flat-inset):not(.m3-card--flat) { /* stylelint-disable-next-line declaration-property-value-disallowed-list -- kit's canonical dark-theme depth-shadow alpha; tokenizing would require a per-theme --shadow-elev-depth-dark fork */ --shadow-elev-depth: rgba(0, 0, 0, 0.50); } /* ── Token extras — sub-tier spacing + icon size + eyebrow tracking ─── These fill three gaps in the Style-Dictionary-generated ladder that the kit consumes from `dist/css/tokens.css`: 1. Sub-`--sp-1` micro-rhythm (2 px / 6 px) for legend chip gaps, truncate padding-block, drag-handle insets, chart Y-label breathing room. Canonical 4-grid jumps from 4 px to 8 px with no intermediate; these tokens fill the half-steps. 2. M3 icon glyph sizing (18 px / 24 px) for icon-fonts whose footprint is canonically set via `font-size`. Previously every icon site declared the literal pixel value, so density tuning was a 7-call-site sweep. One token, swap once. 3. Eyebrow tracking (+0.05em) for uppercase label rows on `.metric-meter__label`, `.stat-tile__label`, etc. Positive tracking on small-caps is canonical typographic practice; the `--ls-*` ladder ships uniform tight tracking (-0.01em), so the eyebrow pattern needs its own slot. 4. Eyebrow color anchor (--text-eyebrow) for the canonical uppercase label rung (PartitionHeading, .metric-meter__label, .stat-tile__label). Derived as a `color-mix` 50% interpolation from `--text-muted` toward `--text` in OKLCH so the eyebrow gains contrast against the body surface in EVERY theme without a per-theme override: \u2022 Dark theme \u2014 zinc-400 \u2192 zinc-100 midpoint \u2248 zinc-250. Brighter than the prior `--text-muted` reading; lifts off the near-black body so the eyebrow reads as a category label, not a quiet ornament. \u2022 Dim theme \u2014 zinc-300 \u2192 zinc-100 midpoint \u2248 zinc-200. Same brightening direction as dark. \u2022 Light theme \u2014 zinc-700 \u2192 zinc-800 midpoint \u2248 zinc-750. DARKER than the prior `--text-muted` reading; the eyebrow sinks toward the body-ink anchor instead of dissolving into the page background. The single `color-mix` formula reverses direction automatically because `--text` is itself theme-bound (near- white in dark / dim, near-black in light), so the same interpolation point produces opposite-direction contrast shifts where the operator perceives them as the same intent: "give the eyebrow more presence against its body". Anchored at `:root` rather than per-theme so a host element that already lives inside an inverted-tone region (a dark card on light page, etc.) inherits the right reading without an additional cascade rule. */ :root { /* Sub-tier spacing \u2014 half-steps on the 4-grid for micro-rhythm. */ --sp-0_5: 2px; --sp-1_5: 6px; /* M3 icon glyph sizes \u2014 sized via `font-size` per the Material Icons convention. `sm` = chip / snackbar-close icons; `md` = icon button / drawer / rail / text-input trailing icons. */ --icon-sm: 18px; --icon-md: 24px; /* Eyebrow letter-spacing \u2014 positive tracking for uppercase label rows. Mirrors the design-system convention that small-caps eyebrows read better with looser tracking than the default tight `--ls-*` (-0.01em) the kit uses for sentence-cased text. */ --ls-eyebrow: 0.05em; /* Eyebrow color anchor \u2014 50% interpolation between `--text-muted` (the prior eyebrow color) and `--text` (the full-contrast anchor). See the long block above for the per-theme contrast direction this single formula produces. Consumers (`PartitionHeading`, `.metric-meter__label`, `.stat-tile__label`) read this token directly so the whole eyebrow family stays coherent across every theme. */ --text-eyebrow: color-mix(in oklch, var(--text-muted), var(--text) 50%); /* ── Keyline & stroke tier tokens ────────────────────────────── Every box-model ring in the kit picks one of three placement tiers (Outer / Mid / Inner) so multiple rings on the same host stack PIXEL-PRECISELY on adjacent layers instead of fighting each other. See `Foundations/Keylines & Strokes` in Storybook for the full taxonomy + migration table. Outer — sits OUTSIDE the host's border-box; canonical mechanism `box-shadow: 0 0 0 ` (focus rings, hover halos, growing-state effects). Mid — sits AT the host's border-box edge; canonical mechanism `border: solid ` (the chrome keyline itself; the rank-row hover colorization). Inner — sits INSIDE the host's border-box, overlapping the content background; canonical mechanism `box-shadow: inset 0 0 0 ` or a `::before` pseudo with padding + mask (gradient strokes, animated rings, selection overlays). Stacking rule — Outer ring's inner edge = Mid ring's outer edge = host's border-box outer edge. Mid ring's inner edge = Inner ring's outer edge = host's padding-box outer edge. Stacked rings therefore stack ADJACENT, not overlapping. */ --stroke-hairline: 1px; --stroke-thick: 2px; --keyline-outer: var(--border-focus); --keyline-mid: var(--text-muted); --keyline-inner: var(--accent); } /* ── tone defaults per theme ─────────────────────── The `` portable React component renders a comet as sixteen stacked 1 px strokes at 50 % stroke-opacity — same path geometry, different dash lengths, all centred on the same point so the brightest / shortest stroke paints on top and the dimmer / longer strokes fade off-centre for a "fade center out" gradient. Stroke alpha composites multiplicatively, so 16 semi-transparent layers stack to nearly full opacity at the centre while a single layer at the tips reads at 50 %. The sixteen steps walk UP the indigo `--sys-bluepurple-*` ramp from `step-1` (outermost, dim) to `step-16` (innermost, bright). Every 4th step sits on a native ramp stop; the three steps between each pair of native stops are `color-mix(in oklch, A, B P%)` interpolations at 25 / 50 / 75 % from one stop to the next, giving perceptually- uniform quarter-step resolution along the ramp. `--active-shimmer-trough` is still used for the dim continuous outline track that paints between comet passes. Theme translation: each tier above dark shifts every step UP the ramp by one brightness stop so contrast against the host surface stays comparable on every theme without per-theme props. Host- level overrides on any step variable still win (custom-property cascade), so a danger-toned card can pin its own red ramp regardless of the active theme. */ :root[data-theme="dark"] { --active-shimmer-trough: var(--sys-bluepurple-600); /* Outer-glow tonal anchors — one indigo step brighter / darker than the trough. Used by the glow keyframe animation to cycle through three indigo shades across the breathing cycle. */ --active-shimmer-glow-bright: var(--sys-bluepurple-500); --active-shimmer-glow-dark: var(--sys-bluepurple-700); /* Two new low-end stops sit between the trough (600) and the original brightest-stop-of-the-low-octave (500), interpolated in OKLCH at 1/3 and 2/3. Adds dim shoulder to the centre-out fade. */ --active-shimmer-step-1: color-mix(in oklch, var(--sys-bluepurple-600), var(--sys-bluepurple-500) 33%); --active-shimmer-step-2: color-mix(in oklch, var(--sys-bluepurple-600), var(--sys-bluepurple-500) 67%); --active-shimmer-step-3: var(--sys-bluepurple-500); --active-shimmer-step-4: color-mix(in oklch, var(--sys-bluepurple-500), var(--sys-bluepurple-400) 25%); --active-shimmer-step-5: color-mix(in oklch, var(--sys-bluepurple-500), var(--sys-bluepurple-400) 50%); --active-shimmer-step-6: color-mix(in oklch, var(--sys-bluepurple-500), var(--sys-bluepurple-400) 75%); --active-shimmer-step-7: var(--sys-bluepurple-400); --active-shimmer-step-8: color-mix(in oklch, var(--sys-bluepurple-400), var(--sys-bluepurple-300) 25%); --active-shimmer-step-9: color-mix(in oklch, var(--sys-bluepurple-400), var(--sys-bluepurple-300) 50%); --active-shimmer-step-10: color-mix(in oklch, var(--sys-bluepurple-400), var(--sys-bluepurple-300) 75%); --active-shimmer-step-11: var(--sys-bluepurple-300); --active-shimmer-step-12: color-mix(in oklch, var(--sys-bluepurple-300), var(--sys-bluepurple-200) 25%); --active-shimmer-step-13: color-mix(in oklch, var(--sys-bluepurple-300), var(--sys-bluepurple-200) 50%); --active-shimmer-step-14: color-mix(in oklch, var(--sys-bluepurple-300), var(--sys-bluepurple-200) 75%); --active-shimmer-step-15: var(--sys-bluepurple-200); --active-shimmer-step-16: color-mix(in oklch, var(--sys-bluepurple-200), var(--sys-bluepurple-100) 25%); --active-shimmer-step-17: color-mix(in oklch, var(--sys-bluepurple-200), var(--sys-bluepurple-100) 50%); --active-shimmer-step-18: color-mix(in oklch, var(--sys-bluepurple-200), var(--sys-bluepurple-100) 75%); } :root[data-theme="dim"] { --active-shimmer-trough: var(--sys-bluepurple-500); --active-shimmer-glow-bright: var(--sys-bluepurple-400); --active-shimmer-glow-dark: var(--sys-bluepurple-600); --active-shimmer-step-1: color-mix(in oklch, var(--sys-bluepurple-500), var(--sys-bluepurple-400) 33%); --active-shimmer-step-2: color-mix(in oklch, var(--sys-bluepurple-500), var(--sys-bluepurple-400) 67%); --active-shimmer-step-3: var(--sys-bluepurple-400); --active-shimmer-step-4: color-mix(in oklch, var(--sys-bluepurple-400), var(--sys-bluepurple-300) 25%); --active-shimmer-step-5: color-mix(in oklch, var(--sys-bluepurple-400), var(--sys-bluepurple-300) 50%); --active-shimmer-step-6: color-mix(in oklch, var(--sys-bluepurple-400), var(--sys-bluepurple-300) 75%); --active-shimmer-step-7: var(--sys-bluepurple-300); --active-shimmer-step-8: color-mix(in oklch, var(--sys-bluepurple-300), var(--sys-bluepurple-200) 25%); --active-shimmer-step-9: color-mix(in oklch, var(--sys-bluepurple-300), var(--sys-bluepurple-200) 50%); --active-shimmer-step-10: color-mix(in oklch, var(--sys-bluepurple-300), var(--sys-bluepurple-200) 75%); --active-shimmer-step-11: var(--sys-bluepurple-200); --active-shimmer-step-12: color-mix(in oklch, var(--sys-bluepurple-200), var(--sys-bluepurple-100) 25%); --active-shimmer-step-13: color-mix(in oklch, var(--sys-bluepurple-200), var(--sys-bluepurple-100) 50%); --active-shimmer-step-14: color-mix(in oklch, var(--sys-bluepurple-200), var(--sys-bluepurple-100) 75%); --active-shimmer-step-15: var(--sys-bluepurple-100); --active-shimmer-step-16: color-mix(in oklch, var(--sys-bluepurple-100), var(--sys-bluepurple-50) 25%); --active-shimmer-step-17: color-mix(in oklch, var(--sys-bluepurple-100), var(--sys-bluepurple-50) 50%); --active-shimmer-step-18: color-mix(in oklch, var(--sys-bluepurple-100), var(--sys-bluepurple-50) 75%); } :root[data-theme="light"] { --active-shimmer-trough: var(--sys-bluepurple-400); --active-shimmer-glow-bright: var(--sys-bluepurple-300); --active-shimmer-glow-dark: var(--sys-bluepurple-500); --active-shimmer-step-1: color-mix(in oklch, var(--sys-bluepurple-400), var(--sys-bluepurple-300) 33%); --active-shimmer-step-2: color-mix(in oklch, var(--sys-bluepurple-400), var(--sys-bluepurple-300) 67%); --active-shimmer-step-3: var(--sys-bluepurple-300); --active-shimmer-step-4: color-mix(in oklch, var(--sys-bluepurple-300), var(--sys-bluepurple-200) 25%); --active-shimmer-step-5: color-mix(in oklch, var(--sys-bluepurple-300), var(--sys-bluepurple-200) 50%); --active-shimmer-step-6: color-mix(in oklch, var(--sys-bluepurple-300), var(--sys-bluepurple-200) 75%); --active-shimmer-step-7: var(--sys-bluepurple-200); --active-shimmer-step-8: color-mix(in oklch, var(--sys-bluepurple-200), var(--sys-bluepurple-100) 25%); --active-shimmer-step-9: color-mix(in oklch, var(--sys-bluepurple-200), var(--sys-bluepurple-100) 50%); --active-shimmer-step-10: color-mix(in oklch, var(--sys-bluepurple-200), var(--sys-bluepurple-100) 75%); --active-shimmer-step-11: var(--sys-bluepurple-100); --active-shimmer-step-12: color-mix(in oklch, var(--sys-bluepurple-100), var(--sys-bluepurple-50) 25%); --active-shimmer-step-13: color-mix(in oklch, var(--sys-bluepurple-100), var(--sys-bluepurple-50) 50%); --active-shimmer-step-14: color-mix(in oklch, var(--sys-bluepurple-100), var(--sys-bluepurple-50) 75%); --active-shimmer-step-15: var(--sys-bluepurple-50); --active-shimmer-step-16: color-mix(in oklch, var(--sys-bluepurple-50), white 25%); --active-shimmer-step-17: color-mix(in oklch, var(--sys-bluepurple-50), white 50%); --active-shimmer-step-18: color-mix(in oklch, var(--sys-bluepurple-50), white 75%); } /* ── host wrappers ───────────────────────────── The `.active-shimmer-host*` class family has been replaced by the CSS-native `.active-shimmer*` family declared in `styles/components/active-shimmer.css`. The new approach mutates the host element in place (via `::before` pseudo + conic-gradient + mask-composite) rather than wrapping content for an SVG overlay. See `active-shimmer.css` for the implementation. */ /* ── Theme-swap transition suppressor ──────────────────────── `applyTheme()` in `lib/theme.ts` adds `theme-swapping` to for one rAF cycle around the `data-theme` attribute change. While the class is present, every element's `transition` is forced to `none` so chrome colours flip in-sync rather than each tweening on its own duration (100–300 ms across the system) and producing a visible "wave" of mismatched colours. The class is removed on the next frame so hover / focus animations resume normally. Targets `*` plus `::before` / `::after` because pseudo-elements (drag handles, ribbon underlines, etc.) also carry transitions. */ .theme-swapping, .theme-swapping *, .theme-swapping *::before, .theme-swapping *::after { transition: none !important; } } /* ── ui-kit.supports: src/styles/supports.css ── */ @layer ui-kit.supports { /* ── P3 + color-mix @supports overrides (kit-canonical theme add-ons) ───── */ /* ── P3 wide-gamut palette overrides ─────────────────────────────── The wholesale Prismatic wheel transcreation pulls every chromatic hex straight from the designer's reference SVG. Those 180 cells are the canonical source of truth — nudging them with a generic +20 % OKLCH C bump on wide-gamut hardware would distort the curated wheel. Only the pure-indicator P3 primaries (--ind-*) survive the P3 override layer; every chromatic family (including the wheel's BLUE-PURPLE sector, which is the new accent anchor) inherits its sRGB hex on every display class. */ @supports (color: color(display-p3 0 0 0)) { @media (color-gamut: p3) { :root { /* Indicators — P3-max with wheel-aligned hue twist. Same lightness + chroma as the legacy pure-P3 primaries, just rotated a few degrees toward the wheel's RED / YELLOW / GREEN sectors so the status family reads as one piece with the wheel-aligned chrome. See the sRGB fallback block above for the per-channel rationale. `--ind-blue` pushes P3 primary blue (B=1) with G ≈ 0.140 (no red), MATCHING `--ind-green`'s 0.140 blue trace so the two siblings carry identical saturation depth. Same primary- channel-at-gamut-max + secondary-trace-at-0.140 recipe across the whole indicator family; the chosen trace is the smallest that still nudges the hue toward the wheel BLUE sector (lands around H ≈ 260° — still clearly blue-identity, no longer reaching all the way to the wheel anchor at 240°) in exchange for full saturation + brightness parity with the rest of the indicator family. `--ind-indigo` pushes P3 primary blue (B=1) with R ≈ 0.467 (no green) so the hue twists past the wheel BLUE-PURPLE sector toward the visible-violet edge that approximates ultraviolet (H ≈ 291°, ~400 nm spectral cutoff). Maximum brightness + maximum saturation at the P3 gamut edge for that hue — the "UV indicator" sibling of the red/green/ yellow status family. */ --ind-red: color(display-p3 1 0 0.183); /* H ≈ 24° */ --ind-green: color(display-p3 0 1 0.140); /* H ≈ 144° */ --ind-yellow: color(display-p3 1 0.963 0); /* H ≈ 100° */ --ind-blue: color(display-p3 0 0.140 1); /* H ≈ 260° — max sat, trace=ind-green */ --ind-indigo: color(display-p3 0.467 0 1); /* H ≈ 291° — UV approx */ --ind-white: color(display-p3 1 1 1); /* gamut-max white — cursor pointer orphan */ } } } /* ── color-mix() upgrade — dynamic palette-linked transparency ────────── Overrides the static rgba fallbacks above with color-mix() versions so the alpha-blended vars track palette retunes on capable displays. 18 entries cover the wheel families; the previous legacy aliases (amber/lime/emerald/teal/cyan/sky/violet/fuchsia/pink/rose) have been retired entirely — the find-replace migrated every consumer to its canonical wheel sector, so no alias-inheritance layer is needed. Bluepurple carries an extra alpha ladder (-8 / -15 / -20) because it anchors the semantic accent tokens (--accent-subtle / --glow / --border-accent) and needs a wider range of alpha siblings than the wheel default. */ @supports (color: color-mix(in srgb, red 50%, blue)) { :root { /* Accent (wheel blue-purple sector) — extra alpha ladder. */ --sys-bluepurple-500-8: color-mix(in srgb, var(--sys-bluepurple-500) 8%, transparent); --sys-bluepurple-500-15: color-mix(in srgb, var(--sys-bluepurple-500) 15%, transparent); --sys-bluepurple-500-20: color-mix(in srgb, var(--sys-bluepurple-500) 20%, transparent); /* Wheel — 18 sectors clockwise from RED at 12 o'clock */ --sys-red-500-12: color-mix(in srgb, var(--sys-red-500) 12%, transparent); --sys-orangered-500-12: color-mix(in srgb, var(--sys-orangered-500) 12%, transparent); --sys-redorange-500-12: color-mix(in srgb, var(--sys-redorange-500) 12%, transparent); --sys-orange-500-12: color-mix(in srgb, var(--sys-orange-500) 12%, transparent); --sys-yelloworange-500-12: color-mix(in srgb, var(--sys-yelloworange-500) 12%, transparent); --sys-orangeyellow-500-12: color-mix(in srgb, var(--sys-orangeyellow-500) 12%, transparent); --sys-yellow-500-12: color-mix(in srgb, var(--sys-yellow-500) 12%, transparent); --sys-greenyellow-500-12: color-mix(in srgb, var(--sys-greenyellow-500) 12%, transparent); --sys-yellowgreen-500-12: color-mix(in srgb, var(--sys-yellowgreen-500) 12%, transparent); --sys-green-500-12: color-mix(in srgb, var(--sys-green-500) 12%, transparent); --sys-bluegreen-500-12: color-mix(in srgb, var(--sys-bluegreen-500) 12%, transparent); --sys-greenblue-500-12: color-mix(in srgb, var(--sys-greenblue-500) 12%, transparent); --sys-blue-500-12: color-mix(in srgb, var(--sys-blue-500) 12%, transparent); --sys-purpleblue-500-12: color-mix(in srgb, var(--sys-purpleblue-500) 12%, transparent); --sys-bluepurple-500-12: color-mix(in srgb, var(--sys-bluepurple-500) 12%, transparent); --sys-purple-500-12: color-mix(in srgb, var(--sys-purple-500) 12%, transparent); --sys-redpurple-500-12: color-mix(in srgb, var(--sys-redpurple-500) 12%, transparent); --sys-purplered-500-12: color-mix(in srgb, var(--sys-purplered-500) 12%, transparent); } } } /* ── ui-kit.layout: src/styles/layout.css ── */ @layer ui-kit.layout { /* ── Layout composition (M3 pane model + grid + Flutter-port primitives) ── */ /* ── Layout composition (M3 pane model + grid) ──────────────────── */ .layout-container { width: calc(100% - 2 * var(--grid-margin)); max-width: calc(var(--grid-body) - 2 * var(--grid-margin)); margin-inline: auto; overflow: clip; /* both axes — avoids spec-forced overflow-y:hidden pairing */ } .layout-grid { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); column-gap: var(--grid-gutter); } .pane-row { display: flex; gap: var(--grid-gutter); container-type: inline-size; min-width: 0; } .pane-stack { display: flex; flex-direction: column; gap: var(--pane-spacer); min-width: 0; } .pane { min-width: 0; overflow: clip; } /* flex child + containment boundary */ .pane--flex { flex: 1; } /* fluid pane */ .pane--fixed { flex: none; width: calc(var(--pane-span, var(--grid-columns)) * (100% + var(--grid-gutter)) / var(--grid-columns) - var(--grid-gutter)); } /* ── Single-child layout widgets ──────────────────────────────────────── */ .layout-align { display: flex; flex: 1; } .layout-aspect-ratio { overflow: hidden; } .layout-center { display: flex; align-items: center; justify-content: center; flex: 1; } .layout-constrained { box-sizing: border-box; } .layout-expanded { /* flex set inline */ } .layout-fitted { overflow: hidden; position: relative; } .layout-fitted__inner { width: 100%; height: 100%; } .layout-fractional { box-sizing: border-box; } .layout-intrinsic-h { display: flex; flex-direction: row; align-items: stretch; } .layout-intrinsic-w { width: fit-content; } .layout-limited { box-sizing: border-box; } .layout-offstage { /* visible by default */ } .layout-offstage--hidden{ visibility: hidden; position: absolute; pointer-events: none; } .layout-overflow { overflow: visible; } .layout-padding { box-sizing: border-box; } .layout-sizedbox { box-sizing: border-box; flex-shrink: 0; } .layout-transform { /* transform set inline */ } /* ── Multi-child layout widgets ───────────────────────────────────────── */ .layout-row { display: flex; flex-direction: row; min-width: 0; } .layout-column { display: flex; flex-direction: column; min-width: 0; } .layout-stack { display: grid; position: relative; min-width: 0; } .layout-stack > * { grid-area: 1 / 1; } /* all children in same cell */ .layout-positioned { position: absolute; z-index: 1; } .layout-wrap { display: flex; flex-wrap: wrap; min-width: 0; } .layout-gridview { display: grid; min-width: 0; } .layout-listview { display: flex; min-height: 0; min-width: 0; } .layout-listview--divider > * + * { border-top: 1px solid var(--border-subtle); padding-top: var(--sp-2); } .layout-indexed-stack { display: grid; min-width: 0; } .layout-indexed-stack__child { grid-area: 1 / 1; } .layout-builder { /* ResizeObserver wrapper */ } .layout-table { display: grid; min-width: 0; } .layout-table-row { display: contents; } .layout-table-cell { padding: var(--sp-2) var(--sp-3); } .layout-table-cell--header { font-weight: var(--fw-semibold); font-size: var(--fs-label-sm); letter-spacing: var(--ls-label-sm); color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); } /* ── TableCell orthogonal modifiers ───────────────────────────── `mono` / `numeric` / `strong` / `align` compose freely. Reach for these props instead of inline `style={{ fontFamily, textAlign, fontWeight }}` chains on every cell of a typed column — the prop surface makes the `Foundations/Density § row-mate height contract` enforceable at the call site rather than at every inline style. */ .layout-table-cell--mono { font-family: var(--mono); } .layout-table-cell--numeric { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: end; } .layout-table-cell--strong { font-weight: var(--fw-semibold); } .layout-table-cell--align-start { text-align: start; } .layout-table-cell--align-end { text-align: end; } .layout-table-cell--align-center { text-align: center; } /* ── TableRow totals variant ──────────────────────────────── Semantic footer row that summarises the columns above. Paints a 1 px top stroke against the kit's canonical `--border-subtle` divider and bumps every child cell to `--fw-semibold`. Composes with the per-cell `mono` / `numeric` props — totals rows are typically a row of numeric cells where the last header cell carries the row's label ("Total"). */ .layout-table-row--totals > .layout-table-cell { border-top: 1px solid var(--border-subtle); font-weight: var(--fw-semibold); background: var(--surface-tint-1); } .layout-carousel { display: flex; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; min-width: 0; } .layout-carousel::-webkit-scrollbar { display: none; } .layout-carousel > * { flex-shrink: 0; scroll-snap-align: start; } /* ── Scroll composition widgets ──────────────────────────────────────── */ .layout-scrollview { -webkit-overflow-scrolling: touch; } .layout-sticky-header { background: var(--bg); } .layout-sticky-sentinel { height: 0; } .layout-sliver-list { overflow-y: auto; -webkit-overflow-scrolling: touch; } .layout-sliver-grid { overflow-y: auto; -webkit-overflow-scrolling: touch; } .layout-sliver-padding { box-sizing: border-box; } .layout-fill-remaining { flex: 1; min-height: 0; } } /* ── ui-kit.components: src/styles/components/m3-controls.css ── */ @layer ui-kit.components { /* ── M3 controls: container-cascade + button + icon-btn + fab + segmented + badge + tag + progress + indicator + snackbar ─ */ /* ── Container-surface neutral-fill cascade ─────────────────────────── Any element painting `--container-bg` (cards, feature tiles, disclosures, the live-packets card, etc.) re-points the neutral control fill to its `-on-surface` sibling so a button NESTED inside the container automatically reads at the correct elevation step above the container fill, in every theme. See `:root` block above for the per-theme values of `--ctl-neutral-bg-on-surface`. IMPORTANT: this 9-class roster is paired with the canonical card chrome roster under "Unified Card System" below — the chrome painter declares the bevel/radius/shadow for the same 8 base selectors (without `.m3-card--elevated`, which sits outside the canonical chrome family per its own block below). Both rosters MUST stay in sync when adding a new card-like container; reach for `.m3-card` and the canonical chrome modifiers before inventing a new alias. */ /* Phase 5f: kit owns only the `.m3-card` + `.m3-card--elevated` entries in the neutral-fill cascade. Legacy app-class aliases (`.feature-card`, `.pkt-card`, `.edge-shelf-disclosure`, `.connect-card`, `.connect-section`, `.net-rank-row`, `.nd-status-card`) opt in via the app-side roster in `frontend/src/styles/kit-aliases.css`. */ .m3-card, .m3-card--elevated { --ctl-neutral-bg: var(--ctl-neutral-bg-on-surface); --ctl-neutral-bg-hover: var(--ctl-neutral-bg-on-surface-hover); } /* ── M3 Material Components /* Button */ .m3-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--ctl-h-default); min-width: 48px; padding-inline: var(--sp-6); border: none; border-radius: var(--ctl-shape-pill); font-size: var(--ctl-fs); line-height: var(--ctl-lh); font-weight: var(--ctl-fw); letter-spacing: var(--ctl-ls); font-family: var(--font); cursor: pointer; transition: background var(--dur-short-3) var(--ease-standard), color var(--dur-short-3) var(--ease-standard), box-shadow var(--dur-short-3) var(--ease-standard), border-color var(--dur-short-3) var(--ease-standard); user-select: none; white-space: nowrap; text-decoration: none; } /* Disabled state — single source of truth for every M3 control variant. Strips the gradient bevel outline (`::after`, painted by the "Gradient bevel outline" block below for rounded controls) and repaints the fill on the canonical `--card-fill-zinc` neutral so every disabled variant collapses to ONE quiet treatment regardless of which fill the active variant carried. Opacity 0.38 reduces overall presence per M3 disabled spec. See the matching `:disabled::after { content: none; }` block under the gradient bevel rules below for the outline-toggle half of the contract. */ .m3-btn:disabled { opacity: 0.38; cursor: default; pointer-events: none; background: var(--card-fill-zinc); color: var(--text-muted); border: none; } .m3-btn__icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; } .m3-btn--has-icon { padding-inline-start: var(--sp-4); } /* Compact size — 32 dp height matching the Select / Chip / TextField / SegmentedButton compact family. Opt in via the `compact` prop on (or any future compact