/* ===================================================================== Treebay Design Tokens ===================================================================== This file has two sections: 1. BRAND COLOUR RAMPS (lines ~30–130) The single source of truth for every colour in the Treebay palette. Values are space-separated RGB channels so Tailwind opacity modifiers like bg-evergreen-700/90 work out of the box. Usage in plain CSS: rgb(var(--evergreen-700)) or: rgb(var(--evergreen-700) / 0.9) In Tailwind: bg-evergreen-700 or bg-evergreen-700/90 The Tailwind config in base.html maps these variable names to utility classes — it does not duplicate the actual colour values. 2. DAISYUI SEMANTIC THEME (lines ~140+) DaisyUI v5 uses named CSS custom properties in oklch format (--color-primary, --color-secondary, --color-base-100, …). These map brand colours to semantic roles so that DaisyUI component classes like btn-primary and bg-base-100 render in our brand colours. IMPORTANT: these oklch values are derived from the brand ramps above but cannot reference them (DaisyUI needs oklch, the ramps are RGB). If you change a brand colour, you must update both its RGB value in section 1 AND the corresponding oklch value(s) in section 2. Applied via . ===================================================================== */ [data-theme="treebay"] { color-scheme: light; /* ----------------------------------------------------------------- 1. BRAND COLOUR RAMPS — RGB channels (source of truth) ----------------------------------------------------------------- */ --evergreen-50: 240 245 243; --evergreen-100: 215 229 225; --evergreen-200: 176 207 201; --evergreen-300: 126 178 168; --evergreen-400: 76 142 131; --evergreen-500: 37 104 93; --evergreen-600: 12 81 70; --evergreen-700: 0 56 47; --evergreen-800: 0 46 38; --evergreen-900: 0 35 29; --new-growth-50: 249 253 235; --new-growth-100: 243 251 216; --new-growth-200: 236 248 196; --new-growth-300: 229 245 178; --new-growth-400: 223 254 162; --new-growth-500: 200 230 137; --new-growth-600: 170 205 111; --new-growth-700: 140 179 91; --new-growth-800: 94 140 70; --new-growth-900: 66 110 59; --golden-sap-50: 255 249 237; --golden-sap-100: 255 244 217; --golden-sap-200: 255 234 179; --golden-sap-300: 255 223 134; --golden-sap-400: 255 211 94; --golden-sap-500: 255 203 84; --golden-sap-600: 243 184 62; --golden-sap-700: 217 159 39; --golden-sap-800: 168 118 23; --golden-sap-900: 106 78 11; --birch-0: 255 255 255; --birch-50: 253 253 252; --birch-100: 250 249 248; --birch-200: 244 243 241; --birch-300: 236 235 231; --birch-400: 225 222 216; --birch-500: 209 206 199; --birch-600: 187 183 176; --birch-700: 162 157 149; --birch-800: 129 122 114; --birch-900: 89 84 78; --pine-50: 89 84 78; --pine-100: 77 71 66; --pine-200: 68 62 58; --pine-300: 59 53 49; --pine-400: 45 40 38; --pine-500: 38 35 33; --pine-600: 33 30 28; --pine-700: 28 25 23; --pine-800: 23 21 19; --pine-900: 18 16 15; /* Quality Ramps */ --quality-prima-50: 252 230 228; --quality-prima-100: 248 204 200; --quality-prima-200: 243 170 160; --quality-prima-300: 240 142 130; --quality-prima-400: 236 114 99; --quality-prima-500: 225 74 59; --quality-prima-600: 204 65 52; --quality-prima-700: 183 55 44; --quality-prima-800: 150 40 32; --quality-prima-900: 100 25 20; --quality-standard-50: 235 244 253; --quality-standard-100: 214 230 250; --quality-standard-200: 168 205 243; --quality-standard-300: 138 185 238; --quality-standard-400: 108 165 232; --quality-standard-500: 75 141 222; --quality-standard-600: 60 122 198; --quality-standard-700: 44 102 173; --quality-standard-800: 30 75 135; --quality-standard-900: 18 48 90; --quality-iii-50: 235 245 237; --quality-iii-100: 207 229 211; --quality-iii-200: 170 210 178; --quality-iii-300: 148 198 158; --quality-iii-400: 125 185 137; --quality-iii-500: 91 157 106; --quality-iii-600: 75 133 90; --quality-iii-700: 61 112 75; --quality-iii-800: 46 85 57; --quality-iii-900: 30 58 38; --quality-iv-50: 255 251 235; --quality-iv-100: 255 244 213; --quality-iv-200: 255 234 175; --quality-iv-300: 255 228 150; --quality-iv-400: 255 221 125; --quality-iv-500: 255 209 86; --quality-iv-600: 228 183 50; --quality-iv-700: 201 157 50; --quality-iv-800: 160 120 30; --quality-iv-900: 105 78 18; /* ----------------------------------------------------------------- 2. DAISYUI v5 SEMANTIC THEME — oklch format Maps brand colours to DaisyUI semantic roles. If you change a brand colour above, update the matching oklch value here too. Each comment shows which brand ramp it came from. ----------------------------------------------------------------- */ /* Primary → evergreen */ --color-primary: oklch(0.4716 0.0695 180.44); /* evergreen-500 */ --color-primary-content: oklch(0.9938 0.0013 106.42); /* birch-50 */ /* Secondary → golden-sap */ --color-secondary: oklch(0.8669 0.1456 84.94); /* golden-sap-500 */ --color-secondary-content: oklch(0.2816 0.0083 43.15); /* pine-400 */ /* Accent → new-growth */ --color-accent: oklch(0.9539 0.1210 123.83); /* new-growth-400 */ --color-accent-content: oklch(0.2816 0.0083 43.15); /* pine-400 */ /* Neutral → evergreen dark end */ --color-neutral: oklch(0.3048 0.0561 178.07); /* evergreen-700 */ --color-neutral-content: oklch(0.9938 0.0013 106.42); /* birch-50 */ /* Base → birch */ --color-base-100: oklch(0.9938 0.0013 106.42); /* birch-50 */ --color-base-200: oklch(0.9644 0.0029 84.56); /* birch-200 */ --color-base-300: oklch(0.9397 0.0055 95.10); /* birch-300 */ --color-base-content: oklch(0.2816 0.0083 43.15); /* pine-400 */ /* Feedback (not from brand ramps) */ --color-info: oklch(0.6643 0.0963 231.28); /* #4E9EC4 */ --color-info-content: oklch(0.9938 0.0013 106.42); --color-success: oklch(0.7046 0.1359 145.75); /* #63B66A */ --color-success-content: oklch(0.9938 0.0013 106.42); --color-warning: oklch(0.8257 0.1441 77.84); /* #F9B94A */ --color-warning-content: oklch(0.2816 0.0083 43.15); --color-error: oklch(0.6355 0.1751 29.07); /* #E15748 */ --color-error-content: oklch(0.9938 0.0013 106.42); /* DaisyUI v5 component radii and sizing */ --radius-box: 0.75rem; --radius-field: 0.375rem; --radius-selector: 0.375rem; --border: 1px; --depth: 1; --noise: 0; } [data-theme="treebay"] .tb-portal-shell { --depth: 0; } /* Exact copies of supplier-storefront TopNav, MainShell, Sidebar, and stats-card. */ [data-theme="treebay"] .navbar.tb-portal-topnav { box-shadow: 0 6px 12px rgba(10, 30, 20, 0.05); border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } [data-theme="treebay"] .tb-portal-main { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); border: none; } [data-theme="treebay"] .tb-portal-sidebar { box-shadow: 0 8px 16px rgba(45, 40, 38, 0.1); } [data-theme="treebay"] .tb-stats-card { box-shadow: 0 2px 4px rgba(45, 40, 38, 0.06); } /* DaisyUI v5 derives input borders from currentColor (base-content), which is pine-400 (near-black) in the treebay theme. Override form element borders with a softer evergreen tint instead. */ [data-theme="treebay"] :is(.input, .select, .textarea) { border-color: rgb(var(--evergreen-200)); } /* Focus ring: DaisyUI v5 uses a dark outline from base-content. Replace with a soft new-growth glow so focus feels on-brand. */ [data-theme="treebay"] :is(.input, .select, .textarea):focus, [data-theme="treebay"] :is(.input, .select, .textarea):focus-visible { border-color: rgb(var(--evergreen-400)); outline-color: rgb(var(--new-growth-200)); } /* Filled vs empty: give all fields with content a very subtle warm tint so users see at a glance which fields already have data. Works for both browser-autofilled and server-prefilled values consistently.