/* Mise prototype kit — tokens 0.26.0 (DS 826d229). GENERATED by scripts/sync-ds-kit.mjs; do not edit. Edit kit/base.css or kit/bridges/*.css and re-run the script. */ /** * Mise brand face — Source Sans 3 (ADR-030). * GENERATED by build.mjs. Do not edit. * * Variable, 200 900 — the scale's 750 and 780 steps depend on a real axis. * font-display: swap, so text paints immediately in the fallback and reflows once. * Licence: SIL Open Font License 1.1 — see fonts/OFL.txt, which must travel with * the files. */ @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('../fonts/source-sans-3-latin-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('../fonts/source-sans-3-latin-italic.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('../fonts/source-sans-3-latin-ext-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('../fonts/source-sans-3-latin-ext-italic.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /** * Do not edit directly, this file was auto-generated. */ :root { --mise-color-palette-primary-0: #000000; --mise-color-palette-primary-4: #00110e; --mise-color-palette-primary-6: #001713; --mise-color-palette-primary-10: #00201b; --mise-color-palette-primary-12: #00251f; --mise-color-palette-primary-17: #00302a; --mise-color-palette-primary-20: #003730; --mise-color-palette-primary-22: #003c34; --mise-color-palette-primary-24: #004139; --mise-color-palette-primary-30: #005046; --mise-color-palette-primary-40: #006b5e; --mise-color-palette-primary-50: #008677; --mise-color-palette-primary-60: #00a390; --mise-color-palette-primary-70: #30bfaa; --mise-color-palette-primary-80: #56dbc6; --mise-color-palette-primary-87: #6cefd9; --mise-color-palette-primary-90: #76f8e2; --mise-color-palette-primary-92: #7cfee7; --mise-color-palette-primary-94: #a2ffed; --mise-color-palette-primary-95: #b5ffef; --mise-color-palette-primary-96: #c6fff2; --mise-color-palette-primary-98: #e5fff8; --mise-color-palette-primary-100: #ffffff; --mise-color-palette-secondary-0: #000000; --mise-color-palette-secondary-4: #00110e; --mise-color-palette-secondary-6: #001713; --mise-color-palette-secondary-10: #06201b; --mise-color-palette-secondary-12: #0a241f; --mise-color-palette-secondary-17: #162e2a; --mise-color-palette-secondary-20: #1c3530; --mise-color-palette-secondary-22: #213934; --mise-color-palette-secondary-24: #253e39; --mise-color-palette-secondary-30: #334b46; --mise-color-palette-secondary-40: #4a635e; --mise-color-palette-secondary-50: #637c76; --mise-color-palette-secondary-60: #7c9690; --mise-color-palette-secondary-70: #96b1aa; --mise-color-palette-secondary-80: #b1ccc5; --mise-color-palette-secondary-87: #c4e0d9; --mise-color-palette-secondary-90: #cde8e1; --mise-color-palette-secondary-92: #d2eee7; --mise-color-palette-secondary-94: #d8f4ec; --mise-color-palette-secondary-95: #dbf7ef; --mise-color-palette-secondary-96: #defaf2; --mise-color-palette-secondary-98: #e5fff8; --mise-color-palette-secondary-100: #ffffff; --mise-color-palette-tertiary-0: #000000; --mise-color-palette-tertiary-4: #140d00; --mise-color-palette-tertiary-6: #1a1200; --mise-color-palette-tertiary-10: #241a00; --mise-color-palette-tertiary-12: #291e00; --mise-color-palette-tertiary-17: #362800; --mise-color-palette-tertiary-20: #3d2e00; --mise-color-palette-tertiary-22: #433300; --mise-color-palette-tertiary-24: #483700; --mise-color-palette-tertiary-30: #584400; --mise-color-palette-tertiary-40: #755b00; --mise-color-palette-tertiary-50: #937300; --mise-color-palette-tertiary-60: #b28c00; --mise-color-palette-tertiary-70: #d2a501; --mise-color-palette-tertiary-80: #f0c12c; --mise-color-palette-tertiary-87: #ffd564; --mise-color-palette-tertiary-90: #ffdf90; --mise-color-palette-tertiary-92: #ffe6aa; --mise-color-palette-tertiary-94: #ffecc3; --mise-color-palette-tertiary-95: #ffefcf; --mise-color-palette-tertiary-96: #fff2da; --mise-color-palette-tertiary-98: #fff8f1; --mise-color-palette-tertiary-100: #ffffff; --mise-color-palette-neutral-0: #000000; --mise-color-palette-neutral-4: #0b0f0e; --mise-color-palette-neutral-6: #101413; --mise-color-palette-neutral-10: #191c1b; --mise-color-palette-neutral-12: #1d201f; --mise-color-palette-neutral-17: #272b2a; --mise-color-palette-neutral-20: #2d3130; --mise-color-palette-neutral-22: #323534; --mise-color-palette-neutral-24: #363a39; --mise-color-palette-neutral-30: #444746; --mise-color-palette-neutral-40: #5c5f5e; --mise-color-palette-neutral-50: #747876; --mise-color-palette-neutral-60: #8e9190; --mise-color-palette-neutral-70: #a9acaa; --mise-color-palette-neutral-80: #c4c7c5; --mise-color-palette-neutral-87: #d8dbd8; --mise-color-palette-neutral-90: #e0e3e1; --mise-color-palette-neutral-92: #e6e9e7; --mise-color-palette-neutral-94: #eceeec; --mise-color-palette-neutral-95: #eff1ef; --mise-color-palette-neutral-96: #f2f4f2; --mise-color-palette-neutral-98: #f7faf8; --mise-color-palette-neutral-100: #ffffff; --mise-color-palette-neutral-variant-0: #000000; --mise-color-palette-neutral-variant-4: #07100e; --mise-color-palette-neutral-variant-6: #0c1513; --mise-color-palette-neutral-variant-10: #141d1b; --mise-color-palette-neutral-variant-12: #18211f; --mise-color-palette-neutral-variant-17: #222c2a; --mise-color-palette-neutral-variant-20: #293230; --mise-color-palette-neutral-variant-22: #2d3734; --mise-color-palette-neutral-variant-24: #323b39; --mise-color-palette-neutral-variant-30: #3f4946; --mise-color-palette-neutral-variant-40: #56605e; --mise-color-palette-neutral-variant-50: #6f7976; --mise-color-palette-neutral-variant-60: #899390; --mise-color-palette-neutral-variant-70: #a3adaa; --mise-color-palette-neutral-variant-80: #bec9c5; --mise-color-palette-neutral-variant-87: #d2dcd9; --mise-color-palette-neutral-variant-90: #dae5e1; --mise-color-palette-neutral-variant-92: #e0eae7; --mise-color-palette-neutral-variant-94: #e6f0ec; --mise-color-palette-neutral-variant-95: #e9f3ef; --mise-color-palette-neutral-variant-96: #ecf6f2; --mise-color-palette-neutral-variant-98: #f1fcf8; --mise-color-palette-neutral-variant-100: #ffffff; --mise-color-palette-error-0: #000000; --mise-color-palette-error-4: #280001; --mise-color-palette-error-6: #310001; --mise-color-palette-error-10: #410002; --mise-color-palette-error-12: #490002; --mise-color-palette-error-17: #5c0004; --mise-color-palette-error-20: #690005; --mise-color-palette-error-22: #710005; --mise-color-palette-error-24: #790006; --mise-color-palette-error-30: #93000a; --mise-color-palette-error-40: #ba1a1a; --mise-color-palette-error-50: #de3730; --mise-color-palette-error-60: #ff5449; --mise-color-palette-error-70: #ff897d; --mise-color-palette-error-80: #ffb4ab; --mise-color-palette-error-87: #ffcfc9; --mise-color-palette-error-90: #ffdad6; --mise-color-palette-error-92: #ffe2de; --mise-color-palette-error-94: #ffe9e6; --mise-color-palette-error-95: #ffedea; --mise-color-palette-error-96: #fff0ee; --mise-color-palette-error-98: #fff8f7; --mise-color-palette-error-100: #ffffff; --mise-color-status-good: #0b8a0b; --mise-color-status-good-container: #d9f2d9; --mise-color-status-on-good-container: #0a3d0a; --mise-color-status-warning: #9a6b00; --mise-color-status-warning-container: #ffefc4; --mise-color-status-on-warning-container: #3d2b00; --mise-color-status-serious: #b4501e; --mise-color-status-serious-container: #ffe2d3; --mise-color-status-on-serious-container: #431c05; --mise-color-status-critical: #c02f2f; --mise-color-status-critical-container: #fadada; --mise-color-status-on-critical-container: #4d0f0f; --mise-color-status-info: #0a6aa8; /** ADR-015 extension (WEB.v3 #9601): a NON-severity tone — in progress / waiting on someone else, nothing wrong. Azure, deliberately lighter and greener than InvoiceIQ's Persian Blue (#1C39BB) so it never reads as the module; always icon + word. */ --mise-color-status-info-container: #d8ecfa; --mise-color-status-on-info-container: #062f4a; --mise-color-module-invoice: #3851d0; --mise-color-module-invoice-container: #dee0ff; --mise-color-module-on-invoice-container: #00105b; --mise-color-module-supplier: #934b00; --mise-color-module-supplier-container: #ffdcc5; --mise-color-module-on-supplier-container: #301400; --mise-color-module-esign: #b70071; --mise-color-module-esign-container: #ffd9e5; --mise-color-module-on-esign-container: #3d0023; --mise-color-module-support: #664daf; --mise-color-module-support-container: #e8ddff; --mise-color-module-on-support-container: #20005e; --mise-color-module-bazarito: #8e3fd4; /** Bazaro AI (Bazarito). Amethyst violet - the vivid high-chroma violet reads as intelligence and stays distinct from Support's muted Persian Indigo. */ --mise-color-module-bazarito-container: #f3daff; --mise-color-module-on-bazarito-container: #2e0055; --mise-dimension-space-1: 4px; --mise-dimension-space-2: 8px; --mise-dimension-space-3: 12px; --mise-dimension-space-4: 16px; --mise-dimension-space-5: 20px; --mise-dimension-space-6: 24px; --mise-dimension-space-8: 32px; --mise-dimension-space-10: 40px; --mise-dimension-space-14: 56px; --mise-dimension-radius-xs: 2px; /** Soft-square scale (ADR-031). Was 8px under M3 Expressive. */ --mise-dimension-radius-sm: 4px; /** Fields, bar chips, toasts. Was 12px. */ --mise-dimension-radius-md: 4px; /** Was 16px. */ --mise-dimension-radius-lg: 6px; /** Cards, menus, dialogs. Was 24px. */ --mise-dimension-radius-xl: 8px; /** KPI tiles. Was 28px. */ --mise-dimension-radius-pill: 4px; /** Controls that were pills: buttons, chips, tags, badges, icon buttons, avatars. Soft-square since ADR-031. */ --mise-dimension-radius-circle: 999px; /** Things that must stay round in every shape: radio, switch track/thumb, slider, spinner, status dots. */ --mise-dimension-radius-full: 999px; --mise-dimension-target-pointer-min: 32px; /** Minimum interactive size for fine pointers (mouse). */ --mise-dimension-target-touch-min: 44px; /** Minimum interactive size for coarse pointers (WCAG 2.5.8 + M3). */ --mise-dimension-breakpoint-compact-max: 599px; /** Phone: 1-column grids. */ --mise-dimension-breakpoint-medium-max: 959px; /** Tablet: 2-column grids. */ --mise-dimension-breakpoint-expanded-max: 1439px; /** Laptop: 3-column grids (reference layout). */ --mise-dimension-breakpoint-content-max: 1680px; /** Large screens: content max-width cap; whitespace grows, cards do not stretch. */ --mise-elevation-level0: none; --mise-elevation-level1: 0 1px 2px 0 rgba(0,0,0,0.30), 0 1px 3px 1px rgba(0,0,0,0.15); --mise-elevation-level2: 0 1px 2px 0 rgba(0,0,0,0.30), 0 2px 6px 2px rgba(0,0,0,0.15); --mise-elevation-level3: 0 1px 3px 0 rgba(0,0,0,0.30), 0 4px 8px 3px rgba(0,0,0,0.15); --mise-elevation-level4: 0 2px 3px 0 rgba(0,0,0,0.30), 0 6px 10px 4px rgba(0,0,0,0.15); --mise-elevation-level5: 0 4px 4px 0 rgba(0,0,0,0.30), 0 8px 12px 6px rgba(0,0,0,0.15); --mise-state-hover: 0.08; --mise-state-focus: 0.10; --mise-state-pressed: 0.12; --mise-state-dragged: 0.16; --mise-state-disabled-content: 0.38; /** ADR-034: every disabled control's CONTENT (label, glyph, value). M3's 38%. */ --mise-state-disabled-container: 0.12; /** ADR-034: a disabled FIELD's border and fill. The box keeps its shape; only the content takes 0.38. */ --mise-motion-duration-short: 120ms; --mise-motion-duration-medium: 240ms; --mise-motion-duration-long: 420ms; --mise-motion-duration-extra-long: 800ms; /** RFC-027: one structural change that is meant to be followed, e.g. a bar chip stretching to its new width. */ --mise-motion-duration-sequence: 1200ms; /** RFC-027: a multi-step choreography run as one animation, e.g. the group chip splitting out of the company chip. Ceiling; never for a single property change. */ --mise-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --mise-motion-easing-spring: cubic-bezier(0.34, 1.4, 0.5, 1); --mise-font-family-display: 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --mise-font-family-text: 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --mise-font-family-mono: 'Cascadia Mono', 'Cascadia Code', Consolas, 'SF Mono', 'Roboto Mono', ui-monospace, monospace; --mise-font-weight-regular: 400; --mise-font-weight-medium: 600; --mise-font-weight-bold: 700; --mise-font-weight-black: 800; --mise-font-scale-display-size: 2.75rem; --mise-font-scale-display-line: 3.25rem; --mise-font-scale-display-weight: 800; --mise-font-scale-display-tracking: -0.03em; --mise-font-scale-headline-size: 1.75rem; --mise-font-scale-headline-line: 2.25rem; --mise-font-scale-headline-tracking: -0.02em; --mise-font-scale-title-size: 1.125rem; --mise-font-scale-title-line: 1.5rem; --mise-font-scale-title-weight: 700; --mise-font-scale-title-tracking: -0.01em; --mise-font-scale-body-size: 0.9375rem; --mise-font-scale-body-line: 1.4rem; --mise-font-scale-body-weight: 400; --mise-font-scale-body-tracking: 0em; --mise-font-scale-body-sm-size: 0.8125rem; --mise-font-scale-body-sm-line: 1.125rem; --mise-font-scale-body-sm-weight: 400; --mise-font-scale-body-sm-tracking: 0em; --mise-font-scale-label-size: 0.75rem; --mise-font-scale-label-line: 1rem; --mise-font-scale-label-weight: 700; --mise-font-scale-label-tracking: 0.1em; --mise-font-scale-label-sm-size: 0.6875rem; --mise-font-scale-label-sm-line: 0.875rem; --mise-font-scale-label-sm-weight: 700; --mise-font-scale-label-sm-tracking: 0.06em; --mise-font-scale-data-size: 2rem; --mise-font-scale-data-line: 2.25rem; --mise-font-scale-data-tracking: -0.025em; --mise-font-numeric-data: tabular-nums; /** Any number that sits in a column: table cells, KPI values, money, counts. */ --mise-font-numeric-identifier: tabular-nums slashed-zero; /** Tabular + SLASHED ZERO. Invoice numbers, article numbers, org numbers — anything a person reads back, dictates or types in. */ --mise-chart-categorical-1: #2a78d6; /** Persian Blue */ --mise-chart-categorical-2: #1baf7a; /** Persian Green */ --mise-chart-categorical-3: #eda100; /** Saffron */ --mise-chart-categorical-4: #008300; /** Leaf green */ --mise-chart-categorical-5: #4a3aa7; /** Persian Indigo */ --mise-chart-categorical-6: #e34948; /** Persian Red */ --mise-chart-categorical-7: #e87ba4; /** Persian Rose */ --mise-chart-categorical-8: #eb6834; /** Persian Orange */ --mise-chart-categorical-9: #b5179e; /** Magenta */ --mise-chart-categorical-10: #8e3fd4; /** Amethyst (Bazarito) */ --mise-chart-categorical-11: #0f9aa6; /** Persian Turquoise */ --mise-chart-categorical-12: #a0651f; /** Persian Earth */ --mise-chart-sequential-1: #cde2fb; --mise-chart-sequential-2: #9ec5f4; --mise-chart-sequential-3: #6da7ec; --mise-chart-sequential-4: #3987e5; --mise-chart-sequential-5: #256abf; --mise-chart-sequential-6: #184f95; --mise-chart-sequential-7: #0d366b; --mise-chart-sequential-green-1: #d7f3ea; --mise-chart-sequential-green-2: #a5e5d1; --mise-chart-sequential-green-3: #6fd2b7; --mise-chart-sequential-green-4: #2eb595; --mise-chart-sequential-green-5: #0d9077; --mise-chart-sequential-green-6: #0a6b58; --mise-chart-sequential-green-7: #06463a; --mise-chart-diverging-1: #0a5647; --mise-chart-diverging-2: #2f8c7b; --mise-chart-diverging-3: #8ac3b7; --mise-chart-diverging-4: #eceeec; /** Neutral midpoint (zero). */ --mise-chart-diverging-5: #edc47a; --mise-chart-diverging-6: #c68a28; --mise-chart-diverging-7: #7a4f00; --mise-chart-grid: #e3e8e0; --mise-chart-axis: #b9c3ba; --mise-chart-delta-up: #0a6e0a; /** Positive-for-the-business direction. Pair with an arrow glyph, never color alone. */ --mise-chart-delta-down: #b23030; --mise-field-density-comfortable-control-height: 40px; --mise-field-density-compact-control-height: 34px; --mise-focus-ring-width: 2px; --mise-focus-ring-offset: 2px; --mise-focus-ring-offset-inset: -2px; --mise-print-page-margin-top: 16mm; /** Holds the two-line running report header. */ --mise-print-page-margin-inline: 10mm; /** Most office printers cannot print the outer 4–5 mm; 10 mm is the safe minimum. */ --mise-print-page-margin-bottom: 11mm; /** Holds the one-line footer with page X of Y. */ --mise-print-page-header-gap: 2.5mm; /** Space between the running header's rule and the body. */ --mise-print-font-text: 9pt; --mise-print-font-table: 8.5pt; --mise-print-font-small: 7.5pt; /** Header meta, footer, table headers, status tags. */ --mise-print-font-title: 11pt; --mise-print-line-height-text: 1.25; --mise-print-line-height-table: 1.15; --mise-print-cell-pad-block: 1.2pt; --mise-print-cell-pad-inline: 3pt; --mise-print-rule-hairline: 0.25pt; /** Between body rows. */ --mise-print-rule-thin: 0.5pt; /** Group and subtotal rules, status outlines. */ --mise-print-rule-strong: 0.75pt; /** Under the column header; above a grand total. */ --mise-print-rule-header: 1pt; /** Under the running report header. */ --mise-print-rule-total: 2.25pt; /** Double rule under a grand total. At least 2.25pt (3 CSS px) or browsers draw a double border as one solid line. */ --mise-shell-nav-size: 16.5rem; /** Expanded nav-rail column width. */ --mise-shell-nav-size-collapsed: 4.5rem; /** Collapsed (icon-rail) column width — also the width the responsive breakpoint pins to. */ --mise-widget-icon-chip-size: 40px; --mise-widget-activity-node-size: 34px; /** Icon-chip node diameter on the timeline (smaller than the widget header chip). */ --mise-widget-activity-spine-width: 2px; /** The connector threaded between timeline nodes (outline-variant). */ --mise-widget-density-comfortable-row-pad-block: 9px; --mise-widget-density-comfortable-row-font-size: 0.84375rem; --mise-widget-density-comfortable-title-font-size: 0.96875rem; --mise-widget-density-comfortable-list-items: 5; --mise-widget-density-compact-row-pad-block: 4px; --mise-widget-density-compact-row-font-size: 0.78125rem; --mise-widget-density-compact-title-font-size: 0.875rem; --mise-widget-density-compact-list-items: 7; --mise-widget-density-cozy-row-pad-block: 14px; --mise-widget-density-cozy-row-font-size: 0.96875rem; --mise-widget-density-cozy-title-font-size: 1.09375rem; --mise-widget-density-cozy-list-items: 3; --mise-color-primary: var(--mise-color-palette-primary-40); --mise-color-on-primary: var(--mise-color-palette-primary-100); --mise-color-primary-container: var(--mise-color-palette-primary-90); --mise-color-on-primary-container: var(--mise-color-palette-primary-10); --mise-color-secondary: var(--mise-color-palette-secondary-40); --mise-color-on-secondary: var(--mise-color-palette-secondary-100); --mise-color-secondary-container: var(--mise-color-palette-secondary-90); --mise-color-on-secondary-container: var(--mise-color-palette-secondary-10); --mise-color-tertiary: var(--mise-color-palette-tertiary-40); --mise-color-on-tertiary: var(--mise-color-palette-tertiary-100); --mise-color-tertiary-container: var(--mise-color-palette-tertiary-90); --mise-color-on-tertiary-container: var(--mise-color-palette-tertiary-10); --mise-color-error: var(--mise-color-palette-error-40); --mise-color-error-strong: var(--mise-color-palette-error-30); /** AB 10116: error ink for an interacting danger control (hover / focus / pressed). Light steps one tone deeper so the state layer keeps AA on every surface; dark matches error. */ --mise-color-on-error: var(--mise-color-palette-error-100); --mise-color-error-container: var(--mise-color-palette-error-90); --mise-color-on-error-container: var(--mise-color-palette-error-10); --mise-color-surface: var(--mise-color-palette-neutral-98); --mise-color-on-surface: var(--mise-color-palette-neutral-10); --mise-color-surface-dim: var(--mise-color-palette-neutral-87); --mise-color-surface-bright: var(--mise-color-palette-neutral-98); --mise-color-surface-container-lowest: var(--mise-color-palette-neutral-100); --mise-color-surface-container-low: var(--mise-color-palette-neutral-96); --mise-color-surface-container: var(--mise-color-palette-neutral-94); --mise-color-surface-container-high: var(--mise-color-palette-neutral-92); --mise-color-surface-container-highest: var(--mise-color-palette-neutral-90); --mise-color-surface-variant: var(--mise-color-palette-neutral-variant-90); --mise-color-on-surface-variant: var(--mise-color-palette-neutral-variant-30); --mise-color-on-surface-placeholder: var(--mise-color-palette-neutral-variant-40); /** Placeholder ink. Deliberately lighter than on-surface-variant so a placeholder does not read as a filled value, while still clearing 4.5:1 on the field surface. */ --mise-color-outline: var(--mise-color-palette-neutral-variant-50); --mise-color-outline-variant: var(--mise-color-palette-neutral-variant-80); --mise-color-inverse-surface: var(--mise-color-palette-neutral-20); --mise-color-inverse-on-surface: var(--mise-color-palette-neutral-95); --mise-color-inverse-primary: var(--mise-color-palette-primary-80); --mise-color-scrim: var(--mise-color-palette-neutral-0); --mise-elevation-menu: var(--mise-elevation-level2); /** The shadow under every overlay list (ADR-034). Light: level2. Dark adds a 1px outline-variant ring, because a shadow barely shows on a dark page (Sam 2026-10-17). */ --mise-font-weight-semibold: var(--mise-font-weight-medium); /** DEPRECATED (RFC-022, 0.23.1): folded into medium (600). Kept as an alias for four minor releases; check:tokens rejects it in the library. */ --mise-font-weight-heavy: var(--mise-font-weight-black); /** DEPRECATED (RFC-022, 0.23.1): folded into black (800). Kept as an alias for four minor releases; check:tokens rejects it in the library. */ --mise-font-scale-headline-weight: var(--mise-font-weight-black); --mise-font-scale-data-weight: var(--mise-font-weight-black); --mise-field-radius: var(--mise-dimension-radius-sm); --mise-field-gap: var(--mise-dimension-space-1); /** Label -> control -> help vertical rhythm. */ --mise-field-pad-inline: var(--mise-dimension-space-3); --mise-field-density-comfortable-font-size: var(--mise-font-scale-body-sm-size); --mise-field-density-compact-font-size: var(--mise-font-scale-body-sm-size); --mise-field-density-cozy-control-height: var(--mise-dimension-target-touch-min); --mise-field-density-cozy-font-size: var(--mise-font-scale-body-size); --mise-menu-radius: var(--mise-dimension-radius-sm); --mise-print-color-ink: var(--mise-color-palette-neutral-0); /** Primary text and strong rules. */ --mise-print-color-ink-2: var(--mise-color-palette-neutral-20); /** Secondary text: meta, headers. */ --mise-print-color-ink-3: var(--mise-color-palette-neutral-40); /** Tertiary text: footer, muted cells. */ --mise-print-color-rule: var(--mise-color-palette-neutral-60); --mise-print-color-rule-soft: var(--mise-color-palette-neutral-80); --mise-print-color-paper: var(--mise-color-palette-neutral-100); --mise-widget-radius: var(--mise-dimension-radius-lg); --mise-widget-kpi-radius: var(--mise-dimension-radius-xl); --mise-widget-hover-radius: var(--mise-dimension-radius-md); /** M3 Expressive shape-morph target on hover. */ --mise-widget-pad: var(--mise-dimension-space-5); --mise-widget-density-comfortable-target-min: var(--mise-dimension-target-pointer-min); --mise-widget-density-compact-target-min: var(--mise-dimension-target-pointer-min); --mise-widget-density-cozy-target-min: var(--mise-dimension-target-touch-min); --mise-color-menu-surface: var(--mise-color-surface-container-low); /** ADR-034 / Sam 2026-10-17: the surface every overlay list (menu, listbox, picker, popover) sits on. Light keeps surface-container-low; dark steps to surface-container-highest, because in dark mode surface-container-low is the page itself and a menu on the page measured 1.00:1. */ --mise-color-status-neutral: var(--mise-color-outline); /** ADR-015 extension (WEB.v3 #9601): a NON-severity tone — no action needed, nothing wrong (a draft, an unknown code). Not a fifth severity. */ --mise-color-status-neutral-container: var(--mise-color-surface-variant); --mise-color-status-on-neutral-container: var(--mise-color-on-surface-variant); --mise-color-module-kitchen: var(--mise-color-primary); --mise-color-module-kitchen-container: var(--mise-color-primary-container); --mise-color-module-on-kitchen-container: var(--mise-color-on-primary-container); --mise-color-module-accent-warm: var(--mise-color-tertiary); /** Saffron is the tertiary in Persia; the warm accent aliases it. */ --mise-color-module-accent-warm-container: var(--mise-color-tertiary-container); --mise-color-module-on-accent-warm-container: var(--mise-color-on-tertiary-container); --mise-focus-ring-color: var(--mise-color-primary); --mise-menu-elevation: var(--mise-elevation-menu); --mise-menu-surface: var(--mise-color-menu-surface); } /** * Do not edit directly, this file was auto-generated. */ @media screen { :root[data-theme="dark"] { --mise-color-status-good: #5fcb5f; --mise-color-status-good-container: #123d12; --mise-color-status-on-good-container: #c2ecc2; --mise-color-status-warning: #eec04d; --mise-color-status-warning-container: #453105; --mise-color-status-on-warning-container: #ffe9ad; --mise-color-status-serious: #f0966b; --mise-color-status-serious-container: #4d2410; --mise-color-status-on-serious-container: #ffd7c2; --mise-color-status-critical: #ef7070; --mise-color-status-critical-container: #4d1414; --mise-color-status-on-critical-container: #ffc9c9; --mise-color-status-info: #6cb8ec; /** ADR-015 extension (WEB.v3 #9601): a NON-severity tone — in progress / waiting on someone else, nothing wrong. Azure, deliberately lighter and greener than InvoiceIQ's Persian Blue (#1C39BB) so it never reads as the module; always icon + word. */ --mise-color-status-info-container: #0c3550; --mise-color-status-on-info-container: #cfe8fa; --mise-color-module-invoice: #bac3ff; --mise-color-module-invoice-container: #1735b8; --mise-color-module-on-invoice-container: #dee0ff; --mise-color-module-supplier: #ffb782; --mise-color-module-supplier-container: #703800; --mise-color-module-on-supplier-container: #ffdcc5; --mise-color-module-esign: #ffb0cf; --mise-color-module-esign-container: #8c0056; --mise-color-module-on-esign-container: #ffd9e5; --mise-color-module-support: #cebdff; --mise-color-module-support-container: #4d3496; --mise-color-module-on-support-container: #e8ddff; --mise-color-module-bazarito: #e2b4ff; --mise-color-module-bazarito-container: #5b2b8f; --mise-color-module-on-bazarito-container: #f3daff; --mise-elevation-level1: 0 1px 3px rgba(0,0,0,0.40); --mise-elevation-level2: 0 2px 8px rgba(0,0,0,0.45); --mise-elevation-level3: 0 4px 12px rgba(0,0,0,0.50); --mise-elevation-level4: 0 6px 16px rgba(0,0,0,0.55); --mise-elevation-level5: 0 8px 20px rgba(0,0,0,0.60); --mise-elevation-menu: 0 0 0 1px var(--mise-color-outline-variant), 0 2px 8px rgba(0,0,0,0.45); /** The shadow under every overlay list (ADR-034). Light: level2. Dark adds a 1px outline-variant ring, because a shadow barely shows on a dark page (Sam 2026-10-17). */ --mise-chart-categorical-1: #3987e5; /** Persian Blue */ --mise-chart-categorical-2: #199e70; /** Persian Green */ --mise-chart-categorical-3: #c98500; /** Saffron */ --mise-chart-categorical-4: #008300; /** Leaf green */ --mise-chart-categorical-5: #9085e9; /** Persian Indigo */ --mise-chart-categorical-6: #e66767; /** Persian Red */ --mise-chart-categorical-7: #d55181; /** Persian Rose */ --mise-chart-categorical-8: #d95926; /** Persian Orange */ --mise-chart-categorical-9: #d651b8; /** Magenta */ --mise-chart-categorical-10: #a35fe0; /** Amethyst (Bazarito) */ --mise-chart-categorical-11: #18a4b2; /** Persian Turquoise */ --mise-chart-categorical-12: #c07d4a; /** Persian Earth */ --mise-chart-sequential-1: #10305a; --mise-chart-sequential-2: #143f77; --mise-chart-sequential-3: #1c5296; --mise-chart-sequential-4: #2a6cbf; --mise-chart-sequential-5: #3f85d9; --mise-chart-sequential-6: #6da7ec; --mise-chart-sequential-7: #9ec5f4; --mise-chart-sequential-green-1: #08312a; --mise-chart-sequential-green-2: #0b4a3e; --mise-chart-sequential-green-3: #0f6553; --mise-chart-sequential-green-4: #17876f; --mise-chart-sequential-green-5: #2ba98e; --mise-chart-sequential-green-6: #5fc9b0; --mise-chart-sequential-green-7: #9fe5d3; --mise-chart-diverging-1: #5fc9b0; --mise-chart-diverging-2: #2ba98e; --mise-chart-diverging-3: #1a7060; --mise-chart-diverging-4: #30352f; /** Neutral midpoint (zero). */ --mise-chart-diverging-5: #8a6a26; --mise-chart-diverging-6: #c99a3e; --mise-chart-diverging-7: #f0cf7e; --mise-chart-grid: #232b24; --mise-chart-axis: #39423a; --mise-chart-delta-up: #5fcb5f; --mise-chart-delta-down: #ef7070; --mise-color-primary: var(--mise-color-palette-primary-80); --mise-color-on-primary: var(--mise-color-palette-primary-20); --mise-color-primary-container: var(--mise-color-palette-primary-30); --mise-color-on-primary-container: var(--mise-color-palette-primary-90); --mise-color-secondary: var(--mise-color-palette-secondary-80); --mise-color-on-secondary: var(--mise-color-palette-secondary-20); --mise-color-secondary-container: var(--mise-color-palette-secondary-30); --mise-color-on-secondary-container: var(--mise-color-palette-secondary-90); --mise-color-tertiary: var(--mise-color-palette-tertiary-80); --mise-color-on-tertiary: var(--mise-color-palette-tertiary-20); --mise-color-tertiary-container: var(--mise-color-palette-tertiary-30); --mise-color-on-tertiary-container: var(--mise-color-palette-tertiary-90); --mise-color-error: var(--mise-color-palette-error-80); --mise-color-error-strong: var(--mise-color-palette-error-80); /** AB 10116: error ink for an interacting danger control (hover / focus / pressed). Light steps one tone deeper so the state layer keeps AA on every surface; dark matches error. */ --mise-color-on-error: var(--mise-color-palette-error-20); --mise-color-error-container: var(--mise-color-palette-error-30); --mise-color-on-error-container: var(--mise-color-palette-error-90); --mise-color-surface: var(--mise-color-palette-neutral-6); --mise-color-on-surface: var(--mise-color-palette-neutral-90); --mise-color-surface-dim: var(--mise-color-palette-neutral-6); --mise-color-surface-bright: var(--mise-color-palette-neutral-24); --mise-color-surface-container-lowest: var(--mise-color-palette-neutral-4); --mise-color-surface-container-low: var(--mise-color-palette-neutral-10); --mise-color-surface-container: var(--mise-color-palette-neutral-12); --mise-color-surface-container-high: var(--mise-color-palette-neutral-17); --mise-color-surface-container-highest: var(--mise-color-palette-neutral-22); --mise-color-surface-variant: var(--mise-color-palette-neutral-variant-30); --mise-color-on-surface-variant: var(--mise-color-palette-neutral-variant-80); --mise-color-on-surface-placeholder: var(--mise-color-palette-neutral-variant-60); /** Placeholder ink. Deliberately lighter than on-surface-variant so a placeholder does not read as a filled value, while still clearing 4.5:1 on the field surface. */ --mise-color-outline: var(--mise-color-palette-neutral-variant-60); --mise-color-outline-variant: var(--mise-color-palette-neutral-variant-30); --mise-color-inverse-surface: var(--mise-color-palette-neutral-90); --mise-color-inverse-on-surface: var(--mise-color-palette-neutral-20); --mise-color-inverse-primary: var(--mise-color-palette-primary-40); --mise-color-scrim: var(--mise-color-palette-neutral-0); --mise-color-menu-surface: var(--mise-color-surface-container-highest); /** ADR-034 / Sam 2026-10-17: the surface every overlay list (menu, listbox, picker, popover) sits on. Light keeps surface-container-low; dark steps to surface-container-highest, because in dark mode surface-container-low is the page itself and a menu on the page measured 1.00:1. */ --mise-color-status-neutral: var(--mise-color-outline); /** ADR-015 extension (WEB.v3 #9601): a NON-severity tone — no action needed, nothing wrong (a draft, an unknown code). Not a fifth severity. */ --mise-color-status-neutral-container: var(--mise-color-surface-variant); --mise-color-status-on-neutral-container: var(--mise-color-on-surface-variant); --mise-color-module-kitchen: var(--mise-color-primary); --mise-color-module-kitchen-container: var(--mise-color-primary-container); --mise-color-module-on-kitchen-container: var(--mise-color-on-primary-container); --mise-color-module-accent-warm: var(--mise-color-tertiary); --mise-color-module-accent-warm-container: var(--mise-color-tertiary-container); --mise-color-module-on-accent-warm-container: var(--mise-color-on-tertiary-container); } } /* ── kit base: what every prototype gets, whatever it was written with ── body:not(#_) and :root:not(#_) outrank a prototype's own body and :root rules, so the kit wins without !important on every line. */ :root:not(#_) { color-scheme: light; } :root[data-theme="dark"]:not(#_) { color-scheme: dark; } body:not(#_) { font-family: var(--mise-font-family-text); color: var(--mise-color-on-surface); background: var(--mise-color-surface-container-low); } :where(h1, h2, h3, h4) { font-family: var(--mise-font-family-display); } :where(code, kbd, pre, samp) { font-family: var(--mise-font-family-mono); } :where(a) { color: var(--mise-color-primary); } :where(button, input, select, textarea) { font-family: inherit; } :where(:focus-visible) { outline: var(--mise-focus-ring-width) solid var(--mise-focus-ring-color, var(--mise-color-primary)); outline-offset: var(--mise-focus-ring-offset); } :where(table) { font-variant-numeric: tabular-nums; } /* ── bridge: ledger.css ── */ /* The analysis-page vocabulary (inventory position, stock counting): --page, --surface-1, --text-primary, --status-* … onto tokens. Opt in with . */ :root[data-kit~="ledger"]:not(#_) { --page: var(--mise-color-surface-container-low); --surface-1: var(--mise-color-surface); --surface-2: var(--mise-color-surface-container-high); --neutral-mid: var(--mise-color-surface-container-highest); --text-primary: var(--mise-color-on-surface); --text-secondary: var(--mise-color-on-surface-variant); --text-muted: var(--mise-color-on-surface-placeholder); --grid: var(--mise-color-outline-variant); --baseline: var(--mise-color-outline); --border: var(--mise-color-outline-variant); --accent: var(--mise-color-primary); --surplus: var(--mise-color-status-info); --shortage: var(--mise-color-status-critical); --status-good: var(--mise-color-status-good); --status-serious: var(--mise-color-status-serious); --status-critical: var(--mise-color-status-critical); --good-text: var(--mise-color-status-good); --warn-bg: var(--mise-color-status-warning-container); --warn-border: var(--mise-color-status-warning); --warn-text: var(--mise-color-status-on-warning-container); --chart-actual: var(--mise-chart-categorical-1); --chart-theoretical: var(--mise-chart-categorical-2); --chart-purchase: var(--mise-chart-categorical-3); --chart-waste: var(--mise-chart-categorical-4); --chart-transfer: var(--mise-chart-categorical-5); --chart-count-start: var(--mise-chart-categorical-6); --chart-count-end: var(--mise-chart-categorical-7); --chart-gap-label: var(--mise-color-status-warning); --cadence-daily: var(--mise-chart-categorical-8); --cadence-weekly: var(--mise-chart-categorical-9); --cadence-monthly: var(--mise-chart-categorical-10); --radius-card: var(--mise-dimension-radius-lg); --radius-chip: var(--mise-dimension-radius-pill); } /* ── bridge: mise-legacy.css ── */ /* Prototypes written against the July mockup stylesheet (docs/mockups/shared/mise.css: --primary, --ink-2, --r-full …): every variable onto today's tokens, and the ADR-031/034 corrections for its component classes. Opt in with . */ /* ═══ v3 / Mise 0.49 bridge (2026-10-09) ═══ The mockup's component classes came from the July mockup stylesheet. These rules point its variables at today's tokens and correct what ADR-031 (soft square) and ADR-034 (states) changed. :root:not(#_) outranks the old stylesheet's light/dark/prefers rules. */ :root[data-kit~="mise-legacy"]:not(#_) { --primary: var(--mise-color-primary); --on-primary: var(--mise-color-on-primary); --primary-c: var(--mise-color-primary-container); --on-primary-c: var(--mise-color-on-primary-container); --secondary: var(--mise-color-secondary); --secondary-c: var(--mise-color-secondary-container); --on-secondary-c: var(--mise-color-on-secondary-container); --tertiary-c: var(--mise-color-tertiary-container, var(--mise-color-secondary-container)); --on-tertiary-c: var(--mise-color-on-tertiary-container, var(--mise-color-on-secondary-container)); --surface: var(--mise-color-surface); --page: var(--mise-color-surface-container-low); --card: var(--mise-color-surface); --card-high: var(--mise-color-surface-container-high); --card-highest: var(--mise-color-surface-container-highest); --sc-lowest: var(--mise-color-surface-container-lowest); --sc-low: var(--mise-color-surface-container-low); --sc: var(--mise-color-surface-container); --sc-high: var(--mise-color-surface-container-high); --sc-highest: var(--mise-color-surface-container-highest); --ink: var(--mise-color-on-surface); --ink-2: var(--mise-color-on-surface-variant); --ink-3: var(--mise-color-on-surface-placeholder, var(--mise-color-on-surface-variant)); --outline: var(--mise-color-outline); --outline-variant: var(--mise-color-outline-variant); --hairline: var(--mise-color-outline-variant); --good: var(--mise-color-status-good); --good-c: var(--mise-color-status-good-container); --on-good-c: var(--mise-color-status-on-good-container); --warn: var(--mise-color-status-warning); --warn-c: var(--mise-color-status-warning-container); --on-warn-c: var(--mise-color-status-on-warning-container); --serious: var(--mise-color-status-serious); --serious-c: var(--mise-color-status-serious-container); --on-serious-c: var(--mise-color-status-on-serious-container); --crit: var(--mise-color-status-critical); --crit-c: var(--mise-color-status-critical-container); --on-crit-c: var(--mise-color-status-on-critical-container); --info: var(--mise-color-status-info); --info-c: var(--mise-color-status-info-container); --on-info-c: var(--mise-color-status-on-info-container); --scrim: var(--mise-color-scrim); --inverse-surface: var(--mise-color-inverse-surface); --inverse-on-surface: var(--mise-color-inverse-on-surface); /* ADR-031 soft square: pill is 4px; a circle is only for dots, radios, switches */ --r-xs: var(--mise-dimension-radius-xs); --r-sm: var(--mise-dimension-radius-sm); --r-md: var(--mise-dimension-radius-md); --r-lg: var(--mise-dimension-radius-lg); --r-xl: var(--mise-dimension-radius-xl); --r-full: var(--mise-dimension-radius-pill); --font-text: var(--mise-font-family-text); --font-display: var(--mise-font-family-display); --shadow-1: var(--mise-elevation-level1); --shadow-2: var(--mise-elevation-level2); --shadow-3: var(--mise-elevation-level3); --state-hover: color-mix(in srgb, currentColor calc(var(--mise-state-hover) * 100%), transparent); } :root[data-kit~="mise-legacy"] body:not(#_) { background: var(--mise-color-surface-container-low); color: var(--mise-color-on-surface); font-family: var(--mise-font-family-text); font-size: var(--mise-font-scale-body-size, .9375rem); } /* only true dots stay round */ :root[data-kit~="mise-legacy"] :is(.dot, .cb-dot, .summary-strip .dot, .meter .target, .cb-share .bar, .share .bar) { border-radius: var(--mise-dimension-radius-circle); } /* buttons — filled, tonal, text; no outlined variant ships (button.contract.md:41) */ :root[data-kit~="mise-legacy"] :is(.btn-primary, .btn-outline, .btn-text, .tb-btn, .opt-card.add, .chip-add) { border-radius: var(--mise-dimension-radius-pill) !important; font-weight: 700; position: relative; } :root[data-kit~="mise-legacy"] .btn-primary { background: var(--mise-color-primary); color: var(--mise-color-on-primary); border: none; } :root[data-kit~="mise-legacy"] :is(.btn-outline, .tb-btn) { background: var(--mise-color-secondary-container) !important; color: var(--mise-color-on-secondary-container) !important; border: none !important; box-shadow: none; } :root[data-kit~="mise-legacy"] :is(.btn-primary, .btn-outline, .tb-btn):hover { box-shadow: var(--mise-elevation-level1); } :root[data-kit~="mise-legacy"] :is(.btn-primary, .btn-outline, .btn-text, .tb-btn, .linkbtn, .tab, .v3-chip):active { filter: brightness(.94); } :root[data-kit~="mise-legacy"] :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: var(--mise-focus-ring-width) solid var(--mise-focus-ring-color, var(--mise-color-primary)); outline-offset: var(--mise-focus-ring-offset); } /* status chips: container + on-container, icon + word, 4px */ :root[data-kit~="mise-legacy"] .st { border-radius: var(--mise-dimension-radius-pill); font-weight: 750; font-size: .6875rem; padding: 3px 10px; } :root[data-kit~="mise-legacy"] .st.info { background: var(--info-c); color: var(--on-info-c); } :root[data-kit~="mise-legacy"] .st.neutral { background: var(--mise-color-surface-variant, var(--card-high)); color: var(--ink-2); } /* fields: 40px, 1px outline, 4px, no state layer */ :root[data-kit~="mise-legacy"] :is(.search, .storage-pick, .seg) { border-radius: var(--mise-field-radius) !important; } :root[data-kit~="mise-legacy"] .search { border: 1px solid var(--outline-variant); background: var(--card); min-height: 40px; } /* cards: hairline + lg radius */ :root[data-kit~="mise-legacy"] :is(.sec, .tablewrap, .facets, .econ, .cb-tree, .cb-totals, .pe-impact) { border-radius: var(--mise-dimension-radius-lg) !important; } :root[data-kit~="mise-legacy"] :is(.tablewrap, .cb-tree) { border-color: var(--outline-variant); } /* data table: 11px/750 uppercase heads, 44px rows, numbers to the end */ :root[data-kit~="mise-legacy"] table.data th { font-size: .6875rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; } /* ── bridge: overview.css ── */ /* The overview-page vocabulary (wholesale module overview): --brand, --have / --build / --later … onto tokens. Opt in with . */ :root[data-kit~="overview"]:not(#_) { --bg: var(--mise-color-surface-container-low); --card: var(--mise-color-surface); --ink: var(--mise-color-on-surface); --muted: var(--mise-color-on-surface-variant); --line: var(--mise-color-outline-variant); --brand: var(--mise-color-primary); --brand-soft: var(--mise-color-primary-container); --have: var(--mise-color-status-good); --have-soft: var(--mise-color-status-good-container); --build: var(--mise-color-status-info); --build-soft: var(--mise-color-status-info-container); --later: var(--mise-color-status-warning); --later-soft: var(--mise-color-status-warning-container); --accent: var(--mise-color-status-serious); --radius: var(--mise-dimension-radius-lg); --shadow: var(--mise-elevation-level1); } /* ── bridge: wholesale.css ── */ /* The proposal-page vocabulary (Dockolo dashboard, VAT design and review): --bg, --surface, --ink, --line, --good/-soft … onto tokens. Opt in with . */ :root[data-kit~="wholesale"]:not(#_) { --bg: var(--mise-color-surface-container-low); --surface: var(--mise-color-surface); --surface-2: var(--mise-color-surface-container); --ink: var(--mise-color-on-surface); --muted: var(--mise-color-on-surface-variant); --line: var(--mise-color-outline-variant); --primary: var(--mise-color-primary); --primary-soft: var(--mise-color-primary-container); --on-primary: var(--mise-color-on-primary); --bar: var(--mise-color-palette-primary-10); --bar-ink: var(--mise-color-palette-primary-80); --bar-active: var(--mise-color-surface-bright); --good: var(--mise-color-status-good); --good-soft: var(--mise-color-status-good-container); --warn: var(--mise-color-status-warning); --warn-soft: var(--mise-color-status-warning-container); --bad: var(--mise-color-status-critical); --bad-soft: var(--mise-color-status-critical-container); --info: var(--mise-color-status-info); --info-soft: var(--mise-color-status-info-container); --c1: var(--mise-chart-categorical-1); --c2: var(--mise-chart-categorical-2); --c3: var(--mise-chart-categorical-3); --c4: var(--mise-chart-categorical-4); --c5: var(--mise-chart-categorical-5); --radius: var(--mise-dimension-radius-lg); --shadow: var(--mise-elevation-level1); }