/** * WFS Warm Theme * ============== * A warm light alternative theme aligned with the current semantic token set. * * Usage in config/app.ini: * customTheme = "/resources/css/wfs-theme-warm.css" */ :root { /* ================================================================ Brand / Primary Colors — warm earth ================================================================ */ --wf-main-hsl: 30 33% 49%; --wf-main: hsl(var(--wf-main-hsl)); --wf-main-600-hsl: 28 37% 40%; --wf-main-600: hsl(var(--wf-main-600-hsl)); --wf-main-300-hsl: 42 54% 85%; --wf-main-300: hsl(var(--wf-main-300-hsl)); --wf-main-800-hsl: 33 57% 15%; --wf-main-800: hsl(var(--wf-main-800-hsl)); /* ================================================================ UI State Colors ================================================================ */ --wf-success-hsl: 134 61% 41%; --wf-success: hsl(var(--wf-success-hsl)); --wf-success-600-hsl: 134 65% 28%; --wf-success-600: hsl(var(--wf-success-600-hsl)); --wf-success-300-hsl: 134 41% 88%; --wf-success-300: hsl(var(--wf-success-300-hsl)); --wf-success-800-hsl: 134 35% 16%; --wf-success-800: hsl(var(--wf-success-800-hsl)); --wf-warning-hsl: 45 100% 51%; --wf-warning: hsl(var(--wf-warning-hsl)); --wf-warning-600-hsl: 38 90% 38%; --wf-warning-600: hsl(var(--wf-warning-600-hsl)); --wf-warning-300-hsl: 46 100% 90%; --wf-warning-300: hsl(var(--wf-warning-300-hsl)); --wf-warning-800-hsl: 40 60% 16%; --wf-warning-800: hsl(var(--wf-warning-800-hsl)); --wf-danger-hsl: 354 70% 54%; --wf-danger: hsl(var(--wf-danger-hsl)); --wf-danger-600-hsl: 354 75% 40%; --wf-danger-600: hsl(var(--wf-danger-600-hsl)); --wf-danger-300-hsl: 354 70% 91%; --wf-danger-300: hsl(var(--wf-danger-300-hsl)); --wf-danger-800-hsl: 354 55% 17%; --wf-danger-800: hsl(var(--wf-danger-800-hsl)); --wf-info-hsl: 188 78% 41%; --wf-info: hsl(var(--wf-info-hsl)); --wf-info-600-hsl: 188 80% 28%; --wf-info-600: hsl(var(--wf-info-600-hsl)); --wf-info-300-hsl: 189 53% 88%; --wf-info-300: hsl(var(--wf-info-300-hsl)); --wf-info-800-hsl: 189 45% 16%; --wf-info-800: hsl(var(--wf-info-800-hsl)); /* ================================================================ Grayscale ================================================================ */ --wf-gray-50: hsl(210 40% 98%); --wf-gray-100: hsl(210 40% 96%); --wf-gray-200: hsl(214 32% 91%); --wf-gray-300: hsl(213 27% 84%); --wf-gray-400: hsl(215 20% 65%); --wf-gray-500: hsl(215 16% 47%); --wf-gray-600: hsl(215 19% 35%); --wf-gray-700: hsl(215 25% 27%); --wf-gray-800: hsl(217 33% 17%); --wf-gray-900: hsl(222 47% 11%); /* ================================================================ Surfaces & Backgrounds ================================================================ */ --wf-body-bg: hsl(34 64% 98%); --wf-surface: hsl(0 0% 100%); --wf-surface-hover: hsl(41 59% 94%); --wf-surface-alt: hsl(41 59% 90%); --wf-surface-border: hsl(34 48% 79%); --wf-overlay-backdrop: hsl(29 41% 12% / 0.24); /* ================================================================ Semantic Component Tokens ================================================================ */ --wf-neutral-bg: hsl(34 64% 98%); --wf-neutral-bg-hover: hsl(41 59% 92%); --wf-neutral-border: hsl(34 48% 79%); --wf-neutral-text: hsl(29 41% 31%); --wf-neutral-text-strong: hsl(33 57% 15%); --wf-success-contrast: hsl(0 0% 100%); --wf-danger-contrast: hsl(0 0% 100%); --wf-nav-link-bg-hover: hsl(41 59% 92%); --wf-nav-link-text: hsl(29 41% 31%); --wf-nav-link-text-hover: hsl(33 57% 15%); --wf-nav-badge-bg: hsl(354 75% 40%); --wf-nav-badge-text: hsl(0 0% 100%); --wf-nav-shell-bg: linear-gradient(180deg, hsl(34 64% 98%), hsl(41 59% 92%)); --wf-menu-panel-bg: hsl(34 64% 99% / 0.98); --wf-menu-panel-border: hsl(34 48% 79%); --wf-filter-chip-bg: hsl(41 59% 90%); --wf-filter-chip-text: hsl(29 44% 25%); --wf-tab-bg: hsl(41 59% 90%); --wf-tab-border: hsl(34 48% 79%); --wf-tab-text: hsl(29 41% 31%); --wf-tab-active-bg: hsl(0 0% 100%); --wf-tab-active-text: hsl(28 37% 40%); --wf-footer-bg: linear-gradient(180deg, hsl(34 64% 98%), hsl(41 59% 90%)); --wf-field-bg: hsl(0 0% 100%); --wf-field-border: hsl(34 48% 79%); --wf-field-text: hsl(33 57% 15%); --wf-field-addon-bg: hsl(41 59% 90%); --wf-field-addon-text: hsl(29 41% 31%); --wf-field-action-bg: hsl(41 59% 90%); --wf-field-action-bg-hover: hsl(42 54% 85%); --wf-field-action-text: hsl(29 41% 31%); --wf-icon-on-surface: hsl(29 44% 25%); --wf-icon-on-solid: hsl(0 0% 100%); --wf-field-invalid-border: hsl(354 75% 40%); --wf-field-invalid-bg: hsl(354 70% 91%); --wf-field-invalid-text: hsl(354 55% 17%); --wf-file-trigger-bg: hsl(41 59% 90%); --wf-file-trigger-bg-hover: hsl(42 54% 85%); --wf-file-trigger-text: hsl(29 41% 31%); --wf-input-group-focus-ring: 0 0 0 2px hsl(28 37% 40% / 0.18); --wf-input-group-focus-border: hsl(28 37% 40%); --wf-table-row-hover: hsl(41 59% 94%); --wf-list-hover: hsl(41 59% 92%); --wf-data-item-bg: hsl(41 59% 92%); --wf-data-item-alt-bg: hsl(0 0% 100%); --wf-data-item-hover: hsl(42 54% 85%); --wf-report-sidebar-bg: hsl(0 0% 100%); --wf-report-sidebar-bg-alt: hsl(41 59% 90%); --wf-report-sidebar-header-bg: color-mix(in srgb, hsl(0 0% 100%) 85%, transparent); --wf-scrollbar-track: hsl(41 59% 90%); --wf-scrollbar-thumb: hsl(31 39% 62%); --wf-alert-warning-bg: hsl(42 54% 85%); --wf-alert-warning-border: hsl(38 90% 38%); --wf-alert-warning-text: hsl(33 57% 15%); --wf-alert-success-bg: hsl(134 41% 88%); --wf-alert-success-border: hsl(134 61% 41%); --wf-alert-success-text: hsl(134 35% 16%); --wf-alert-danger-bg: hsl(354 70% 91%); --wf-alert-danger-border: hsl(354 70% 54%); --wf-alert-danger-text: hsl(354 55% 17%); /* ================================================================ Typography ================================================================ */ --wf-font-body: "Noto Sans", Helvetica, Arial, sans-serif; --wf-font-display: "Noto Sans", Helvetica, Arial, sans-serif; --wf-font-color: hsl(33 57% 15%); --wf-font-color-light: hsl(29 41% 31%); /* ================================================================ Border Radius ================================================================ */ --wf-radius-sm: 0.25rem; --wf-radius: 0.375rem; --wf-radius-md: 0.5rem; --wf-radius-lg: 0.75rem; --wf-radius-xl: 1rem; --wf-radius-2xl: 1.5rem; --wf-radius-full: 9999px; /* ================================================================ Site Header ================================================================ */ --wf-header-bg: hsl(34 64% 98% / 0.94); --wf-header-border: hsl(34 48% 79% / 0.7); --wf-header-shadow: 0 10px 28px hsl(29 41% 18% / 0.12); /* ================================================================ Shadows ================================================================ */ --wf-shadow-soft: 0 4px 8px hsl(29 41% 18% / 0.1); --wf-shadow-strong: 0 8px 12px hsl(29 41% 18% / 0.25); /* ================================================================ Focus Ring ================================================================ */ --wf-focus-ring: 0 0 0 3px hsl(28 37% 40% / 0.18); }