:root { --w-font-sans: "Manrope", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --w-font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --w-density-factor: 1; --w-color-white-10: #ffffff1a; --w-color-white-15: #ffffff26; --w-color-white-50: #ffffff80; --w-color-white-80: #fffc; --w-color-black-5: #0000000d; --w-color-black-10: #0000001a; --w-color-black-20: #0003; --w-color-black-25: #00000040; --w-color-black-35: #00000059; --w-color-black-50: #00000080; --w-color-black-hue: 0; --w-color-black-saturation: 0%; --w-color-black-lightness: 0%; --w-color-black: hsl(var(--w-color-black-hue) var(--w-color-black-saturation) var(--w-color-black-lightness)); --w-color-grey-50-hue: 210; --w-color-grey-50-saturation: 16.7%; --w-color-grey-50-lightness: 97.6%; --w-color-grey-50: hsl(var(--w-color-grey-50-hue) var(--w-color-grey-50-saturation) var(--w-color-grey-50-lightness)); --w-color-grey-100-hue: 210; --w-color-grey-100-saturation: 15.8%; --w-color-grey-100-lightness: 92.5%; --w-color-grey-100: hsl(var(--w-color-grey-100-hue) var(--w-color-grey-100-saturation) var(--w-color-grey-100-lightness)); --w-color-grey-150-hue: 210; --w-color-grey-150-saturation: 13.8%; --w-color-grey-150-lightness: 88.6%; --w-color-grey-150: hsl(var(--w-color-grey-150-hue) var(--w-color-grey-150-saturation) var(--w-color-grey-150-lightness)); --w-color-grey-200-hue: 210; --w-color-grey-200-saturation: 14%; --w-color-grey-200-lightness: 83.1%; --w-color-grey-200: hsl(var(--w-color-grey-200-hue) var(--w-color-grey-200-saturation) var(--w-color-grey-200-lightness)); --w-color-grey-400-hue: 210; --w-color-grey-400-saturation: 10.8%; --w-color-grey-400-lightness: 71%; --w-color-grey-400: hsl(var(--w-color-grey-400-hue) var(--w-color-grey-400-saturation) var(--w-color-grey-400-lightness)); --w-color-grey-500-hue: 208.2; --w-color-grey-500-saturation: 7.3%; --w-color-grey-500-lightness: 45.7%; --w-color-grey-500: hsl(var(--w-color-grey-500-hue) var(--w-color-grey-500-saturation) var(--w-color-grey-500-lightness)); --w-color-grey-600-hue: 210; --w-color-grey-600-saturation: 8.8%; --w-color-grey-600-lightness: 31.4%; --w-color-grey-600: hsl(var(--w-color-grey-600-hue) var(--w-color-grey-600-saturation) var(--w-color-grey-600-lightness)); --w-color-grey-700-hue: 210; --w-color-grey-700-saturation: 10.3%; --w-color-grey-700-lightness: 22.7%; --w-color-grey-700: hsl(var(--w-color-grey-700-hue) var(--w-color-grey-700-saturation) var(--w-color-grey-700-lightness)); --w-color-grey-800-hue: 0; --w-color-grey-800-saturation: 0%; --w-color-grey-800-lightness: 9.8%; --w-color-grey-800: hsl(var(--w-color-grey-800-hue) var(--w-color-grey-800-saturation) var(--w-color-grey-800-lightness)); --w-color-white-hue: 0; --w-color-white-saturation: 0%; --w-color-white-lightness: 100%; --w-color-white: hsl(var(--w-color-white-hue) var(--w-color-white-saturation) var(--w-color-white-lightness)); --w-color-primary-200-hue: 212.3; --w-color-primary-200-saturation: 14%; --w-color-primary-200-lightness: 18.2%; --w-color-primary-200: hsl(var(--w-color-primary-200-hue) var(--w-color-primary-200-saturation) var(--w-color-primary-200-lightness)); --w-color-primary-hue: 0; --w-color-primary-saturation: 0%; --w-color-primary-lightness: 9.8%; --w-color-primary: hsl(var(--w-color-primary-hue) var(--w-color-primary-saturation) var(--w-color-primary-lightness)); --w-color-secondary-50-hue: 40.7; --w-color-secondary-50-saturation: 44%; --w-color-secondary-50-lightness: 94%; --w-color-secondary-50: hsl(var(--w-color-secondary-50-hue) var(--w-color-secondary-50-saturation) var(--w-color-secondary-50-lightness)); --w-color-secondary-75-hue: 40.7; --w-color-secondary-75-saturation: 48%; --w-color-secondary-75-lightness: 86%; --w-color-secondary-75: hsl(var(--w-color-secondary-75-hue) var(--w-color-secondary-75-saturation) var(--w-color-secondary-75-lightness)); --w-color-secondary-100-hue: 40.7; --w-color-secondary-100-saturation: 52%; --w-color-secondary-100-lightness: 78%; --w-color-secondary-100: hsl(var(--w-color-secondary-100-hue) var(--w-color-secondary-100-saturation) var(--w-color-secondary-100-lightness)); --w-color-secondary-400-hue: 40.7; --w-color-secondary-400-saturation: 45%; --w-color-secondary-400-lightness: 60%; --w-color-secondary-400: hsl(var(--w-color-secondary-400-hue) var(--w-color-secondary-400-saturation) var(--w-color-secondary-400-lightness)); --w-color-secondary-600-hue: 40.7; --w-color-secondary-600-saturation: 42%; --w-color-secondary-600-lightness: 52%; --w-color-secondary-600: hsl(var(--w-color-secondary-600-hue) var(--w-color-secondary-600-saturation) var(--w-color-secondary-600-lightness)); --w-color-secondary-hue: 40.7; --w-color-secondary-saturation: 53.8%; --w-color-secondary-lightness: 69.4%; --w-color-secondary: hsl(var(--w-color-secondary-hue) var(--w-color-secondary-saturation) var(--w-color-secondary-lightness)); --w-color-info-50-hue: 204.1; --w-color-info-50-saturation: 80%; --w-color-info-50-lightness: 94%; --w-color-info-50: hsl(var(--w-color-info-50-hue) var(--w-color-info-50-saturation) var(--w-color-info-50-lightness)); --w-color-info-75-hue: 204.1; --w-color-info-75-saturation: 70%; --w-color-info-75-lightness: 84%; --w-color-info-75: hsl(var(--w-color-info-75-hue) var(--w-color-info-75-saturation) var(--w-color-info-75-lightness)); --w-color-info-100-hue: 204.1; --w-color-info-100-saturation: 69.9%; --w-color-info-100-lightness: 62%; --w-color-info-100: hsl(var(--w-color-info-100-hue) var(--w-color-info-100-saturation) var(--w-color-info-100-lightness)); --w-color-info-125-hue: 204.1; --w-color-info-125-saturation: 69.9%; --w-color-info-125-lightness: 53.1%; --w-color-info-125: hsl(var(--w-color-info-125-hue) var(--w-color-info-125-saturation) var(--w-color-info-125-lightness)); --w-color-positive-50-hue: 145.3; --w-color-positive-50-saturation: 55%; --w-color-positive-50-lightness: 92%; --w-color-positive-50: hsl(var(--w-color-positive-50-hue) var(--w-color-positive-50-saturation) var(--w-color-positive-50-lightness)); --w-color-positive-100-hue: 145.3; --w-color-positive-100-saturation: 63.4%; --w-color-positive-100-lightness: 41.8%; --w-color-positive-100: hsl(var(--w-color-positive-100-hue) var(--w-color-positive-100-saturation) var(--w-color-positive-100-lightness)); --w-color-warning-50-hue: 36.8; --w-color-warning-50-saturation: 90%; --w-color-warning-50-lightness: 93%; --w-color-warning-50: hsl(var(--w-color-warning-50-hue) var(--w-color-warning-50-saturation) var(--w-color-warning-50-lightness)); --w-color-warning-75-hue: 36.8; --w-color-warning-75-saturation: 90%; --w-color-warning-75-lightness: 74%; --w-color-warning-75: hsl(var(--w-color-warning-75-hue) var(--w-color-warning-75-saturation) var(--w-color-warning-75-lightness)); --w-color-warning-100-hue: 36.8; --w-color-warning-100-saturation: 90.4%; --w-color-warning-100-lightness: 51.2%; --w-color-warning-100: hsl(var(--w-color-warning-100-hue) var(--w-color-warning-100-saturation) var(--w-color-warning-100-lightness)); --w-color-critical-50-hue: 5.6; --w-color-critical-50-saturation: 74%; --w-color-critical-50-lightness: 93%; --w-color-critical-50: hsl(var(--w-color-critical-50-hue) var(--w-color-critical-50-saturation) var(--w-color-critical-50-lightness)); --w-color-critical-100-hue: 5.6; --w-color-critical-100-saturation: 70%; --w-color-critical-100-lightness: 62%; --w-color-critical-100: hsl(var(--w-color-critical-100-hue) var(--w-color-critical-100-saturation) var(--w-color-critical-100-lightness)); --w-color-critical-200-hue: 5.6; --w-color-critical-200-saturation: 63.4%; --w-color-critical-200-lightness: 46.1%; --w-color-critical-200: hsl(var(--w-color-critical-200-hue) var(--w-color-critical-200-saturation) var(--w-color-critical-200-lightness)); --w-color-surface-page: var(--w-color-grey-50); --w-color-surface-field: var(--w-color-white); --w-color-surface-field-inactive: var(--w-color-grey-50); --w-color-surface-header: var(--w-color-grey-50); --w-color-surface-menus: var(--w-color-grey-700); --w-color-surface-menu-item-active: var(--w-color-primary-200); --w-color-surface-tooltip: var(--w-color-primary-200); --w-color-surface-button-default: var(--w-color-primary); --w-color-surface-button-hover: var(--w-color-primary-200); --w-color-surface-button-inactive: var(--w-color-grey-400); --w-color-surface-button-outline-hover: var(--w-color-secondary-50); --w-color-surface-button-critical-hover: var(--w-color-critical-50); --w-color-surface-status-label: var(--w-color-info-50); --w-color-surface-info-panel: var(--w-color-info-50); --w-color-surface-dashboard-panel: var(--w-color-white); --w-color-text-button: var(--w-color-white); --w-color-text-label-menus-default: var(--w-color-white-80); --w-color-text-label-menus-active: var(--w-color-secondary); --w-color-text-label: var(--w-color-primary); --w-color-text-context: var(--w-color-grey-600); --w-color-text-meta: var(--w-color-grey-500); --w-color-text-placeholder: var(--w-color-grey-500); --w-color-text-link-default: var(--w-color-secondary-600); --w-color-text-link-hover: var(--w-color-secondary); --w-color-text-button-outline-default: var(--w-color-secondary-600); --w-color-text-button-outline-hover: var(--w-color-primary); --w-color-text-highlight: var(--w-color-secondary-75); --w-color-text-error: var(--w-color-critical-200); --w-color-text-button-critical-outline-hover: var(--w-color-critical-200); --w-color-text-status-label: var(--w-color-info-125); --w-color-text-link-info: var(--w-color-info-125); --w-color-icon-primary: var(--w-color-primary); --w-color-icon-primary-hover: var(--w-color-secondary-600); --w-color-icon-secondary: var(--w-color-grey-500); --w-color-icon-secondary-hover: var(--w-color-primary); --w-color-border-furniture: var(--w-color-grey-100); --w-color-border-button-small-outline-default: var(--w-color-grey-150); --w-color-border-field-default: var(--w-color-grey-200); --w-color-border-field-inactive: var(--w-color-grey-150); --w-color-border-field-hover: var(--w-color-grey-400); --w-color-border-button-outline-default: var(--w-color-secondary-600); --w-color-border-button-outline-hover: var(--w-color-secondary-400); --w-color-border-interactive-more-contrast: var(--w-color-grey-600); --w-color-border-interactive-more-contrast-hover: var(--w-color-primary); --w-color-border-interactive-more-contrast-dark-bg: var(--w-color-grey-150); --w-color-border-interactive-more-contrast-dark-bg-hover: var(--w-color-white); --w-color-border-furniture-more-contrast: var(--w-color-grey-200); --w-color-focus: #dbc087; --w-color-box-shadow-md: var(--w-color-black-25); color-scheme: light; } /* Wagtail 7 defines theme tokens on html.w-theme-* and in the userbar shadow context, so we mirror the base palette there instead of relying on :root only. */ html:is(.w-theme-system, .w-theme-light, .w-theme-dark), .w-userbar:is(.w-theme-system, .w-theme-light, .w-theme-dark), :host { --w-font-sans: "Manrope", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --w-font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --w-density-factor: 1; --w-color-white-10: #ffffff1a; --w-color-white-15: #ffffff26; --w-color-white-50: #ffffff80; --w-color-white-80: #fffc; --w-color-black-5: #0000000d; --w-color-black-10: #0000001a; --w-color-black-20: #0003; --w-color-black-25: #00000040; --w-color-black-35: #00000059; --w-color-black-50: #00000080; --w-color-black-hue: 0; --w-color-black-saturation: 0%; --w-color-black-lightness: 0%; --w-color-black: hsl(var(--w-color-black-hue) var(--w-color-black-saturation) var(--w-color-black-lightness)); --w-color-grey-50-hue: 210; --w-color-grey-50-saturation: 16.7%; --w-color-grey-50-lightness: 97.6%; --w-color-grey-50: hsl(var(--w-color-grey-50-hue) var(--w-color-grey-50-saturation) var(--w-color-grey-50-lightness)); --w-color-grey-100-hue: 210; --w-color-grey-100-saturation: 15.8%; --w-color-grey-100-lightness: 92.5%; --w-color-grey-100: hsl(var(--w-color-grey-100-hue) var(--w-color-grey-100-saturation) var(--w-color-grey-100-lightness)); --w-color-grey-150-hue: 210; --w-color-grey-150-saturation: 13.8%; --w-color-grey-150-lightness: 88.6%; --w-color-grey-150: hsl(var(--w-color-grey-150-hue) var(--w-color-grey-150-saturation) var(--w-color-grey-150-lightness)); --w-color-grey-200-hue: 210; --w-color-grey-200-saturation: 14%; --w-color-grey-200-lightness: 83.1%; --w-color-grey-200: hsl(var(--w-color-grey-200-hue) var(--w-color-grey-200-saturation) var(--w-color-grey-200-lightness)); --w-color-grey-400-hue: 210; --w-color-grey-400-saturation: 10.8%; --w-color-grey-400-lightness: 71%; --w-color-grey-400: hsl(var(--w-color-grey-400-hue) var(--w-color-grey-400-saturation) var(--w-color-grey-400-lightness)); --w-color-grey-500-hue: 208.2; --w-color-grey-500-saturation: 7.3%; --w-color-grey-500-lightness: 45.7%; --w-color-grey-500: hsl(var(--w-color-grey-500-hue) var(--w-color-grey-500-saturation) var(--w-color-grey-500-lightness)); --w-color-grey-600-hue: 210; --w-color-grey-600-saturation: 8.8%; --w-color-grey-600-lightness: 31.4%; --w-color-grey-600: hsl(var(--w-color-grey-600-hue) var(--w-color-grey-600-saturation) var(--w-color-grey-600-lightness)); --w-color-grey-700-hue: 210; --w-color-grey-700-saturation: 10.3%; --w-color-grey-700-lightness: 22.7%; --w-color-grey-700: hsl(var(--w-color-grey-700-hue) var(--w-color-grey-700-saturation) var(--w-color-grey-700-lightness)); --w-color-grey-800-hue: 0; --w-color-grey-800-saturation: 0%; --w-color-grey-800-lightness: 9.8%; --w-color-grey-800: hsl(var(--w-color-grey-800-hue) var(--w-color-grey-800-saturation) var(--w-color-grey-800-lightness)); --w-color-white-hue: 0; --w-color-white-saturation: 0%; --w-color-white-lightness: 100%; --w-color-white: hsl(var(--w-color-white-hue) var(--w-color-white-saturation) var(--w-color-white-lightness)); --w-color-primary-200-hue: 212.3; --w-color-primary-200-saturation: 14%; --w-color-primary-200-lightness: 18.2%; --w-color-primary-200: hsl(var(--w-color-primary-200-hue) var(--w-color-primary-200-saturation) var(--w-color-primary-200-lightness)); --w-color-primary-hue: 0; --w-color-primary-saturation: 0%; --w-color-primary-lightness: 9.8%; --w-color-primary: hsl(var(--w-color-primary-hue) var(--w-color-primary-saturation) var(--w-color-primary-lightness)); --w-color-secondary-50-hue: 40.7; --w-color-secondary-50-saturation: 44%; --w-color-secondary-50-lightness: 94%; --w-color-secondary-50: hsl(var(--w-color-secondary-50-hue) var(--w-color-secondary-50-saturation) var(--w-color-secondary-50-lightness)); --w-color-secondary-75-hue: 40.7; --w-color-secondary-75-saturation: 48%; --w-color-secondary-75-lightness: 86%; --w-color-secondary-75: hsl(var(--w-color-secondary-75-hue) var(--w-color-secondary-75-saturation) var(--w-color-secondary-75-lightness)); --w-color-secondary-100-hue: 40.7; --w-color-secondary-100-saturation: 52%; --w-color-secondary-100-lightness: 78%; --w-color-secondary-100: hsl(var(--w-color-secondary-100-hue) var(--w-color-secondary-100-saturation) var(--w-color-secondary-100-lightness)); --w-color-secondary-400-hue: 40.7; --w-color-secondary-400-saturation: 45%; --w-color-secondary-400-lightness: 60%; --w-color-secondary-400: hsl(var(--w-color-secondary-400-hue) var(--w-color-secondary-400-saturation) var(--w-color-secondary-400-lightness)); --w-color-secondary-600-hue: 40.7; --w-color-secondary-600-saturation: 42%; --w-color-secondary-600-lightness: 52%; --w-color-secondary-600: hsl(var(--w-color-secondary-600-hue) var(--w-color-secondary-600-saturation) var(--w-color-secondary-600-lightness)); --w-color-secondary-hue: 40.7; --w-color-secondary-saturation: 53.8%; --w-color-secondary-lightness: 69.4%; --w-color-secondary: hsl(var(--w-color-secondary-hue) var(--w-color-secondary-saturation) var(--w-color-secondary-lightness)); --w-color-info-50-hue: 204.1; --w-color-info-50-saturation: 80%; --w-color-info-50-lightness: 94%; --w-color-info-50: hsl(var(--w-color-info-50-hue) var(--w-color-info-50-saturation) var(--w-color-info-50-lightness)); --w-color-info-75-hue: 204.1; --w-color-info-75-saturation: 70%; --w-color-info-75-lightness: 84%; --w-color-info-75: hsl(var(--w-color-info-75-hue) var(--w-color-info-75-saturation) var(--w-color-info-75-lightness)); --w-color-info-100-hue: 204.1; --w-color-info-100-saturation: 69.9%; --w-color-info-100-lightness: 62%; --w-color-info-100: hsl(var(--w-color-info-100-hue) var(--w-color-info-100-saturation) var(--w-color-info-100-lightness)); --w-color-info-125-hue: 204.1; --w-color-info-125-saturation: 69.9%; --w-color-info-125-lightness: 53.1%; --w-color-info-125: hsl(var(--w-color-info-125-hue) var(--w-color-info-125-saturation) var(--w-color-info-125-lightness)); --w-color-positive-50-hue: 145.3; --w-color-positive-50-saturation: 55%; --w-color-positive-50-lightness: 92%; --w-color-positive-50: hsl(var(--w-color-positive-50-hue) var(--w-color-positive-50-saturation) var(--w-color-positive-50-lightness)); --w-color-positive-100-hue: 145.3; --w-color-positive-100-saturation: 63.4%; --w-color-positive-100-lightness: 41.8%; --w-color-positive-100: hsl(var(--w-color-positive-100-hue) var(--w-color-positive-100-saturation) var(--w-color-positive-100-lightness)); --w-color-warning-50-hue: 36.8; --w-color-warning-50-saturation: 90%; --w-color-warning-50-lightness: 93%; --w-color-warning-50: hsl(var(--w-color-warning-50-hue) var(--w-color-warning-50-saturation) var(--w-color-warning-50-lightness)); --w-color-warning-75-hue: 36.8; --w-color-warning-75-saturation: 90%; --w-color-warning-75-lightness: 74%; --w-color-warning-75: hsl(var(--w-color-warning-75-hue) var(--w-color-warning-75-saturation) var(--w-color-warning-75-lightness)); --w-color-warning-100-hue: 36.8; --w-color-warning-100-saturation: 90.4%; --w-color-warning-100-lightness: 51.2%; --w-color-warning-100: hsl(var(--w-color-warning-100-hue) var(--w-color-warning-100-saturation) var(--w-color-warning-100-lightness)); --w-color-critical-50-hue: 5.6; --w-color-critical-50-saturation: 74%; --w-color-critical-50-lightness: 93%; --w-color-critical-50: hsl(var(--w-color-critical-50-hue) var(--w-color-critical-50-saturation) var(--w-color-critical-50-lightness)); --w-color-critical-100-hue: 5.6; --w-color-critical-100-saturation: 70%; --w-color-critical-100-lightness: 62%; --w-color-critical-100: hsl(var(--w-color-critical-100-hue) var(--w-color-critical-100-saturation) var(--w-color-critical-100-lightness)); --w-color-critical-200-hue: 5.6; --w-color-critical-200-saturation: 63.4%; --w-color-critical-200-lightness: 46.1%; --w-color-critical-200: hsl(var(--w-color-critical-200-hue) var(--w-color-critical-200-saturation) var(--w-color-critical-200-lightness)); } html:is(.w-theme-system, .w-theme-light), .w-userbar:is(.w-theme-system, .w-theme-light), :host { --w-color-surface-page: var(--w-color-grey-50); --w-color-surface-field: var(--w-color-white); --w-color-surface-field-inactive: var(--w-color-grey-50); --w-color-surface-header: var(--w-color-grey-50); --w-color-surface-menus: var(--w-color-grey-700); --w-color-surface-menu-item-active: var(--w-color-primary-200); --w-color-surface-tooltip: var(--w-color-primary-200); --w-color-surface-button-default: var(--w-color-primary); --w-color-surface-button-hover: var(--w-color-primary-200); --w-color-surface-button-inactive: var(--w-color-grey-400); --w-color-surface-button-outline-hover: var(--w-color-secondary-50); --w-color-surface-button-critical-hover: var(--w-color-critical-50); --w-color-surface-status-label: var(--w-color-info-50); --w-color-surface-info-panel: var(--w-color-info-50); --w-color-surface-dashboard-panel: var(--w-color-white); --w-color-text-button: var(--w-color-white); --w-color-text-label-menus-default: var(--w-color-white-80); --w-color-text-label-menus-active: var(--w-color-secondary); --w-color-text-label: var(--w-color-primary); --w-color-text-context: var(--w-color-grey-600); --w-color-text-meta: var(--w-color-grey-500); --w-color-text-placeholder: var(--w-color-grey-500); --w-color-text-link-default: var(--w-color-secondary-600); --w-color-text-link-hover: var(--w-color-secondary); --w-color-text-button-outline-default: var(--w-color-secondary-600); --w-color-text-button-outline-hover: var(--w-color-primary); --w-color-text-highlight: var(--w-color-secondary-75); --w-color-text-error: var(--w-color-critical-200); --w-color-text-button-critical-outline-hover: var(--w-color-critical-200); --w-color-text-status-label: var(--w-color-info-125); --w-color-text-link-info: var(--w-color-info-125); --w-color-icon-primary: var(--w-color-primary); --w-color-icon-primary-hover: var(--w-color-secondary-600); --w-color-icon-secondary: var(--w-color-grey-500); --w-color-icon-secondary-hover: var(--w-color-primary); --w-color-border-furniture: var(--w-color-grey-100); --w-color-border-button-small-outline-default: var(--w-color-grey-150); --w-color-border-field-default: var(--w-color-grey-200); --w-color-border-field-inactive: var(--w-color-grey-150); --w-color-border-field-hover: var(--w-color-grey-400); --w-color-border-button-outline-default: var(--w-color-secondary-600); --w-color-border-button-outline-hover: var(--w-color-secondary-400); --w-color-border-interactive-more-contrast: var(--w-color-grey-600); --w-color-border-interactive-more-contrast-hover: var(--w-color-primary); --w-color-border-interactive-more-contrast-dark-bg: var(--w-color-grey-150); --w-color-border-interactive-more-contrast-dark-bg-hover: var(--w-color-white); --w-color-border-furniture-more-contrast: var(--w-color-grey-200); --w-color-focus: #dbc087; --w-color-box-shadow-md: var(--w-color-black-25); color-scheme: light; } /* Wagtail 7 dark theme override */ :root[data-theme="dark"], body.dark-theme, html.w-theme-dark, .w-userbar.w-theme-dark, :host([data-theme="dark"]) { --w-color-surface-page: var(--w-color-black); --w-color-surface-field: var(--w-color-primary); --w-color-surface-field-inactive: var(--w-color-primary-200); --w-color-surface-header: var(--w-color-primary); --w-color-surface-menus: var(--w-color-black); --w-color-surface-menu-item-active: var(--w-color-primary-200); --w-color-surface-tooltip: var(--w-color-grey-700); --w-color-surface-button-default: var(--w-color-secondary); --w-color-surface-button-hover: var(--w-color-secondary-400); --w-color-surface-button-inactive: var(--w-color-grey-600); --w-color-surface-button-outline-hover: var(--w-color-secondary-75); --w-color-surface-button-critical-hover: var(--w-color-critical-100); --w-color-surface-status-label: var(--w-color-info-75); --w-color-surface-info-panel: var(--w-color-info-75); --w-color-surface-dashboard-panel: var(--w-color-primary); --w-color-text-button: var(--w-color-primary); --w-color-text-label-menus-default: var(--w-color-white-80); --w-color-text-label-menus-active: var(--w-color-secondary); --w-color-text-label: var(--w-color-white); --w-color-text-context: var(--w-color-grey-200); --w-color-text-meta: var(--w-color-grey-400); --w-color-text-placeholder: var(--w-color-grey-500); --w-color-text-link-default: var(--w-color-secondary); --w-color-text-link-hover: var(--w-color-secondary-100); --w-color-text-button-outline-default: var(--w-color-secondary); --w-color-text-button-outline-hover: var(--w-color-primary); --w-color-text-highlight: var(--w-color-secondary-75); --w-color-text-error: var(--w-color-critical-100); --w-color-text-button-critical-outline-hover: var(--w-color-critical-100); --w-color-text-status-label: var(--w-color-info-100); --w-color-text-link-info: var(--w-color-info-100); --w-color-icon-primary: var(--w-color-secondary); --w-color-icon-primary-hover: var(--w-color-secondary-100); --w-color-icon-secondary: var(--w-color-grey-400); --w-color-icon-secondary-hover: var(--w-color-secondary); --w-color-border-furniture: var(--w-color-primary-200); --w-color-border-button-small-outline-default: var(--w-color-grey-600); --w-color-border-field-default: var(--w-color-grey-600); --w-color-border-field-inactive: var(--w-color-grey-700); --w-color-border-field-hover: var(--w-color-grey-500); --w-color-border-button-outline-default: var(--w-color-secondary-400); --w-color-border-button-outline-hover: var(--w-color-secondary); --w-color-border-interactive-more-contrast: var(--w-color-grey-400); --w-color-border-interactive-more-contrast-hover: var(--w-color-white); --w-color-border-interactive-more-contrast-dark-bg: var(--w-color-grey-400); --w-color-border-interactive-more-contrast-dark-bg-hover: var(--w-color-white); --w-color-border-furniture-more-contrast: var(--w-color-grey-600); --w-color-focus: #dbc087; --w-color-box-shadow-md: var(--w-color-black-50); color-scheme: dark; } .sidebar-panel--visible { box-shadow: 2px 0 32px var(--w-color-black-25); visibility: visible; } .c-page-explorer { backdrop-filter: blur(5px); background-color: color-mix( in srgb, var(--w-color-surface-menu-item-active) 95%, transparent ); }