/* GENERATED from the shared MSUI premium proposal. Do not edit. * Version 0.3.0-study.2; skin gleezit; effective token SHA-256 47e7c4c9439c492cb293fe596408d102d0acd4847bcd7a15a42328242d0ddb79 */ @font-face { font-family: "Public Sans"; src: url("PublicSans.ttf") format("truetype"); font-style: normal; font-weight: 100 900; font-display: swap; } @font-face { font-family: "Bricolage Grotesque"; src: url("BricolageGrotesque-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; } :root { --msui-comp-button-font-size: var(--msui-ref-font-size-body); --msui-comp-button-gap: var(--msui-ref-space-2); --msui-comp-button-height: var(--msui-ref-size-target); --msui-comp-button-primary-container: var(--msui-sys-color-action); --msui-comp-button-primary-label: var(--msui-sys-color-on-action); --msui-comp-button-radius: var(--msui-ref-radius-md); --msui-comp-depth-canvas: var(--msui-sys-color-canvas); --msui-comp-depth-edge: var(--msui-sys-color-border); --msui-comp-depth-level-front: 2; --msui-comp-depth-level-sheet: 1; --msui-comp-depth-overlap: var(--msui-ref-space-6); --msui-comp-depth-shadow-dialog: var(--msui-ref-shadow-high); --msui-comp-depth-shadow-float: var(--msui-ref-shadow-medium); --msui-comp-depth-shadow-rest: var(--msui-ref-shadow-low); --msui-comp-depth-sheet: var(--msui-sys-color-raised); --msui-comp-depth-well: var(--msui-sys-color-surface); --msui-comp-field-background: var(--msui-sys-color-page); --msui-comp-field-height: var(--msui-ref-size-control); --msui-comp-field-outline: var(--msui-sys-color-outline); --msui-comp-field-radius: var(--msui-ref-radius-sm); --msui-comp-gleezit-brand-size: var(--msui-ref-font-size-title); --msui-comp-gleezit-chart-height: 192px; --msui-comp-gleezit-discovery-columns: minmax(0, 1.65fr) minmax(0, 1fr); --msui-comp-gleezit-discovery-photo: 400px; --msui-comp-gleezit-discovery-secondary: 160px; --msui-comp-gleezit-discovery-thumb: 112px; --msui-comp-gleezit-editor-input: 160px; --msui-comp-gleezit-editor-paper: 800px; --msui-comp-gleezit-editor-product-thumb: 112px; --msui-comp-gleezit-motif-notebook: double; --msui-comp-gleezit-motif-offset: var(--msui-ref-space-2); --msui-comp-gleezit-motif-rule: var(--msui-ref-space-1); --msui-comp-gleezit-motif-stitch: dashed; --msui-comp-gleezit-motif-thickness: var(--msui-ref-line-hairline); --msui-comp-gleezit-review-mobile: 375px; --msui-comp-gleezit-review-width: 1440px; --msui-comp-gleezit-scroll-margin: 96px; --msui-comp-gleezit-sr-offset: -1px; --msui-comp-surface-padding: var(--msui-ref-space-6); --msui-comp-surface-radius: var(--msui-ref-radius-lg); --msui-comp-surface-shadow: none; --msui-ref-aspect-editorial: 16 / 10; --msui-ref-aspect-landscape: 3 / 2; --msui-ref-aspect-photo: 4 / 3; --msui-ref-aspect-portrait: 4 / 5; --msui-ref-aspect-square: 1; --msui-ref-color-accent-100: #fce5dc; --msui-ref-color-accent-200: #f4c6b4; --msui-ref-color-accent-300: #e69d80; --msui-ref-color-accent-400: #d87859; --msui-ref-color-accent-50: #fff3ef; --msui-ref-color-accent-500: #c05b3e; --msui-ref-color-accent-600: #a44730; --msui-ref-color-accent-700: #873822; --msui-ref-color-accent-800: #6b2c1d; --msui-ref-color-accent-950: #442015; --msui-ref-color-danger-dark: #f0a7b2; --msui-ref-color-danger-light: #a02438; --msui-ref-color-neutral-100: #f4eee7; --msui-ref-color-neutral-200: #e7dacf; --msui-ref-color-neutral-300: #d0bca9; --msui-ref-color-neutral-400: #b59a81; --msui-ref-color-neutral-50: #fdf9f5; --msui-ref-color-neutral-500: #967c63; --msui-ref-color-neutral-600: #795f48; --msui-ref-color-neutral-700: #5e4733; --msui-ref-color-neutral-800: #443120; --msui-ref-color-neutral-950: #2c1f14; --msui-ref-color-success-dark: #9bd5b0; --msui-ref-color-success-light: #246140; --msui-ref-color-warning-dark: #e3c27d; --msui-ref-color-warning-light: #795200; --msui-ref-font-family-display: "Bricolage Grotesque", sans-serif; --msui-ref-font-family-text: "Public Sans", sans-serif; --msui-ref-font-line-body: 1.55; --msui-ref-font-line-display: 1.08; --msui-ref-font-line-title: 1.16; --msui-ref-font-size-body: 1rem; --msui-ref-font-size-caption: 0.8rem; --msui-ref-font-size-display: clamp(1.953125rem, 3cqi, 2.44140625rem); --msui-ref-font-size-display-large: clamp(1.953125rem, 4cqi, 3.0517578125rem); --msui-ref-font-size-title: 1.5625rem; --msui-ref-font-tracking-body: 0em; --msui-ref-font-tracking-display: -0.035em; --msui-ref-font-tracking-title: -0.02em; --msui-ref-font-weight-bold: 700; --msui-ref-font-weight-medium: 500; --msui-ref-font-weight-regular: 400; --msui-ref-font-weight-strong: 600; --msui-ref-line-focus: 2px; --msui-ref-line-focus-offset: 4px; --msui-ref-line-hairline: 1px; --msui-ref-motion-ease-enter: cubic-bezier(0.4, 0, 0.2, 1); --msui-ref-motion-ease-exit: cubic-bezier(0.2, 0, 0, 1); --msui-ref-motion-ease-spring: cubic-bezier(0.2, 1.25, 0.4, 1); --msui-ref-motion-feedback: 150ms; --msui-ref-motion-reduce: 0ms; --msui-ref-motion-scale-active: 0.98; --msui-ref-motion-scale-hover: 1.01; --msui-ref-motion-shift-hover: -2px; --msui-ref-motion-shift-view: 8px; --msui-ref-motion-stagger: 40ms; --msui-ref-motion-state: 250ms; --msui-ref-motion-view: 400ms; --msui-ref-opacity-disabled: 0.55; --msui-ref-opacity-full: 1; --msui-ref-opacity-hidden: 0; --msui-ref-radius-lg: 12px; --msui-ref-radius-md: 8px; --msui-ref-radius-sm: 4px; --msui-ref-shadow-high: 0 8px 16px color-mix(in srgb, var(--msui-ref-color-neutral-950) 8%, transparent), 0 24px 48px color-mix(in srgb, var(--msui-ref-color-neutral-950) 5%, transparent); --msui-ref-shadow-low: 0 2px 4px color-mix(in srgb, var(--msui-ref-color-neutral-950) 5%, transparent), 0 8px 16px color-mix(in srgb, var(--msui-ref-color-neutral-950) 3%, transparent); --msui-ref-shadow-medium: 0 4px 8px color-mix(in srgb, var(--msui-ref-color-neutral-950) 6%, transparent), 0 16px 32px color-mix(in srgb, var(--msui-ref-color-neutral-950) 4%, transparent); --msui-ref-size-avatar: 32px; --msui-ref-size-avatar-large: 48px; --msui-ref-size-brand: 32px; --msui-ref-size-container: 1200px; --msui-ref-size-container-wide: 1280px; --msui-ref-size-control: 48px; --msui-ref-size-dialog: 560px; --msui-ref-size-form: 720px; --msui-ref-size-gutter: 32px; --msui-ref-size-gutter-compact: 16px; --msui-ref-size-header: 72px; --msui-ref-size-icon: 20px; --msui-ref-size-image: 320px; --msui-ref-size-image-compact: 240px; --msui-ref-size-image-feature: 480px; --msui-ref-size-inspector: 320px; --msui-ref-size-profile: 528px; --msui-ref-size-reading: 68ch; --msui-ref-size-sidebar: 224px; --msui-ref-size-sidebar-wide: 240px; --msui-ref-size-target: 44px; --msui-ref-size-thumb: 80px; --msui-ref-space-1: 0.25rem; --msui-ref-space-10: 2.5rem; --msui-ref-space-12: 3rem; --msui-ref-space-16: 4rem; --msui-ref-space-2: 0.5rem; --msui-ref-space-24: 6rem; --msui-ref-space-3: 0.75rem; --msui-ref-space-4: 1rem; --msui-ref-space-5: 1.25rem; --msui-ref-space-6: 1.5rem; --msui-ref-space-8: 2rem; --msui-ref-unit-zero: 0; } :root, [data-msui-theme="light"] { --msui-comp-button-font-size: var(--msui-ref-font-size-body); --msui-comp-button-gap: var(--msui-ref-space-2); --msui-comp-button-height: var(--msui-ref-size-target); --msui-comp-button-primary-container: var(--msui-sys-color-action); --msui-comp-button-primary-label: var(--msui-sys-color-on-action); --msui-comp-button-radius: var(--msui-ref-radius-md); --msui-comp-depth-canvas: var(--msui-sys-color-canvas); --msui-comp-depth-edge: var(--msui-sys-color-border); --msui-comp-depth-level-front: 2; --msui-comp-depth-level-sheet: 1; --msui-comp-depth-overlap: var(--msui-ref-space-6); --msui-comp-depth-shadow-dialog: var(--msui-ref-shadow-high); --msui-comp-depth-shadow-float: var(--msui-ref-shadow-medium); --msui-comp-depth-shadow-rest: var(--msui-ref-shadow-low); --msui-comp-depth-sheet: var(--msui-sys-color-raised); --msui-comp-depth-well: var(--msui-sys-color-surface); --msui-comp-field-background: var(--msui-sys-color-page); --msui-comp-field-height: var(--msui-ref-size-control); --msui-comp-field-outline: var(--msui-sys-color-outline); --msui-comp-field-radius: var(--msui-ref-radius-sm); --msui-comp-surface-padding: var(--msui-ref-space-6); --msui-comp-surface-radius: var(--msui-ref-radius-lg); --msui-comp-surface-shadow: none; --msui-sys-color-action: var(--msui-ref-color-accent-700); --msui-sys-color-action-active: var(--msui-ref-color-accent-950); --msui-sys-color-action-hover: var(--msui-ref-color-accent-800); --msui-sys-color-border: var(--msui-ref-color-neutral-200); --msui-sys-color-canvas: var(--msui-ref-color-neutral-100); --msui-sys-color-danger: var(--msui-ref-color-danger-light); --msui-sys-color-focus: var(--msui-ref-color-accent-700); --msui-sys-color-muted: var(--msui-ref-color-neutral-600); --msui-sys-color-nav: var(--msui-ref-color-neutral-950); --msui-sys-color-nav-muted: var(--msui-ref-color-neutral-300); --msui-sys-color-on-action: var(--msui-ref-color-neutral-50); --msui-sys-color-on-nav: var(--msui-ref-color-neutral-50); --msui-sys-color-outline: var(--msui-ref-color-neutral-500); --msui-sys-color-page: var(--msui-ref-color-neutral-50); --msui-sys-color-raised: var(--msui-ref-color-neutral-50); --msui-sys-color-selection: var(--msui-ref-color-accent-100); --msui-sys-color-success: var(--msui-ref-color-success-light); --msui-sys-color-surface: var(--msui-ref-color-neutral-100); --msui-sys-color-text: var(--msui-ref-color-neutral-950); --msui-sys-color-warning: var(--msui-ref-color-warning-light); } [data-msui-theme="dark"] { --msui-comp-button-font-size: var(--msui-ref-font-size-body); --msui-comp-button-gap: var(--msui-ref-space-2); --msui-comp-button-height: var(--msui-ref-size-target); --msui-comp-button-primary-container: var(--msui-sys-color-action); --msui-comp-button-primary-label: var(--msui-sys-color-on-action); --msui-comp-button-radius: var(--msui-ref-radius-md); --msui-comp-depth-canvas: var(--msui-sys-color-canvas); --msui-comp-depth-edge: var(--msui-sys-color-border); --msui-comp-depth-level-front: 2; --msui-comp-depth-level-sheet: 1; --msui-comp-depth-overlap: var(--msui-ref-space-6); --msui-comp-depth-shadow-dialog: var(--msui-ref-shadow-high); --msui-comp-depth-shadow-float: var(--msui-ref-shadow-medium); --msui-comp-depth-shadow-rest: var(--msui-ref-shadow-low); --msui-comp-depth-sheet: var(--msui-sys-color-raised); --msui-comp-depth-well: var(--msui-sys-color-surface); --msui-comp-field-background: var(--msui-sys-color-page); --msui-comp-field-height: var(--msui-ref-size-control); --msui-comp-field-outline: var(--msui-sys-color-outline); --msui-comp-field-radius: var(--msui-ref-radius-sm); --msui-comp-surface-padding: var(--msui-ref-space-6); --msui-comp-surface-radius: var(--msui-ref-radius-lg); --msui-comp-surface-shadow: none; --msui-sys-color-action: var(--msui-ref-color-accent-200); --msui-sys-color-action-active: var(--msui-ref-color-accent-50); --msui-sys-color-action-hover: var(--msui-ref-color-accent-100); --msui-sys-color-border: var(--msui-ref-color-neutral-600); --msui-sys-color-canvas: var(--msui-ref-color-neutral-950); --msui-sys-color-danger: var(--msui-ref-color-danger-dark); --msui-sys-color-focus: var(--msui-ref-color-accent-200); --msui-sys-color-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-nav: var(--msui-ref-color-neutral-950); --msui-sys-color-nav-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-on-action: var(--msui-ref-color-neutral-950); --msui-sys-color-on-nav: var(--msui-ref-color-neutral-50); --msui-sys-color-outline: var(--msui-ref-color-neutral-400); --msui-sys-color-page: var(--msui-ref-color-neutral-950); --msui-sys-color-raised: var(--msui-ref-color-neutral-700); --msui-sys-color-selection: var(--msui-ref-color-accent-800); --msui-sys-color-success: var(--msui-ref-color-success-dark); --msui-sys-color-surface: var(--msui-ref-color-neutral-800); --msui-sys-color-text: var(--msui-ref-color-neutral-50); --msui-sys-color-warning: var(--msui-ref-color-warning-dark); } @media (prefers-color-scheme: dark) { [data-msui-theme="auto"] { --msui-comp-button-font-size: var(--msui-ref-font-size-body); --msui-comp-button-gap: var(--msui-ref-space-2); --msui-comp-button-height: var(--msui-ref-size-target); --msui-comp-button-primary-container: var(--msui-sys-color-action); --msui-comp-button-primary-label: var(--msui-sys-color-on-action); --msui-comp-button-radius: var(--msui-ref-radius-md); --msui-comp-depth-canvas: var(--msui-sys-color-canvas); --msui-comp-depth-edge: var(--msui-sys-color-border); --msui-comp-depth-level-front: 2; --msui-comp-depth-level-sheet: 1; --msui-comp-depth-overlap: var(--msui-ref-space-6); --msui-comp-depth-shadow-dialog: var(--msui-ref-shadow-high); --msui-comp-depth-shadow-float: var(--msui-ref-shadow-medium); --msui-comp-depth-shadow-rest: var(--msui-ref-shadow-low); --msui-comp-depth-sheet: var(--msui-sys-color-raised); --msui-comp-depth-well: var(--msui-sys-color-surface); --msui-comp-field-background: var(--msui-sys-color-page); --msui-comp-field-height: var(--msui-ref-size-control); --msui-comp-field-outline: var(--msui-sys-color-outline); --msui-comp-field-radius: var(--msui-ref-radius-sm); --msui-comp-surface-padding: var(--msui-ref-space-6); --msui-comp-surface-radius: var(--msui-ref-radius-lg); --msui-comp-surface-shadow: none; --msui-sys-color-action: var(--msui-ref-color-accent-200); --msui-sys-color-action-active: var(--msui-ref-color-accent-50); --msui-sys-color-action-hover: var(--msui-ref-color-accent-100); --msui-sys-color-border: var(--msui-ref-color-neutral-600); --msui-sys-color-canvas: var(--msui-ref-color-neutral-950); --msui-sys-color-danger: var(--msui-ref-color-danger-dark); --msui-sys-color-focus: var(--msui-ref-color-accent-200); --msui-sys-color-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-nav: var(--msui-ref-color-neutral-950); --msui-sys-color-nav-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-on-action: var(--msui-ref-color-neutral-950); --msui-sys-color-on-nav: var(--msui-ref-color-neutral-50); --msui-sys-color-outline: var(--msui-ref-color-neutral-400); --msui-sys-color-page: var(--msui-ref-color-neutral-950); --msui-sys-color-raised: var(--msui-ref-color-neutral-700); --msui-sys-color-selection: var(--msui-ref-color-accent-800); --msui-sys-color-success: var(--msui-ref-color-success-dark); --msui-sys-color-surface: var(--msui-ref-color-neutral-800); --msui-sys-color-text: var(--msui-ref-color-neutral-50); --msui-sys-color-warning: var(--msui-ref-color-warning-dark); } } [data-msui-creator="camille"] { --msui-comp-button-font-size: var(--msui-ref-font-size-body); --msui-comp-button-gap: var(--msui-ref-space-2); --msui-comp-button-height: var(--msui-ref-size-target); --msui-comp-button-primary-container: var(--msui-sys-color-action); --msui-comp-button-primary-label: var(--msui-sys-color-on-action); --msui-comp-button-radius: var(--msui-ref-radius-md); --msui-comp-depth-canvas: var(--msui-sys-color-canvas); --msui-comp-depth-edge: var(--msui-sys-color-border); --msui-comp-depth-level-front: 2; --msui-comp-depth-level-sheet: 1; --msui-comp-depth-overlap: var(--msui-ref-space-6); --msui-comp-depth-shadow-dialog: var(--msui-ref-shadow-high); --msui-comp-depth-shadow-float: var(--msui-ref-shadow-medium); --msui-comp-depth-shadow-rest: var(--msui-ref-shadow-low); --msui-comp-depth-sheet: var(--msui-sys-color-raised); --msui-comp-depth-well: var(--msui-sys-color-surface); --msui-comp-field-background: var(--msui-sys-color-page); --msui-comp-field-height: var(--msui-ref-size-control); --msui-comp-field-outline: var(--msui-sys-color-outline); --msui-comp-field-radius: var(--msui-ref-radius-sm); --msui-comp-surface-padding: var(--msui-ref-space-6); --msui-comp-surface-radius: var(--msui-ref-radius-lg); --msui-comp-surface-shadow: none; --msui-ref-color-accent-100: #fce5dc; --msui-ref-color-accent-200: #f4c6b4; --msui-ref-color-accent-300: #e69d80; --msui-ref-color-accent-400: #d87859; --msui-ref-color-accent-50: #fff3ef; --msui-ref-color-accent-500: #c05b3e; --msui-ref-color-accent-600: #a44730; --msui-ref-color-accent-700: #873822; --msui-ref-color-accent-800: #6b2c1d; --msui-ref-color-accent-950: #442015; --msui-ref-color-neutral-100: #f4eee7; --msui-ref-color-neutral-200: #e7dacf; --msui-ref-color-neutral-300: #d0bca9; --msui-ref-color-neutral-400: #b59a81; --msui-ref-color-neutral-50: #fdf9f5; --msui-ref-color-neutral-500: #967c63; --msui-ref-color-neutral-600: #795f48; --msui-ref-color-neutral-700: #5e4733; --msui-ref-color-neutral-800: #443120; --msui-ref-color-neutral-950: #2c1f14; --msui-ref-font-family-display: "Bricolage Grotesque", sans-serif; --msui-sys-color-action: var(--msui-ref-color-accent-700); --msui-sys-color-action-active: var(--msui-ref-color-accent-950); --msui-sys-color-action-hover: var(--msui-ref-color-accent-800); --msui-sys-color-border: var(--msui-ref-color-neutral-200); --msui-sys-color-canvas: var(--msui-ref-color-neutral-100); --msui-sys-color-danger: var(--msui-ref-color-danger-light); --msui-sys-color-focus: var(--msui-ref-color-accent-700); --msui-sys-color-muted: var(--msui-ref-color-neutral-600); --msui-sys-color-nav: var(--msui-ref-color-neutral-950); --msui-sys-color-nav-muted: var(--msui-ref-color-neutral-300); --msui-sys-color-on-action: var(--msui-ref-color-neutral-50); --msui-sys-color-on-nav: var(--msui-ref-color-neutral-50); --msui-sys-color-outline: var(--msui-ref-color-neutral-500); --msui-sys-color-page: var(--msui-ref-color-neutral-50); --msui-sys-color-raised: var(--msui-ref-color-neutral-50); --msui-sys-color-selection: var(--msui-ref-color-accent-100); --msui-sys-color-success: var(--msui-ref-color-success-light); --msui-sys-color-surface: var(--msui-ref-color-neutral-100); --msui-sys-color-text: var(--msui-ref-color-neutral-950); --msui-sys-color-warning: var(--msui-ref-color-warning-light); } [data-msui-theme="dark"] [data-msui-creator="camille"], [data-msui-creator="camille"][data-msui-theme="dark"] { --msui-comp-button-font-size: var(--msui-ref-font-size-body); --msui-comp-button-gap: var(--msui-ref-space-2); --msui-comp-button-height: var(--msui-ref-size-target); --msui-comp-button-primary-container: var(--msui-sys-color-action); --msui-comp-button-primary-label: var(--msui-sys-color-on-action); --msui-comp-button-radius: var(--msui-ref-radius-md); --msui-comp-depth-canvas: var(--msui-sys-color-canvas); --msui-comp-depth-edge: var(--msui-sys-color-border); --msui-comp-depth-level-front: 2; --msui-comp-depth-level-sheet: 1; --msui-comp-depth-overlap: var(--msui-ref-space-6); --msui-comp-depth-shadow-dialog: var(--msui-ref-shadow-high); --msui-comp-depth-shadow-float: var(--msui-ref-shadow-medium); --msui-comp-depth-shadow-rest: var(--msui-ref-shadow-low); --msui-comp-depth-sheet: var(--msui-sys-color-raised); --msui-comp-depth-well: var(--msui-sys-color-surface); --msui-comp-field-background: var(--msui-sys-color-page); --msui-comp-field-height: var(--msui-ref-size-control); --msui-comp-field-outline: var(--msui-sys-color-outline); --msui-comp-field-radius: var(--msui-ref-radius-sm); --msui-comp-surface-padding: var(--msui-ref-space-6); --msui-comp-surface-radius: var(--msui-ref-radius-lg); --msui-comp-surface-shadow: none; --msui-sys-color-action: var(--msui-ref-color-accent-200); --msui-sys-color-action-active: var(--msui-ref-color-accent-50); --msui-sys-color-action-hover: var(--msui-ref-color-accent-100); --msui-sys-color-border: var(--msui-ref-color-neutral-600); --msui-sys-color-canvas: var(--msui-ref-color-neutral-950); --msui-sys-color-danger: var(--msui-ref-color-danger-dark); --msui-sys-color-focus: var(--msui-ref-color-accent-200); --msui-sys-color-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-nav: var(--msui-ref-color-neutral-950); --msui-sys-color-nav-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-on-action: var(--msui-ref-color-neutral-950); --msui-sys-color-on-nav: var(--msui-ref-color-neutral-50); --msui-sys-color-outline: var(--msui-ref-color-neutral-400); --msui-sys-color-page: var(--msui-ref-color-neutral-950); --msui-sys-color-raised: var(--msui-ref-color-neutral-700); --msui-sys-color-selection: var(--msui-ref-color-accent-800); --msui-sys-color-success: var(--msui-ref-color-success-dark); --msui-sys-color-surface: var(--msui-ref-color-neutral-800); --msui-sys-color-text: var(--msui-ref-color-neutral-50); --msui-sys-color-warning: var(--msui-ref-color-warning-dark); } @media (prefers-color-scheme: dark) { [data-msui-theme="auto"] [data-msui-creator="camille"], [data-msui-creator="camille"][data-msui-theme="auto"] { --msui-comp-button-font-size: var(--msui-ref-font-size-body); --msui-comp-button-gap: var(--msui-ref-space-2); --msui-comp-button-height: var(--msui-ref-size-target); --msui-comp-button-primary-container: var(--msui-sys-color-action); --msui-comp-button-primary-label: var(--msui-sys-color-on-action); --msui-comp-button-radius: var(--msui-ref-radius-md); --msui-comp-depth-canvas: var(--msui-sys-color-canvas); --msui-comp-depth-edge: var(--msui-sys-color-border); --msui-comp-depth-level-front: 2; --msui-comp-depth-level-sheet: 1; --msui-comp-depth-overlap: var(--msui-ref-space-6); --msui-comp-depth-shadow-dialog: var(--msui-ref-shadow-high); --msui-comp-depth-shadow-float: var(--msui-ref-shadow-medium); --msui-comp-depth-shadow-rest: var(--msui-ref-shadow-low); --msui-comp-depth-sheet: var(--msui-sys-color-raised); --msui-comp-depth-well: var(--msui-sys-color-surface); --msui-comp-field-background: var(--msui-sys-color-page); --msui-comp-field-height: var(--msui-ref-size-control); --msui-comp-field-outline: var(--msui-sys-color-outline); --msui-comp-field-radius: var(--msui-ref-radius-sm); --msui-comp-surface-padding: var(--msui-ref-space-6); --msui-comp-surface-radius: var(--msui-ref-radius-lg); --msui-comp-surface-shadow: none; --msui-sys-color-action: var(--msui-ref-color-accent-200); --msui-sys-color-action-active: var(--msui-ref-color-accent-50); --msui-sys-color-action-hover: var(--msui-ref-color-accent-100); --msui-sys-color-border: var(--msui-ref-color-neutral-600); --msui-sys-color-canvas: var(--msui-ref-color-neutral-950); --msui-sys-color-danger: var(--msui-ref-color-danger-dark); --msui-sys-color-focus: var(--msui-ref-color-accent-200); --msui-sys-color-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-nav: var(--msui-ref-color-neutral-950); --msui-sys-color-nav-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-on-action: var(--msui-ref-color-neutral-950); --msui-sys-color-on-nav: var(--msui-ref-color-neutral-50); --msui-sys-color-outline: var(--msui-ref-color-neutral-400); --msui-sys-color-page: var(--msui-ref-color-neutral-950); --msui-sys-color-raised: var(--msui-ref-color-neutral-700); --msui-sys-color-selection: var(--msui-ref-color-accent-800); --msui-sys-color-success: var(--msui-ref-color-success-dark); --msui-sys-color-surface: var(--msui-ref-color-neutral-800); --msui-sys-color-text: var(--msui-ref-color-neutral-50); --msui-sys-color-warning: var(--msui-ref-color-warning-dark); } } [data-msui-creator="lea"] { --msui-comp-button-font-size: var(--msui-ref-font-size-body); --msui-comp-button-gap: var(--msui-ref-space-2); --msui-comp-button-height: var(--msui-ref-size-target); --msui-comp-button-primary-container: var(--msui-sys-color-action); --msui-comp-button-primary-label: var(--msui-sys-color-on-action); --msui-comp-button-radius: var(--msui-ref-radius-md); --msui-comp-depth-canvas: var(--msui-sys-color-canvas); --msui-comp-depth-edge: var(--msui-sys-color-border); --msui-comp-depth-level-front: 2; --msui-comp-depth-level-sheet: 1; --msui-comp-depth-overlap: var(--msui-ref-space-6); --msui-comp-depth-shadow-dialog: var(--msui-ref-shadow-high); --msui-comp-depth-shadow-float: var(--msui-ref-shadow-medium); --msui-comp-depth-shadow-rest: var(--msui-ref-shadow-low); --msui-comp-depth-sheet: var(--msui-sys-color-raised); --msui-comp-depth-well: var(--msui-sys-color-surface); --msui-comp-field-background: var(--msui-sys-color-page); --msui-comp-field-height: var(--msui-ref-size-control); --msui-comp-field-outline: var(--msui-sys-color-outline); --msui-comp-field-radius: var(--msui-ref-radius-sm); --msui-comp-surface-padding: var(--msui-ref-space-6); --msui-comp-surface-radius: var(--msui-ref-radius-lg); --msui-comp-surface-shadow: none; --msui-ref-color-accent-100: #efe1ec; --msui-ref-color-accent-200: #dfc6da; --msui-ref-color-accent-300: #cfa3c5; --msui-ref-color-accent-400: #b77fac; --msui-ref-color-accent-50: #f7f1f6; --msui-ref-color-accent-500: #995d8d; --msui-ref-color-accent-600: #7e4771; --msui-ref-color-accent-700: #65365b; --msui-ref-color-accent-800: #4d2b46; --msui-ref-color-accent-950: #321d2d; --msui-ref-color-neutral-100: #f0eaf0; --msui-ref-color-neutral-200: #e2d7df; --msui-ref-color-neutral-300: #cbbac8; --msui-ref-color-neutral-400: #ad97a8; --msui-ref-color-neutral-50: #faf7fa; --msui-ref-color-neutral-500: #8e7588; --msui-ref-color-neutral-600: #6f596a; --msui-ref-color-neutral-700: #554250; --msui-ref-color-neutral-800: #3d2e39; --msui-ref-color-neutral-950: #291f26; --msui-ref-font-family-display: "Bricolage Grotesque", sans-serif; --msui-sys-color-action: var(--msui-ref-color-accent-700); --msui-sys-color-action-active: var(--msui-ref-color-accent-950); --msui-sys-color-action-hover: var(--msui-ref-color-accent-800); --msui-sys-color-border: var(--msui-ref-color-neutral-200); --msui-sys-color-canvas: var(--msui-ref-color-neutral-100); --msui-sys-color-danger: var(--msui-ref-color-danger-light); --msui-sys-color-focus: var(--msui-ref-color-accent-700); --msui-sys-color-muted: var(--msui-ref-color-neutral-600); --msui-sys-color-nav: var(--msui-ref-color-neutral-950); --msui-sys-color-nav-muted: var(--msui-ref-color-neutral-300); --msui-sys-color-on-action: var(--msui-ref-color-neutral-50); --msui-sys-color-on-nav: var(--msui-ref-color-neutral-50); --msui-sys-color-outline: var(--msui-ref-color-neutral-500); --msui-sys-color-page: var(--msui-ref-color-neutral-50); --msui-sys-color-raised: var(--msui-ref-color-neutral-50); --msui-sys-color-selection: var(--msui-ref-color-accent-100); --msui-sys-color-success: var(--msui-ref-color-success-light); --msui-sys-color-surface: var(--msui-ref-color-neutral-100); --msui-sys-color-text: var(--msui-ref-color-neutral-950); --msui-sys-color-warning: var(--msui-ref-color-warning-light); } [data-msui-theme="dark"] [data-msui-creator="lea"], [data-msui-creator="lea"][data-msui-theme="dark"] { --msui-comp-button-font-size: var(--msui-ref-font-size-body); --msui-comp-button-gap: var(--msui-ref-space-2); --msui-comp-button-height: var(--msui-ref-size-target); --msui-comp-button-primary-container: var(--msui-sys-color-action); --msui-comp-button-primary-label: var(--msui-sys-color-on-action); --msui-comp-button-radius: var(--msui-ref-radius-md); --msui-comp-depth-canvas: var(--msui-sys-color-canvas); --msui-comp-depth-edge: var(--msui-sys-color-border); --msui-comp-depth-level-front: 2; --msui-comp-depth-level-sheet: 1; --msui-comp-depth-overlap: var(--msui-ref-space-6); --msui-comp-depth-shadow-dialog: var(--msui-ref-shadow-high); --msui-comp-depth-shadow-float: var(--msui-ref-shadow-medium); --msui-comp-depth-shadow-rest: var(--msui-ref-shadow-low); --msui-comp-depth-sheet: var(--msui-sys-color-raised); --msui-comp-depth-well: var(--msui-sys-color-surface); --msui-comp-field-background: var(--msui-sys-color-page); --msui-comp-field-height: var(--msui-ref-size-control); --msui-comp-field-outline: var(--msui-sys-color-outline); --msui-comp-field-radius: var(--msui-ref-radius-sm); --msui-comp-surface-padding: var(--msui-ref-space-6); --msui-comp-surface-radius: var(--msui-ref-radius-lg); --msui-comp-surface-shadow: none; --msui-sys-color-action: var(--msui-ref-color-accent-200); --msui-sys-color-action-active: var(--msui-ref-color-accent-50); --msui-sys-color-action-hover: var(--msui-ref-color-accent-100); --msui-sys-color-border: var(--msui-ref-color-neutral-600); --msui-sys-color-canvas: var(--msui-ref-color-neutral-950); --msui-sys-color-danger: var(--msui-ref-color-danger-dark); --msui-sys-color-focus: var(--msui-ref-color-accent-200); --msui-sys-color-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-nav: var(--msui-ref-color-neutral-950); --msui-sys-color-nav-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-on-action: var(--msui-ref-color-neutral-950); --msui-sys-color-on-nav: var(--msui-ref-color-neutral-50); --msui-sys-color-outline: var(--msui-ref-color-neutral-400); --msui-sys-color-page: var(--msui-ref-color-neutral-950); --msui-sys-color-raised: var(--msui-ref-color-neutral-700); --msui-sys-color-selection: var(--msui-ref-color-accent-800); --msui-sys-color-success: var(--msui-ref-color-success-dark); --msui-sys-color-surface: var(--msui-ref-color-neutral-800); --msui-sys-color-text: var(--msui-ref-color-neutral-50); --msui-sys-color-warning: var(--msui-ref-color-warning-dark); } @media (prefers-color-scheme: dark) { [data-msui-theme="auto"] [data-msui-creator="lea"], [data-msui-creator="lea"][data-msui-theme="auto"] { --msui-comp-button-font-size: var(--msui-ref-font-size-body); --msui-comp-button-gap: var(--msui-ref-space-2); --msui-comp-button-height: var(--msui-ref-size-target); --msui-comp-button-primary-container: var(--msui-sys-color-action); --msui-comp-button-primary-label: var(--msui-sys-color-on-action); --msui-comp-button-radius: var(--msui-ref-radius-md); --msui-comp-depth-canvas: var(--msui-sys-color-canvas); --msui-comp-depth-edge: var(--msui-sys-color-border); --msui-comp-depth-level-front: 2; --msui-comp-depth-level-sheet: 1; --msui-comp-depth-overlap: var(--msui-ref-space-6); --msui-comp-depth-shadow-dialog: var(--msui-ref-shadow-high); --msui-comp-depth-shadow-float: var(--msui-ref-shadow-medium); --msui-comp-depth-shadow-rest: var(--msui-ref-shadow-low); --msui-comp-depth-sheet: var(--msui-sys-color-raised); --msui-comp-depth-well: var(--msui-sys-color-surface); --msui-comp-field-background: var(--msui-sys-color-page); --msui-comp-field-height: var(--msui-ref-size-control); --msui-comp-field-outline: var(--msui-sys-color-outline); --msui-comp-field-radius: var(--msui-ref-radius-sm); --msui-comp-surface-padding: var(--msui-ref-space-6); --msui-comp-surface-radius: var(--msui-ref-radius-lg); --msui-comp-surface-shadow: none; --msui-sys-color-action: var(--msui-ref-color-accent-200); --msui-sys-color-action-active: var(--msui-ref-color-accent-50); --msui-sys-color-action-hover: var(--msui-ref-color-accent-100); --msui-sys-color-border: var(--msui-ref-color-neutral-600); --msui-sys-color-canvas: var(--msui-ref-color-neutral-950); --msui-sys-color-danger: var(--msui-ref-color-danger-dark); --msui-sys-color-focus: var(--msui-ref-color-accent-200); --msui-sys-color-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-nav: var(--msui-ref-color-neutral-950); --msui-sys-color-nav-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-on-action: var(--msui-ref-color-neutral-950); --msui-sys-color-on-nav: var(--msui-ref-color-neutral-50); --msui-sys-color-outline: var(--msui-ref-color-neutral-400); --msui-sys-color-page: var(--msui-ref-color-neutral-950); --msui-sys-color-raised: var(--msui-ref-color-neutral-700); --msui-sys-color-selection: var(--msui-ref-color-accent-800); --msui-sys-color-success: var(--msui-ref-color-success-dark); --msui-sys-color-surface: var(--msui-ref-color-neutral-800); --msui-sys-color-text: var(--msui-ref-color-neutral-50); --msui-sys-color-warning: var(--msui-ref-color-warning-dark); } } [data-msui-creator="paul"] { --msui-comp-button-font-size: var(--msui-ref-font-size-body); --msui-comp-button-gap: var(--msui-ref-space-2); --msui-comp-button-height: var(--msui-ref-size-target); --msui-comp-button-primary-container: var(--msui-sys-color-action); --msui-comp-button-primary-label: var(--msui-sys-color-on-action); --msui-comp-button-radius: var(--msui-ref-radius-md); --msui-comp-depth-canvas: var(--msui-sys-color-canvas); --msui-comp-depth-edge: var(--msui-sys-color-border); --msui-comp-depth-level-front: 2; --msui-comp-depth-level-sheet: 1; --msui-comp-depth-overlap: var(--msui-ref-space-6); --msui-comp-depth-shadow-dialog: var(--msui-ref-shadow-high); --msui-comp-depth-shadow-float: var(--msui-ref-shadow-medium); --msui-comp-depth-shadow-rest: var(--msui-ref-shadow-low); --msui-comp-depth-sheet: var(--msui-sys-color-raised); --msui-comp-depth-well: var(--msui-sys-color-surface); --msui-comp-field-background: var(--msui-sys-color-page); --msui-comp-field-height: var(--msui-ref-size-control); --msui-comp-field-outline: var(--msui-sys-color-outline); --msui-comp-field-radius: var(--msui-ref-radius-sm); --msui-comp-surface-padding: var(--msui-ref-space-6); --msui-comp-surface-radius: var(--msui-ref-radius-lg); --msui-comp-surface-shadow: none; --msui-ref-color-accent-100: #d8ecef; --msui-ref-color-accent-200: #b4d7dd; --msui-ref-color-accent-300: #86bbc5; --msui-ref-color-accent-400: #5599a9; --msui-ref-color-accent-50: #ecf6f7; --msui-ref-color-accent-500: #367e8e; --msui-ref-color-accent-600: #286574; --msui-ref-color-accent-700: #204f5b; --msui-ref-color-accent-800: #1b3d47; --msui-ref-color-accent-950: #142a31; --msui-ref-color-neutral-100: #eaf0f2; --msui-ref-color-neutral-200: #d3dfe3; --msui-ref-color-neutral-300: #b2c5cc; --msui-ref-color-neutral-400: #8da6b0; --msui-ref-color-neutral-50: #f5f9fa; --msui-ref-color-neutral-500: #66828e; --msui-ref-color-neutral-600: #4b6571; --msui-ref-color-neutral-700: #354e59; --msui-ref-color-neutral-800: #253842; --msui-ref-color-neutral-950: #18252c; --msui-ref-font-family-display: "Bricolage Grotesque", sans-serif; --msui-sys-color-action: var(--msui-ref-color-accent-700); --msui-sys-color-action-active: var(--msui-ref-color-accent-950); --msui-sys-color-action-hover: var(--msui-ref-color-accent-800); --msui-sys-color-border: var(--msui-ref-color-neutral-200); --msui-sys-color-canvas: var(--msui-ref-color-neutral-100); --msui-sys-color-danger: var(--msui-ref-color-danger-light); --msui-sys-color-focus: var(--msui-ref-color-accent-700); --msui-sys-color-muted: var(--msui-ref-color-neutral-600); --msui-sys-color-nav: var(--msui-ref-color-neutral-950); --msui-sys-color-nav-muted: var(--msui-ref-color-neutral-300); --msui-sys-color-on-action: var(--msui-ref-color-neutral-50); --msui-sys-color-on-nav: var(--msui-ref-color-neutral-50); --msui-sys-color-outline: var(--msui-ref-color-neutral-500); --msui-sys-color-page: var(--msui-ref-color-neutral-50); --msui-sys-color-raised: var(--msui-ref-color-neutral-50); --msui-sys-color-selection: var(--msui-ref-color-accent-100); --msui-sys-color-success: var(--msui-ref-color-success-light); --msui-sys-color-surface: var(--msui-ref-color-neutral-100); --msui-sys-color-text: var(--msui-ref-color-neutral-950); --msui-sys-color-warning: var(--msui-ref-color-warning-light); } [data-msui-theme="dark"] [data-msui-creator="paul"], [data-msui-creator="paul"][data-msui-theme="dark"] { --msui-comp-button-font-size: var(--msui-ref-font-size-body); --msui-comp-button-gap: var(--msui-ref-space-2); --msui-comp-button-height: var(--msui-ref-size-target); --msui-comp-button-primary-container: var(--msui-sys-color-action); --msui-comp-button-primary-label: var(--msui-sys-color-on-action); --msui-comp-button-radius: var(--msui-ref-radius-md); --msui-comp-depth-canvas: var(--msui-sys-color-canvas); --msui-comp-depth-edge: var(--msui-sys-color-border); --msui-comp-depth-level-front: 2; --msui-comp-depth-level-sheet: 1; --msui-comp-depth-overlap: var(--msui-ref-space-6); --msui-comp-depth-shadow-dialog: var(--msui-ref-shadow-high); --msui-comp-depth-shadow-float: var(--msui-ref-shadow-medium); --msui-comp-depth-shadow-rest: var(--msui-ref-shadow-low); --msui-comp-depth-sheet: var(--msui-sys-color-raised); --msui-comp-depth-well: var(--msui-sys-color-surface); --msui-comp-field-background: var(--msui-sys-color-page); --msui-comp-field-height: var(--msui-ref-size-control); --msui-comp-field-outline: var(--msui-sys-color-outline); --msui-comp-field-radius: var(--msui-ref-radius-sm); --msui-comp-surface-padding: var(--msui-ref-space-6); --msui-comp-surface-radius: var(--msui-ref-radius-lg); --msui-comp-surface-shadow: none; --msui-sys-color-action: var(--msui-ref-color-accent-200); --msui-sys-color-action-active: var(--msui-ref-color-accent-50); --msui-sys-color-action-hover: var(--msui-ref-color-accent-100); --msui-sys-color-border: var(--msui-ref-color-neutral-600); --msui-sys-color-canvas: var(--msui-ref-color-neutral-950); --msui-sys-color-danger: var(--msui-ref-color-danger-dark); --msui-sys-color-focus: var(--msui-ref-color-accent-200); --msui-sys-color-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-nav: var(--msui-ref-color-neutral-950); --msui-sys-color-nav-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-on-action: var(--msui-ref-color-neutral-950); --msui-sys-color-on-nav: var(--msui-ref-color-neutral-50); --msui-sys-color-outline: var(--msui-ref-color-neutral-400); --msui-sys-color-page: var(--msui-ref-color-neutral-950); --msui-sys-color-raised: var(--msui-ref-color-neutral-700); --msui-sys-color-selection: var(--msui-ref-color-accent-800); --msui-sys-color-success: var(--msui-ref-color-success-dark); --msui-sys-color-surface: var(--msui-ref-color-neutral-800); --msui-sys-color-text: var(--msui-ref-color-neutral-50); --msui-sys-color-warning: var(--msui-ref-color-warning-dark); } @media (prefers-color-scheme: dark) { [data-msui-theme="auto"] [data-msui-creator="paul"], [data-msui-creator="paul"][data-msui-theme="auto"] { --msui-comp-button-font-size: var(--msui-ref-font-size-body); --msui-comp-button-gap: var(--msui-ref-space-2); --msui-comp-button-height: var(--msui-ref-size-target); --msui-comp-button-primary-container: var(--msui-sys-color-action); --msui-comp-button-primary-label: var(--msui-sys-color-on-action); --msui-comp-button-radius: var(--msui-ref-radius-md); --msui-comp-depth-canvas: var(--msui-sys-color-canvas); --msui-comp-depth-edge: var(--msui-sys-color-border); --msui-comp-depth-level-front: 2; --msui-comp-depth-level-sheet: 1; --msui-comp-depth-overlap: var(--msui-ref-space-6); --msui-comp-depth-shadow-dialog: var(--msui-ref-shadow-high); --msui-comp-depth-shadow-float: var(--msui-ref-shadow-medium); --msui-comp-depth-shadow-rest: var(--msui-ref-shadow-low); --msui-comp-depth-sheet: var(--msui-sys-color-raised); --msui-comp-depth-well: var(--msui-sys-color-surface); --msui-comp-field-background: var(--msui-sys-color-page); --msui-comp-field-height: var(--msui-ref-size-control); --msui-comp-field-outline: var(--msui-sys-color-outline); --msui-comp-field-radius: var(--msui-ref-radius-sm); --msui-comp-surface-padding: var(--msui-ref-space-6); --msui-comp-surface-radius: var(--msui-ref-radius-lg); --msui-comp-surface-shadow: none; --msui-sys-color-action: var(--msui-ref-color-accent-200); --msui-sys-color-action-active: var(--msui-ref-color-accent-50); --msui-sys-color-action-hover: var(--msui-ref-color-accent-100); --msui-sys-color-border: var(--msui-ref-color-neutral-600); --msui-sys-color-canvas: var(--msui-ref-color-neutral-950); --msui-sys-color-danger: var(--msui-ref-color-danger-dark); --msui-sys-color-focus: var(--msui-ref-color-accent-200); --msui-sys-color-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-nav: var(--msui-ref-color-neutral-950); --msui-sys-color-nav-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-on-action: var(--msui-ref-color-neutral-950); --msui-sys-color-on-nav: var(--msui-ref-color-neutral-50); --msui-sys-color-outline: var(--msui-ref-color-neutral-400); --msui-sys-color-page: var(--msui-ref-color-neutral-950); --msui-sys-color-raised: var(--msui-ref-color-neutral-700); --msui-sys-color-selection: var(--msui-ref-color-accent-800); --msui-sys-color-success: var(--msui-ref-color-success-dark); --msui-sys-color-surface: var(--msui-ref-color-neutral-800); --msui-sys-color-text: var(--msui-ref-color-neutral-50); --msui-sys-color-warning: var(--msui-ref-color-warning-dark); } } [data-msui-creator="nouveau"] { --msui-comp-button-font-size: var(--msui-ref-font-size-body); --msui-comp-button-gap: var(--msui-ref-space-2); --msui-comp-button-height: var(--msui-ref-size-target); --msui-comp-button-primary-container: var(--msui-sys-color-action); --msui-comp-button-primary-label: var(--msui-sys-color-on-action); --msui-comp-button-radius: var(--msui-ref-radius-md); --msui-comp-depth-canvas: var(--msui-sys-color-canvas); --msui-comp-depth-edge: var(--msui-sys-color-border); --msui-comp-depth-level-front: 2; --msui-comp-depth-level-sheet: 1; --msui-comp-depth-overlap: var(--msui-ref-space-6); --msui-comp-depth-shadow-dialog: var(--msui-ref-shadow-high); --msui-comp-depth-shadow-float: var(--msui-ref-shadow-medium); --msui-comp-depth-shadow-rest: var(--msui-ref-shadow-low); --msui-comp-depth-sheet: var(--msui-sys-color-raised); --msui-comp-depth-well: var(--msui-sys-color-surface); --msui-comp-field-background: var(--msui-sys-color-page); --msui-comp-field-height: var(--msui-ref-size-control); --msui-comp-field-outline: var(--msui-sys-color-outline); --msui-comp-field-radius: var(--msui-ref-radius-sm); --msui-comp-surface-padding: var(--msui-ref-space-6); --msui-comp-surface-radius: var(--msui-ref-radius-lg); --msui-comp-surface-shadow: none; --msui-ref-color-accent-100: #fce5dc; --msui-ref-color-accent-200: #f4c6b4; --msui-ref-color-accent-300: #e69d80; --msui-ref-color-accent-400: #d87859; --msui-ref-color-accent-50: #fff3ef; --msui-ref-color-accent-500: #c05b3e; --msui-ref-color-accent-600: #a44730; --msui-ref-color-accent-700: #873822; --msui-ref-color-accent-800: #6b2c1d; --msui-ref-color-accent-950: #442015; --msui-ref-color-neutral-100: #f4eee7; --msui-ref-color-neutral-200: #e7dacf; --msui-ref-color-neutral-300: #d0bca9; --msui-ref-color-neutral-400: #b59a81; --msui-ref-color-neutral-50: #fdf9f5; --msui-ref-color-neutral-500: #967c63; --msui-ref-color-neutral-600: #795f48; --msui-ref-color-neutral-700: #5e4733; --msui-ref-color-neutral-800: #443120; --msui-ref-color-neutral-950: #2c1f14; --msui-ref-font-family-display: "Bricolage Grotesque", sans-serif; --msui-sys-color-action: var(--msui-ref-color-accent-700); --msui-sys-color-action-active: var(--msui-ref-color-accent-950); --msui-sys-color-action-hover: var(--msui-ref-color-accent-800); --msui-sys-color-border: var(--msui-ref-color-neutral-200); --msui-sys-color-canvas: var(--msui-ref-color-neutral-100); --msui-sys-color-danger: var(--msui-ref-color-danger-light); --msui-sys-color-focus: var(--msui-ref-color-accent-700); --msui-sys-color-muted: var(--msui-ref-color-neutral-600); --msui-sys-color-nav: var(--msui-ref-color-neutral-950); --msui-sys-color-nav-muted: var(--msui-ref-color-neutral-300); --msui-sys-color-on-action: var(--msui-ref-color-neutral-50); --msui-sys-color-on-nav: var(--msui-ref-color-neutral-50); --msui-sys-color-outline: var(--msui-ref-color-neutral-500); --msui-sys-color-page: var(--msui-ref-color-neutral-50); --msui-sys-color-raised: var(--msui-ref-color-neutral-50); --msui-sys-color-selection: var(--msui-ref-color-accent-100); --msui-sys-color-success: var(--msui-ref-color-success-light); --msui-sys-color-surface: var(--msui-ref-color-neutral-100); --msui-sys-color-text: var(--msui-ref-color-neutral-950); --msui-sys-color-warning: var(--msui-ref-color-warning-light); } [data-msui-theme="dark"] [data-msui-creator="nouveau"], [data-msui-creator="nouveau"][data-msui-theme="dark"] { --msui-comp-button-font-size: var(--msui-ref-font-size-body); --msui-comp-button-gap: var(--msui-ref-space-2); --msui-comp-button-height: var(--msui-ref-size-target); --msui-comp-button-primary-container: var(--msui-sys-color-action); --msui-comp-button-primary-label: var(--msui-sys-color-on-action); --msui-comp-button-radius: var(--msui-ref-radius-md); --msui-comp-depth-canvas: var(--msui-sys-color-canvas); --msui-comp-depth-edge: var(--msui-sys-color-border); --msui-comp-depth-level-front: 2; --msui-comp-depth-level-sheet: 1; --msui-comp-depth-overlap: var(--msui-ref-space-6); --msui-comp-depth-shadow-dialog: var(--msui-ref-shadow-high); --msui-comp-depth-shadow-float: var(--msui-ref-shadow-medium); --msui-comp-depth-shadow-rest: var(--msui-ref-shadow-low); --msui-comp-depth-sheet: var(--msui-sys-color-raised); --msui-comp-depth-well: var(--msui-sys-color-surface); --msui-comp-field-background: var(--msui-sys-color-page); --msui-comp-field-height: var(--msui-ref-size-control); --msui-comp-field-outline: var(--msui-sys-color-outline); --msui-comp-field-radius: var(--msui-ref-radius-sm); --msui-comp-surface-padding: var(--msui-ref-space-6); --msui-comp-surface-radius: var(--msui-ref-radius-lg); --msui-comp-surface-shadow: none; --msui-sys-color-action: var(--msui-ref-color-accent-200); --msui-sys-color-action-active: var(--msui-ref-color-accent-50); --msui-sys-color-action-hover: var(--msui-ref-color-accent-100); --msui-sys-color-border: var(--msui-ref-color-neutral-600); --msui-sys-color-canvas: var(--msui-ref-color-neutral-950); --msui-sys-color-danger: var(--msui-ref-color-danger-dark); --msui-sys-color-focus: var(--msui-ref-color-accent-200); --msui-sys-color-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-nav: var(--msui-ref-color-neutral-950); --msui-sys-color-nav-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-on-action: var(--msui-ref-color-neutral-950); --msui-sys-color-on-nav: var(--msui-ref-color-neutral-50); --msui-sys-color-outline: var(--msui-ref-color-neutral-400); --msui-sys-color-page: var(--msui-ref-color-neutral-950); --msui-sys-color-raised: var(--msui-ref-color-neutral-700); --msui-sys-color-selection: var(--msui-ref-color-accent-800); --msui-sys-color-success: var(--msui-ref-color-success-dark); --msui-sys-color-surface: var(--msui-ref-color-neutral-800); --msui-sys-color-text: var(--msui-ref-color-neutral-50); --msui-sys-color-warning: var(--msui-ref-color-warning-dark); } @media (prefers-color-scheme: dark) { [data-msui-theme="auto"] [data-msui-creator="nouveau"], [data-msui-creator="nouveau"][data-msui-theme="auto"] { --msui-comp-button-font-size: var(--msui-ref-font-size-body); --msui-comp-button-gap: var(--msui-ref-space-2); --msui-comp-button-height: var(--msui-ref-size-target); --msui-comp-button-primary-container: var(--msui-sys-color-action); --msui-comp-button-primary-label: var(--msui-sys-color-on-action); --msui-comp-button-radius: var(--msui-ref-radius-md); --msui-comp-depth-canvas: var(--msui-sys-color-canvas); --msui-comp-depth-edge: var(--msui-sys-color-border); --msui-comp-depth-level-front: 2; --msui-comp-depth-level-sheet: 1; --msui-comp-depth-overlap: var(--msui-ref-space-6); --msui-comp-depth-shadow-dialog: var(--msui-ref-shadow-high); --msui-comp-depth-shadow-float: var(--msui-ref-shadow-medium); --msui-comp-depth-shadow-rest: var(--msui-ref-shadow-low); --msui-comp-depth-sheet: var(--msui-sys-color-raised); --msui-comp-depth-well: var(--msui-sys-color-surface); --msui-comp-field-background: var(--msui-sys-color-page); --msui-comp-field-height: var(--msui-ref-size-control); --msui-comp-field-outline: var(--msui-sys-color-outline); --msui-comp-field-radius: var(--msui-ref-radius-sm); --msui-comp-surface-padding: var(--msui-ref-space-6); --msui-comp-surface-radius: var(--msui-ref-radius-lg); --msui-comp-surface-shadow: none; --msui-sys-color-action: var(--msui-ref-color-accent-200); --msui-sys-color-action-active: var(--msui-ref-color-accent-50); --msui-sys-color-action-hover: var(--msui-ref-color-accent-100); --msui-sys-color-border: var(--msui-ref-color-neutral-600); --msui-sys-color-canvas: var(--msui-ref-color-neutral-950); --msui-sys-color-danger: var(--msui-ref-color-danger-dark); --msui-sys-color-focus: var(--msui-ref-color-accent-200); --msui-sys-color-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-nav: var(--msui-ref-color-neutral-950); --msui-sys-color-nav-muted: var(--msui-ref-color-neutral-200); --msui-sys-color-on-action: var(--msui-ref-color-neutral-950); --msui-sys-color-on-nav: var(--msui-ref-color-neutral-50); --msui-sys-color-outline: var(--msui-ref-color-neutral-400); --msui-sys-color-page: var(--msui-ref-color-neutral-950); --msui-sys-color-raised: var(--msui-ref-color-neutral-700); --msui-sys-color-selection: var(--msui-ref-color-accent-800); --msui-sys-color-success: var(--msui-ref-color-success-dark); --msui-sys-color-surface: var(--msui-ref-color-neutral-800); --msui-sys-color-text: var(--msui-ref-color-neutral-50); --msui-sys-color-warning: var(--msui-ref-color-warning-dark); } }