/* * tokens.css * ============================================================ * STATIC - ships with the app, never changes between templates. * * Derives every color token from the 8 brand bases set in * colors.css using color-mix() at browser runtime. * Requires: colors.css loaded first (sets --brand-* bases). * * Brand model (colors.css v2 — Bootstrap 5 semantic alignment): * --brand-primary #0d6efd BS blue * --brand-secondary #6c757d BS gray * --brand-success #198754 * --brand-info #0dcaf0 * --brand-warning #ffc107 (this slot used to be called --brand-tertiary; the name was * later reused below for a genuinely optional, tenant-set third * brand colour — a different thing to this one) * --brand-danger #dc3545 * --brand-light #f8f9fa * --brand-dark #212529 * * color-mix() baseline: Chrome 111+, Firefox 113+, Safari 16.2+ * Available since May 2023. Baseline Widely Available Nov 2025. * ~95% global browser coverage. * * @supports fallback at bottom of file covers older browsers * by loading pre-computed literal values from theme.css (the * Angular build bakes the default brand into theme.css, which * loads before this file - so unsupporting browsers already * have valid values from theme.css). * * color-mix formula mirrors _theme.scss exactly: * tint(color, pct) → color-mix(in srgb, var(--base) (100-pct)%, white) * shade(color, pct) → color-mix(in srgb, var(--base) (100-pct)%, black) * alpha(color, a) → color-mix(in srgb, var(--base) (a*100)%, transparent) * blend(a, b, pct) → color-mix(in srgb, var(--b) pct%, var(--a)) * ============================================================ */ @layer tokens { :root { /* =========================================================== 1. BRAND PRIMARY SCALE tint: color-mix(in srgb, VAR (100-pct)%, white) shade: color-mix(in srgb, VAR (100-pct)%, black) 600 = base stop (no mixing) =========================================================== */ /* tint($brand-primary, 92%) - 8% primary, 92% white */ --brand-primary-50: color-mix(in srgb, var(--brand-primary) 8%, white); /* tint 82% - 18% primary */ --brand-primary-100: color-mix(in srgb, var(--brand-primary) 18%, white); /* tint 65% - 35% primary */ --brand-primary-200: color-mix(in srgb, var(--brand-primary) 35%, white); /* tint 48% - 52% primary */ --brand-primary-300: color-mix(in srgb, var(--brand-primary) 52%, white); /* tint 28% - 72% primary */ --brand-primary-400: color-mix(in srgb, var(--brand-primary) 72%, white); /* tint 12% - 88% primary */ --brand-primary-500: color-mix(in srgb, var(--brand-primary) 88%, white); /* base stop */ --brand-primary-600: var(--brand-primary); /* shade($brand-primary, 15%) - 85% primary, 15% black */ --brand-primary-700: color-mix(in srgb, var(--brand-primary) 85%, black); /* shade 32% */ --brand-primary-800: color-mix(in srgb, var(--brand-primary) 68%, black); /* shade 52% */ --brand-primary-900: color-mix(in srgb, var(--brand-primary) 48%, black); /* shade 70% */ --brand-primary-950: color-mix(in srgb, var(--brand-primary) 30%, black); /* =========================================================== 2. BRAND SECONDARY SCALE =========================================================== */ --brand-secondary-50: color-mix(in srgb, var(--brand-secondary) 8%, white); --brand-secondary-100: color-mix(in srgb, var(--brand-secondary) 18%, white); --brand-secondary-200: color-mix(in srgb, var(--brand-secondary) 35%, white); --brand-secondary-300: color-mix(in srgb, var(--brand-secondary) 52%, white); --brand-secondary-400: color-mix(in srgb, var(--brand-secondary) 72%, white); --brand-secondary-500: color-mix(in srgb, var(--brand-secondary) 88%, white); --brand-secondary-600: var(--brand-secondary); --brand-secondary-700: color-mix(in srgb, var(--brand-secondary) 85%, black); --brand-secondary-800: color-mix(in srgb, var(--brand-secondary) 68%, black); --brand-secondary-900: color-mix(in srgb, var(--brand-secondary) 48%, black); --brand-secondary-950: color-mix(in srgb, var(--brand-secondary) 30%, black); /* =========================================================== 2b. BRAND TERTIARY SCALE Optional — colors.css gives --brand-tertiary a fallback value same as primary/secondary, so this scale always resolves to something, even for a tenant with no tertiary color set. =========================================================== */ --brand-tertiary-50: color-mix(in srgb, var(--brand-tertiary) 8%, white); --brand-tertiary-100: color-mix(in srgb, var(--brand-tertiary) 18%, white); --brand-tertiary-200: color-mix(in srgb, var(--brand-tertiary) 35%, white); --brand-tertiary-300: color-mix(in srgb, var(--brand-tertiary) 52%, white); --brand-tertiary-400: color-mix(in srgb, var(--brand-tertiary) 72%, white); --brand-tertiary-500: color-mix(in srgb, var(--brand-tertiary) 88%, white); --brand-tertiary-600: var(--brand-tertiary); --brand-tertiary-700: color-mix(in srgb, var(--brand-tertiary) 85%, black); --brand-tertiary-800: color-mix(in srgb, var(--brand-tertiary) 68%, black); --brand-tertiary-900: color-mix(in srgb, var(--brand-tertiary) 48%, black); --brand-tertiary-950: color-mix(in srgb, var(--brand-tertiary) 30%, black); /* =========================================================== 3. BRAND WARNING SCALE (#ffc107 → BS warning, replaces tertiary) =========================================================== */ --brand-warning-50: color-mix(in srgb, var(--brand-warning) 8%, white); --brand-warning-100: color-mix(in srgb, var(--brand-warning) 18%, white); --brand-warning-200: color-mix(in srgb, var(--brand-warning) 35%, white); --brand-warning-300: color-mix(in srgb, var(--brand-warning) 52%, white); --brand-warning-400: color-mix(in srgb, var(--brand-warning) 72%, white); --brand-warning-500: color-mix(in srgb, var(--brand-warning) 88%, white); --brand-warning-600: var(--brand-warning); --brand-warning-700: color-mix(in srgb, var(--brand-warning) 85%, black); --brand-warning-800: color-mix(in srgb, var(--brand-warning) 68%, black); --brand-warning-900: color-mix(in srgb, var(--brand-warning) 48%, black); --brand-warning-950: color-mix(in srgb, var(--brand-warning) 30%, black); /* =========================================================== 3b. BRAND SUCCESS SCALE (#198754) =========================================================== */ --brand-success-50: color-mix(in srgb, var(--brand-success) 8%, white); --brand-success-100: color-mix(in srgb, var(--brand-success) 18%, white); --brand-success-200: color-mix(in srgb, var(--brand-success) 35%, white); --brand-success-300: color-mix(in srgb, var(--brand-success) 52%, white); --brand-success-400: color-mix(in srgb, var(--brand-success) 72%, white); --brand-success-500: color-mix(in srgb, var(--brand-success) 88%, white); --brand-success-600: var(--brand-success); --brand-success-700: color-mix(in srgb, var(--brand-success) 85%, black); --brand-success-800: color-mix(in srgb, var(--brand-success) 68%, black); --brand-success-900: color-mix(in srgb, var(--brand-success) 48%, black); --brand-success-950: color-mix(in srgb, var(--brand-success) 30%, black); /* =========================================================== 3c. BRAND INFO SCALE (#0dcaf0) =========================================================== */ --brand-info-50: color-mix(in srgb, var(--brand-info) 8%, white); --brand-info-100: color-mix(in srgb, var(--brand-info) 18%, white); --brand-info-200: color-mix(in srgb, var(--brand-info) 35%, white); --brand-info-300: color-mix(in srgb, var(--brand-info) 52%, white); --brand-info-400: color-mix(in srgb, var(--brand-info) 72%, white); --brand-info-500: color-mix(in srgb, var(--brand-info) 88%, white); --brand-info-600: var(--brand-info); --brand-info-700: color-mix(in srgb, var(--brand-info) 85%, black); --brand-info-800: color-mix(in srgb, var(--brand-info) 68%, black); --brand-info-900: color-mix(in srgb, var(--brand-info) 48%, black); --brand-info-950: color-mix(in srgb, var(--brand-info) 30%, black); /* =========================================================== 3d. BRAND DANGER SCALE (#dc3545) =========================================================== */ --brand-danger-50: color-mix(in srgb, var(--brand-danger) 8%, white); --brand-danger-100: color-mix(in srgb, var(--brand-danger) 18%, white); --brand-danger-200: color-mix(in srgb, var(--brand-danger) 35%, white); --brand-danger-300: color-mix(in srgb, var(--brand-danger) 52%, white); --brand-danger-400: color-mix(in srgb, var(--brand-danger) 72%, white); --brand-danger-500: color-mix(in srgb, var(--brand-danger) 88%, white); --brand-danger-600: var(--brand-danger); --brand-danger-700: color-mix(in srgb, var(--brand-danger) 85%, black); --brand-danger-800: color-mix(in srgb, var(--brand-danger) 68%, black); --brand-danger-900: color-mix(in srgb, var(--brand-danger) 48%, black); --brand-danger-950: color-mix(in srgb, var(--brand-danger) 30%, black); /* =========================================================== 3e. BRAND DARK SCALE (#212529) =========================================================== */ --brand-dark-50: color-mix(in srgb, var(--brand-dark) 8%, white); --brand-dark-100: color-mix(in srgb, var(--brand-dark) 18%, white); --brand-dark-200: color-mix(in srgb, var(--brand-dark) 35%, white); --brand-dark-300: color-mix(in srgb, var(--brand-dark) 52%, white); --brand-dark-400: color-mix(in srgb, var(--brand-dark) 72%, white); --brand-dark-500: color-mix(in srgb, var(--brand-dark) 88%, white); --brand-dark-600: var(--brand-dark); --brand-dark-700: color-mix(in srgb, var(--brand-dark) 85%, black); --brand-dark-800: color-mix(in srgb, var(--brand-dark) 68%, black); --brand-dark-900: color-mix(in srgb, var(--brand-dark) 48%, black); --brand-dark-950: color-mix(in srgb, var(--brand-dark) 30%, black); /* =========================================================== 3f. BRAND LIGHT SCALE (#f8f9fa) Light is near-white; tints stay very pale. =========================================================== */ --brand-light-50: color-mix(in srgb, var(--brand-light) 8%, white); --brand-light-100: color-mix(in srgb, var(--brand-light) 18%, white); --brand-light-200: color-mix(in srgb, var(--brand-light) 35%, white); --brand-light-300: var(--brand-light); --brand-light-700: color-mix(in srgb, var(--brand-light) 85%, black); --brand-light-800: color-mix(in srgb, var(--brand-light) 68%, black); --brand-light-900: color-mix(in srgb, var(--brand-light) 48%, black); --brand-light-950: color-mix(in srgb, var(--brand-light) 30%, black); /* =========================================================== 4. EXTRA COLOR SCALES (static - same for all templates) These use literal base colors, not brand vars. =========================================================== */ --red-50: color-mix(in srgb, var(--color-red) 8%, white); --red-100: color-mix(in srgb, var(--color-red) 18%, white); --red-200: color-mix(in srgb, var(--color-red) 35%, white); --red-300: color-mix(in srgb, var(--color-red) 52%, white); --red-400: color-mix(in srgb, var(--color-red) 72%, white); --red-500: color-mix(in srgb, var(--color-red) 88%, white); --red-600: var(--color-red); --red-700: color-mix(in srgb, var(--color-red) 85%, black); --red-800: color-mix(in srgb, var(--color-red) 68%, black); --red-900: color-mix(in srgb, var(--color-red) 48%, black); --red-950: color-mix(in srgb, var(--color-red) 30%, black); --crimson-50: color-mix(in srgb, var(--color-crimson) 8%, white); --crimson-100: color-mix(in srgb, var(--color-crimson) 18%, white); --crimson-200: color-mix(in srgb, var(--color-crimson) 35%, white); --crimson-300: color-mix(in srgb, var(--color-crimson) 52%, white); --crimson-400: color-mix(in srgb, var(--color-crimson) 72%, white); --crimson-500: color-mix(in srgb, var(--color-crimson) 88%, white); --crimson-600: var(--color-crimson); --crimson-700: color-mix(in srgb, var(--color-crimson) 85%, black); --crimson-800: color-mix(in srgb, var(--color-crimson) 68%, black); --crimson-900: color-mix(in srgb, var(--color-crimson) 48%, black); --crimson-950: color-mix(in srgb, var(--color-crimson) 30%, black); --blue-50: color-mix(in srgb, var(--color-blue) 8%, white); --blue-100: color-mix(in srgb, var(--color-blue) 18%, white); --blue-200: color-mix(in srgb, var(--color-blue) 35%, white); --blue-300: color-mix(in srgb, var(--color-blue) 52%, white); --blue-400: color-mix(in srgb, var(--color-blue) 72%, white); --blue-500: color-mix(in srgb, var(--color-blue) 88%, white); --blue-600: var(--color-blue); --blue-700: color-mix(in srgb, var(--color-blue) 85%, black); --blue-800: color-mix(in srgb, var(--color-blue) 68%, black); --blue-900: color-mix(in srgb, var(--color-blue) 48%, black); --blue-950: color-mix(in srgb, var(--color-blue) 30%, black); --indigo-50: color-mix(in srgb, var(--color-indigo) 8%, white); --indigo-100: color-mix(in srgb, var(--color-indigo) 18%, white); --indigo-200: color-mix(in srgb, var(--color-indigo) 35%, white); --indigo-300: color-mix(in srgb, var(--color-indigo) 52%, white); --indigo-400: color-mix(in srgb, var(--color-indigo) 72%, white); --indigo-500: color-mix(in srgb, var(--color-indigo) 88%, white); --indigo-600: var(--color-indigo); --indigo-700: color-mix(in srgb, var(--color-indigo) 85%, black); --indigo-800: color-mix(in srgb, var(--color-indigo) 68%, black); --indigo-900: color-mix(in srgb, var(--color-indigo) 48%, black); --indigo-950: color-mix(in srgb, var(--color-indigo) 30%, black); --purple-50: color-mix(in srgb, var(--color-purple) 8%, white); --purple-100: color-mix(in srgb, var(--color-purple) 18%, white); --purple-200: color-mix(in srgb, var(--color-purple) 35%, white); --purple-300: color-mix(in srgb, var(--color-purple) 52%, white); --purple-400: color-mix(in srgb, var(--color-purple) 72%, white); --purple-500: color-mix(in srgb, var(--color-purple) 88%, white); --purple-600: var(--color-purple); --purple-700: color-mix(in srgb, var(--color-purple) 85%, black); --purple-800: color-mix(in srgb, var(--color-purple) 68%, black); --purple-900: color-mix(in srgb, var(--color-purple) 48%, black); --purple-950: color-mix(in srgb, var(--color-purple) 30%, black); --pink-50: color-mix(in srgb, var(--color-pink) 8%, white); --pink-100: color-mix(in srgb, var(--color-pink) 18%, white); --pink-200: color-mix(in srgb, var(--color-pink) 35%, white); --pink-300: color-mix(in srgb, var(--color-pink) 52%, white); --pink-400: color-mix(in srgb, var(--color-pink) 72%, white); --pink-500: color-mix(in srgb, var(--color-pink) 88%, white); --pink-600: var(--color-pink); --pink-700: color-mix(in srgb, var(--color-pink) 85%, black); --pink-800: color-mix(in srgb, var(--color-pink) 68%, black); --pink-900: color-mix(in srgb, var(--color-pink) 48%, black); --pink-950: color-mix(in srgb, var(--color-pink) 30%, black); --cyan-50: color-mix(in srgb, var(--color-cyan) 8%, white); --cyan-100: color-mix(in srgb, var(--color-cyan) 18%, white); --cyan-200: color-mix(in srgb, var(--color-cyan) 35%, white); --cyan-300: color-mix(in srgb, var(--color-cyan) 52%, white); --cyan-400: color-mix(in srgb, var(--color-cyan) 72%, white); --cyan-500: color-mix(in srgb, var(--color-cyan) 88%, white); --cyan-600: var(--color-cyan); --cyan-700: color-mix(in srgb, var(--color-cyan) 85%, black); --cyan-800: color-mix(in srgb, var(--color-cyan) 68%, black); --cyan-900: color-mix(in srgb, var(--color-cyan) 48%, black); --cyan-950: color-mix(in srgb, var(--color-cyan) 30%, black); --teal-50: color-mix(in srgb, var(--color-teal) 8%, white); --teal-100: color-mix(in srgb, var(--color-teal) 18%, white); --teal-200: color-mix(in srgb, var(--color-teal) 35%, white); --teal-300: color-mix(in srgb, var(--color-teal) 52%, white); --teal-400: color-mix(in srgb, var(--color-teal) 72%, white); --teal-500: color-mix(in srgb, var(--color-teal) 88%, white); --teal-600: var(--color-teal); --teal-700: color-mix(in srgb, var(--color-teal) 85%, black); --teal-800: color-mix(in srgb, var(--color-teal) 68%, black); --teal-900: color-mix(in srgb, var(--color-teal) 48%, black); --teal-950: color-mix(in srgb, var(--color-teal) 30%, black); --green-50: color-mix(in srgb, var(--color-green) 8%, white); --green-100: color-mix(in srgb, var(--color-green) 18%, white); --green-200: color-mix(in srgb, var(--color-green) 35%, white); --green-300: color-mix(in srgb, var(--color-green) 52%, white); --green-400: color-mix(in srgb, var(--color-green) 72%, white); --green-500: color-mix(in srgb, var(--color-green) 88%, white); --green-600: var(--color-green); --green-700: color-mix(in srgb, var(--color-green) 85%, black); --green-800: color-mix(in srgb, var(--color-green) 68%, black); --green-900: color-mix(in srgb, var(--color-green) 48%, black); --green-950: color-mix(in srgb, var(--color-green) 30%, black); --lime-50: color-mix(in srgb, var(--color-lime) 8%, white); --lime-100: color-mix(in srgb, var(--color-lime) 18%, white); --lime-200: color-mix(in srgb, var(--color-lime) 35%, white); --lime-300: color-mix(in srgb, var(--color-lime) 52%, white); --lime-400: color-mix(in srgb, var(--color-lime) 72%, white); --lime-500: color-mix(in srgb, var(--color-lime) 88%, white); --lime-600: var(--color-lime); --lime-700: color-mix(in srgb, var(--color-lime) 85%, black); --lime-800: color-mix(in srgb, var(--color-lime) 68%, black); --lime-900: color-mix(in srgb, var(--color-lime) 48%, black); --lime-950: color-mix(in srgb, var(--color-lime) 30%, black); --amber-50: color-mix(in srgb, var(--color-amber) 8%, white); --amber-100: color-mix(in srgb, var(--color-amber) 18%, white); --amber-200: color-mix(in srgb, var(--color-amber) 35%, white); --amber-300: color-mix(in srgb, var(--color-amber) 52%, white); --amber-400: color-mix(in srgb, var(--color-amber) 72%, white); --amber-500: color-mix(in srgb, var(--color-amber) 88%, white); --amber-600: var(--color-amber); --amber-700: color-mix(in srgb, var(--color-amber) 85%, black); --amber-800: color-mix(in srgb, var(--color-amber) 68%, black); --amber-900: color-mix(in srgb, var(--color-amber) 48%, black); --amber-950: color-mix(in srgb, var(--color-amber) 30%, black); --orange-50: color-mix(in srgb, var(--color-orange) 8%, white); --orange-100: color-mix(in srgb, var(--color-orange) 18%, white); --orange-200: color-mix(in srgb, var(--color-orange) 35%, white); --orange-300: color-mix(in srgb, var(--color-orange) 52%, white); --orange-400: color-mix(in srgb, var(--color-orange) 72%, white); --orange-500: color-mix(in srgb, var(--color-orange) 88%, white); --orange-600: var(--color-orange); --orange-700: color-mix(in srgb, var(--color-orange) 85%, black); --orange-800: color-mix(in srgb, var(--color-orange) 68%, black); --orange-900: color-mix(in srgb, var(--color-orange) 48%, black); --orange-950: color-mix(in srgb, var(--color-orange) 30%, black); --rose-50: color-mix(in srgb, var(--color-rose) 8%, white); --rose-100: color-mix(in srgb, var(--color-rose) 18%, white); --rose-200: color-mix(in srgb, var(--color-rose) 35%, white); --rose-300: color-mix(in srgb, var(--color-rose) 52%, white); --rose-400: color-mix(in srgb, var(--color-rose) 72%, white); --rose-500: color-mix(in srgb, var(--color-rose) 88%, white); --rose-600: var(--color-rose); --rose-700: color-mix(in srgb, var(--color-rose) 85%, black); --rose-800: color-mix(in srgb, var(--color-rose) 68%, black); --rose-900: color-mix(in srgb, var(--color-rose) 48%, black); --rose-950: color-mix(in srgb, var(--color-rose) 30%, black); --violet-50: color-mix(in srgb, var(--color-violet) 8%, white); --violet-100: color-mix(in srgb, var(--color-violet) 18%, white); --violet-200: color-mix(in srgb, var(--color-violet) 35%, white); --violet-300: color-mix(in srgb, var(--color-violet) 52%, white); --violet-400: color-mix(in srgb, var(--color-violet) 72%, white); --violet-500: color-mix(in srgb, var(--color-violet) 88%, white); --violet-600: var(--color-violet); --violet-700: color-mix(in srgb, var(--color-violet) 85%, black); --violet-800: color-mix(in srgb, var(--color-violet) 68%, black); --violet-900: color-mix(in srgb, var(--color-violet) 48%, black); --violet-950: color-mix(in srgb, var(--color-violet) 30%, black); --fuchsia-50: color-mix(in srgb, var(--color-fuchsia) 8%, white); --fuchsia-100: color-mix(in srgb, var(--color-fuchsia) 18%, white); --fuchsia-200: color-mix(in srgb, var(--color-fuchsia) 35%, white); --fuchsia-300: color-mix(in srgb, var(--color-fuchsia) 52%, white); --fuchsia-400: color-mix(in srgb, var(--color-fuchsia) 72%, white); --fuchsia-500: color-mix(in srgb, var(--color-fuchsia) 88%, white); --fuchsia-600: var(--color-fuchsia); --fuchsia-700: color-mix(in srgb, var(--color-fuchsia) 85%, black); --fuchsia-800: color-mix(in srgb, var(--color-fuchsia) 68%, black); --fuchsia-900: color-mix(in srgb, var(--color-fuchsia) 48%, black); --fuchsia-950: color-mix(in srgb, var(--color-fuchsia) 30%, black); /* =========================================================== 5. BRAND ALPHA STACKS alpha(color, a) → color-mix(in srgb, var(--base) (a*100)%, transparent) =========================================================== */ --brand-primary-a05: color-mix(in srgb, var(--brand-primary) 5%, transparent); --brand-primary-a10: color-mix(in srgb, var(--brand-primary) 10%, transparent); --brand-primary-a15: color-mix(in srgb, var(--brand-primary) 15%, transparent); --brand-primary-a20: color-mix(in srgb, var(--brand-primary) 20%, transparent); --brand-primary-a30: color-mix(in srgb, var(--brand-primary) 30%, transparent); --brand-primary-a40: color-mix(in srgb, var(--brand-primary) 40%, transparent); --brand-primary-a50: color-mix(in srgb, var(--brand-primary) 50%, transparent); --brand-primary-a60: color-mix(in srgb, var(--brand-primary) 60%, transparent); --brand-primary-a70: color-mix(in srgb, var(--brand-primary) 70%, transparent); --brand-primary-a80: color-mix(in srgb, var(--brand-primary) 80%, transparent); --brand-primary-a90: color-mix(in srgb, var(--brand-primary) 90%, transparent); --brand-secondary-a05: color-mix(in srgb, var(--brand-secondary) 5%, transparent); --brand-secondary-a10: color-mix(in srgb, var(--brand-secondary) 10%, transparent); --brand-secondary-a15: color-mix(in srgb, var(--brand-secondary) 15%, transparent); --brand-secondary-a20: color-mix(in srgb, var(--brand-secondary) 20%, transparent); --brand-secondary-a30: color-mix(in srgb, var(--brand-secondary) 30%, transparent); --brand-secondary-a40: color-mix(in srgb, var(--brand-secondary) 40%, transparent); --brand-secondary-a50: color-mix(in srgb, var(--brand-secondary) 50%, transparent); --brand-secondary-a60: color-mix(in srgb, var(--brand-secondary) 60%, transparent); --brand-secondary-a70: color-mix(in srgb, var(--brand-secondary) 70%, transparent); --brand-secondary-a80: color-mix(in srgb, var(--brand-secondary) 80%, transparent); --brand-secondary-a90: color-mix(in srgb, var(--brand-secondary) 90%, transparent); --brand-tertiary-a05: color-mix(in srgb, var(--brand-tertiary) 5%, transparent); --brand-tertiary-a10: color-mix(in srgb, var(--brand-tertiary) 10%, transparent); --brand-tertiary-a15: color-mix(in srgb, var(--brand-tertiary) 15%, transparent); --brand-tertiary-a20: color-mix(in srgb, var(--brand-tertiary) 20%, transparent); --brand-tertiary-a30: color-mix(in srgb, var(--brand-tertiary) 30%, transparent); --brand-tertiary-a40: color-mix(in srgb, var(--brand-tertiary) 40%, transparent); --brand-tertiary-a50: color-mix(in srgb, var(--brand-tertiary) 50%, transparent); --brand-tertiary-a60: color-mix(in srgb, var(--brand-tertiary) 60%, transparent); --brand-tertiary-a70: color-mix(in srgb, var(--brand-tertiary) 70%, transparent); --brand-tertiary-a80: color-mix(in srgb, var(--brand-tertiary) 80%, transparent); --brand-tertiary-a90: color-mix(in srgb, var(--brand-tertiary) 90%, transparent); --brand-warning-a05: color-mix(in srgb, var(--brand-warning) 5%, transparent); --brand-warning-a10: color-mix(in srgb, var(--brand-warning) 10%, transparent); --brand-warning-a15: color-mix(in srgb, var(--brand-warning) 15%, transparent); --brand-warning-a20: color-mix(in srgb, var(--brand-warning) 20%, transparent); --brand-warning-a30: color-mix(in srgb, var(--brand-warning) 30%, transparent); --brand-warning-a40: color-mix(in srgb, var(--brand-warning) 40%, transparent); --brand-warning-a50: color-mix(in srgb, var(--brand-warning) 50%, transparent); --brand-warning-a60: color-mix(in srgb, var(--brand-warning) 60%, transparent); --brand-warning-a70: color-mix(in srgb, var(--brand-warning) 70%, transparent); --brand-warning-a80: color-mix(in srgb, var(--brand-warning) 80%, transparent); --brand-warning-a90: color-mix(in srgb, var(--brand-warning) 90%, transparent); /* Alpha stacks for new brand scales */ --brand-success-a05: color-mix(in srgb, var(--brand-success) 5%, transparent); --brand-success-a10: color-mix(in srgb, var(--brand-success) 10%, transparent); --brand-success-a20: color-mix(in srgb, var(--brand-success) 20%, transparent); --brand-success-a30: color-mix(in srgb, var(--brand-success) 30%, transparent); --brand-info-a05: color-mix(in srgb, var(--brand-info) 5%, transparent); --brand-info-a10: color-mix(in srgb, var(--brand-info) 10%, transparent); --brand-info-a20: color-mix(in srgb, var(--brand-info) 20%, transparent); --brand-info-a30: color-mix(in srgb, var(--brand-info) 30%, transparent); --brand-danger-a05: color-mix(in srgb, var(--brand-danger) 5%, transparent); --brand-danger-a10: color-mix(in srgb, var(--brand-danger) 10%, transparent); --brand-danger-a20: color-mix(in srgb, var(--brand-danger) 20%, transparent); --brand-danger-a30: color-mix(in srgb, var(--brand-danger) 30%, transparent); --brand-dark-a05: color-mix(in srgb, var(--brand-dark) 5%, transparent); --brand-dark-a10: color-mix(in srgb, var(--brand-dark) 10%, transparent); --brand-dark-a20: color-mix(in srgb, var(--brand-dark) 20%, transparent); --brand-dark-a30: color-mix(in srgb, var(--brand-dark) 30%, transparent); /* Extra color alpha stacks */ --red-a05: color-mix(in srgb, var(--color-red) 5%, transparent); --red-a10: color-mix(in srgb, var(--color-red) 10%, transparent); --red-a20: color-mix(in srgb, var(--color-red) 20%, transparent); --red-a30: color-mix(in srgb, var(--color-red) 30%, transparent); --red-a50: color-mix(in srgb, var(--color-red) 50%, transparent); --blue-a05: color-mix(in srgb, var(--color-blue) 5%, transparent); --blue-a10: color-mix(in srgb, var(--color-blue) 10%, transparent); --blue-a20: color-mix(in srgb, var(--color-blue) 20%, transparent); --blue-a30: color-mix(in srgb, var(--color-blue) 30%, transparent); --blue-a50: color-mix(in srgb, var(--color-blue) 50%, transparent); --green-a05: color-mix(in srgb, var(--color-green) 5%, transparent); --green-a10: color-mix(in srgb, var(--color-green) 10%, transparent); --green-a20: color-mix(in srgb, var(--color-green) 20%, transparent); --green-a30: color-mix(in srgb, var(--color-green) 30%, transparent); --green-a50: color-mix(in srgb, var(--color-green) 50%, transparent); /* =========================================================== 6. BLEND TOKENS blend(a, b, pct) = color-mix(in srgb, b pct%, a) Mirrors $blends map in _theme.scss exactly. =========================================================== */ /* blend($brand-primary, $brand-secondary, 50%) */ --blend-cr-navy: color-mix(in srgb, var(--brand-secondary) 50%, var(--brand-primary)); /* shade(blend(...), 30%) - shade 30% of the blend */ --blend-cr-navy-dk: color-mix(in srgb, var(--blend-cr-navy) 70%, black); /* blend($brand-secondary, $brand-warning, 30%) */ --blend-navy-gold: color-mix(in srgb, var(--brand-warning) 30%, var(--brand-secondary)); /* blend($brand-primary, $brand-warning, 40%) */ --blend-cr-gold: color-mix(in srgb, var(--brand-warning) 40%, var(--brand-primary)); /* blend(blend($brand-primary,$brand-secondary,50%), $brand-warning, 20%) */ --blend-tricolor: color-mix(in srgb, var(--brand-warning) 20%, var(--blend-cr-navy)); /* =========================================================== 7. GRADIENT TOKENS color-mix() used inline - no cross-var references inside gradient values to avoid same-block resolution issues. =========================================================== */ /* Brand direction pairs */ --grad-cr-navy: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%); --grad-navy-cr: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 100%); --grad-navy-gold: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-warning) 100%); --grad-gold-cr: linear-gradient(135deg, var(--brand-warning) 0%, var(--brand-primary) 100%); --grad-cr-gold: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-warning) 100%); --grad-tricolor: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 55%, var(--brand-warning) 100%); --grad-tricolor-rev: linear-gradient(135deg, var(--brand-warning) 0%, var(--brand-secondary) 45%, var(--brand-primary) 100%); /* Soft monochrome - shade/tint inlined as color-mix() */ --grad-cr-soft: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 70%, black) 0%, var(--brand-primary) 50%, color-mix(in srgb, var(--brand-primary) 28%, white) 100%); --grad-navy-soft: linear-gradient(135deg, color-mix(in srgb, var(--brand-secondary) 60%, black) 0%, var(--brand-secondary) 50%, color-mix(in srgb, var(--brand-secondary) 28%, white) 100%); --grad-gold-soft: linear-gradient(135deg, color-mix(in srgb, var(--brand-warning) 70%, black) 0%, var(--brand-warning) 50%, color-mix(in srgb, var(--brand-warning) 52%, white) 100%); /* Pale surface backgrounds */ --grad-pale-warm: linear-gradient(160deg, color-mix(in srgb, var(--brand-primary) 8%, white) 0%, color-mix(in srgb, var(--brand-warning) 10%, white) 100%); --grad-pale-cool: linear-gradient(160deg, color-mix(in srgb, var(--brand-secondary) 8%, white) 0%, color-mix(in srgb, var(--brand-primary) 6%, white) 100%); --grad-pale-tri: linear-gradient(160deg, color-mix(in srgb, var(--brand-primary) 8%, white) 0%, color-mix(in srgb, var(--brand-secondary) 8%, white) 50%, color-mix(in srgb, var(--brand-warning) 12%, white) 100%); /* Static extra-pair gradients (non-brand, never change) */ --grad-blue-indigo: linear-gradient(135deg, var(--color-blue) 0%, var(--color-indigo) 100%); --grad-purple-fuchsia: linear-gradient(135deg, var(--color-purple) 0%, var(--color-fuchsia) 100%); --grad-teal-cyan: linear-gradient(135deg, var(--color-teal) 0%, var(--color-cyan) 100%); --grad-green-teal: linear-gradient(135deg, var(--color-green) 0%, var(--color-teal) 100%); --grad-amber-orange: linear-gradient(135deg, var(--color-amber) 0%, var(--color-orange) 100%); --grad-rose-cr: linear-gradient(135deg, var(--color-rose) 0%, var(--color-crimson) 100%); --grad-violet-purple: linear-gradient(135deg, var(--color-violet) 0%, var(--color-purple) 100%); /* =========================================================== 8. SHADOW TOKENS alpha($secondary, n) → color-mix(in srgb, var(--brand-secondary) n%, transparent) alpha($primary, n) → color-mix(in srgb, var(--brand-primary) n%, transparent) =========================================================== */ --shadow-xs: 0 1px 2px color-mix(in srgb, var(--brand-secondary) 5%, transparent); --shadow-sm: 0 1px 3px color-mix(in srgb, var(--brand-secondary) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--brand-secondary) 6%, transparent); --shadow-md: 0 4px 6px color-mix(in srgb, var(--brand-secondary) 7%, transparent), 0 2px 4px color-mix(in srgb, var(--brand-secondary) 5%, transparent); --shadow-lg: 0 10px 15px color-mix(in srgb, var(--brand-secondary) 10%, transparent), 0 4px 6px color-mix(in srgb, var(--brand-secondary) 5%, transparent); --shadow-xl: 0 20px 25px color-mix(in srgb, var(--brand-secondary) 10%, transparent), 0 10px 10px color-mix(in srgb, var(--brand-secondary) 4%, transparent); --shadow-2xl: 0 25px 50px color-mix(in srgb, var(--brand-secondary) 15%, transparent); --shadow-inner: inset 0 2px 4px color-mix(in srgb, var(--brand-secondary) 6%, transparent); --shadow-brand: 0 8px 24px color-mix(in srgb, var(--brand-primary) 35%, transparent); --shadow-glow: 0 0 20px color-mix(in srgb, var(--brand-primary) 25%, transparent); /* =========================================================== 9. SEMANTIC TOKENS Mirrors _theme.scss output-css-vars() semantic section. =========================================================== */ --color-bg: #f4f4f4; --color-surface: #ffffff; /* tint($brand-primary, 95%) → 5% primary, 95% white */ --color-bg-subtle: color-mix(in srgb, var(--brand-primary) 5%, white); /* tint($brand-secondary, 95%) */ --color-surface-2: color-mix(in srgb, var(--brand-secondary) 5%, white); /* shade($brand-secondary, 85%) → 15% secondary, 85% black */ --color-text: color-mix(in srgb, var(--brand-secondary) 15%, black); /* tint($brand-secondary, 30%) → 70% secondary, 30% white */ --color-text-muted: color-mix(in srgb, var(--brand-secondary) 70%, white); /* $brand-secondary */ --color-heading: var(--brand-secondary); /* $brand-primary */ --color-accent: var(--brand-primary); /* Fixed, never flips with light/dark — text/icon colour for anything sitting on a brand-coloured background (a solid button, an active nav-pill, a checked checkbox's own checkmark). --color-surface is NOT safe for this: it now flips to a dark value in dark mode, since it means "the page/card surface colour", not "white". */ --color-on-accent: #ffffff; /* $brand-danger — dedicated danger semantic */ --color-accent-dark: var(--brand-danger); /* $brand-warning */ --color-secondary: var(--brand-warning); /* tint($brand-secondary, 80%) → 20% secondary, 80% white */ --color-border: color-mix(in srgb, var(--brand-secondary) 20%, white); /* tint($brand-secondary, 90%) → 10% secondary, 90% white */ --color-border-subtle: color-mix(in srgb, var(--brand-secondary) 10%, white); /* =========================================================== 10. THEME SECTION CLASS TOKENS Mirrors generate-themes() / theme-class() mixin. Each section class exposes --background-color, --default-color etc. via its own selector so they don't conflict in :root. =========================================================== */ } /* =========================================================== 9b. SEMANTIC TOKENS — dark variant Site-wide light/dark mode, toggled by [data-bs-theme="dark"] on (see wwwroot/js/theme-toggle.js). Only the semantic layer flips — --brand-primary/--brand-secondary/--color-accent and --color-accent-dark/--color-secondary stay exactly as :root set them, same "brand colours don't change with mode" rule the source template pack's own theme.css already follows. Same color-mix() idiom as the light derivation above, just mixing toward black for surfaces and toward white for text instead of the other way round. Deliberately NOT wrapped in its own @layer tokens — this sits inside the file's single outer @layer tokens block (opened near the top, closed near the bottom), and nesting a second @layer tokens {} here would create a sub-layer ("tokens.tokens"), not reopen the same flat layer — which silently lost the cascade to the plain :root block above. =========================================================== */ [data-bs-theme="dark"] { --color-bg: color-mix(in srgb, var(--brand-secondary) 12%, black); --color-surface: color-mix(in srgb, var(--brand-secondary) 20%, black); --color-bg-subtle: color-mix(in srgb, var(--brand-primary) 10%, black); --color-surface-2: color-mix(in srgb, var(--brand-secondary) 28%, black); --color-text: color-mix(in srgb, var(--brand-secondary) 10%, white); --color-text-muted: color-mix(in srgb, var(--brand-secondary) 35%, white); --color-heading: color-mix(in srgb, var(--brand-secondary) 5%, white); --color-border: color-mix(in srgb, var(--brand-secondary) 40%, black); --color-border-subtle: color-mix(in srgb, var(--brand-secondary) 30%, black); } /* ── .dark-background ────────────────────────────────────────── $bg : shade($brand-secondary, 85%) $text : tint($brand-secondary, 60%) $heading : white $accent : $brand-warning $secondary: tint($brand-primary, 30%) $surface : shade($brand-secondary, 60%) */ .dark-background { --background-color: color-mix(in srgb, var(--brand-secondary) 15%, black); --default-color: color-mix(in srgb, var(--brand-secondary) 40%, white); --heading-color: #ffffff; --accent-color: var(--brand-warning); --secondary-color: color-mix(in srgb, var(--brand-primary) 28%, white); --surface-color: color-mix(in srgb, var(--brand-secondary) 40%, black); --contrast-color: color-mix(in srgb, var(--brand-secondary) 15%, black); --accent-tint-10: color-mix(in srgb, var(--brand-warning) 10%, transparent); --accent-tint-15: color-mix(in srgb, var(--brand-warning) 15%, transparent); --accent-tint-20: color-mix(in srgb, var(--brand-warning) 20%, transparent); --accent-tint-40: color-mix(in srgb, var(--brand-warning) 40%, transparent); --accent-light: color-mix(in srgb, var(--brand-warning) 25%, white); --accent-dark: color-mix(in srgb, var(--brand-warning) 75%, black); --secondary-tint: color-mix(in srgb, var(--brand-primary) 15%, transparent); --border-subtle: color-mix(in srgb, var(--default-color) 10%, transparent); --border-default: color-mix(in srgb, var(--default-color) 20%, transparent); --border-strong: color-mix(in srgb, var(--default-color) 40%, transparent); background-color: var(--background-color); color: var(--default-color); } /* ── .light-background ───────────────────────────────────────── $bg : tint(mix($brand-primary,$brand-warning,90%), 97%) $text : shade($brand-secondary, 85%) $heading : $brand-dark $accent : $brand-primary $secondary: shade($brand-warning, 30%) $surface : white */ .light-background { --background-color: color-mix(in srgb, color-mix(in srgb, var(--brand-warning) 10%, var(--brand-primary)) 3%, white); --default-color: color-mix(in srgb, var(--brand-secondary) 15%, black); --heading-color: var(--brand-dark); --accent-color: var(--brand-primary); --secondary-color: color-mix(in srgb, var(--brand-warning) 70%, black); --surface-color: #ffffff; --contrast-color: #ffffff; --accent-tint-10: color-mix(in srgb, var(--brand-primary) 10%, transparent); --accent-tint-15: color-mix(in srgb, var(--brand-primary) 15%, transparent); --accent-tint-20: color-mix(in srgb, var(--brand-primary) 20%, transparent); --accent-tint-40: color-mix(in srgb, var(--brand-primary) 40%, transparent); --accent-light: color-mix(in srgb, var(--brand-primary) 25%, white); --accent-dark: color-mix(in srgb, var(--brand-primary) 75%, black); --secondary-tint: color-mix(in srgb, var(--brand-warning) 15%, transparent); --border-subtle: color-mix(in srgb, var(--default-color) 10%, transparent); --border-default: color-mix(in srgb, var(--default-color) 20%, transparent); --border-strong: color-mix(in srgb, var(--default-color) 40%, transparent); background-color: var(--background-color); color: var(--default-color); } /* ── .accent-background ──────────────────────────────────────── $bg : $brand-primary $text : tint($brand-primary, 82%) $heading : white $accent : $brand-warning $secondary: tint($brand-primary, 48%) $surface : shade($brand-primary, 15%) */ .accent-background { --background-color: var(--brand-primary); --default-color: color-mix(in srgb, var(--brand-primary) 18%, white); --heading-color: #ffffff; --accent-color: var(--brand-warning); --secondary-color: color-mix(in srgb, var(--brand-primary) 52%, white); --surface-color: color-mix(in srgb, var(--brand-primary) 85%, black); --contrast-color: color-mix(in srgb, var(--brand-secondary) 15%, black); --accent-tint-10: color-mix(in srgb, var(--brand-warning) 10%, transparent); --accent-tint-15: color-mix(in srgb, var(--brand-warning) 15%, transparent); --accent-tint-20: color-mix(in srgb, var(--brand-warning) 20%, transparent); --accent-tint-40: color-mix(in srgb, var(--brand-warning) 40%, transparent); --accent-light: color-mix(in srgb, var(--brand-warning) 25%, white); --accent-dark: color-mix(in srgb, var(--brand-warning) 75%, black); --secondary-tint: color-mix(in srgb, var(--brand-primary) 15%, transparent); --border-subtle: color-mix(in srgb, var(--default-color) 10%, transparent); --border-default: color-mix(in srgb, var(--default-color) 20%, transparent); --border-strong: color-mix(in srgb, var(--default-color) 40%, transparent); background-color: var(--background-color); color: var(--default-color); } /* ── .navy-background ────────────────────────────────────────── $bg : $brand-secondary $text : tint($brand-secondary, 60%) $heading : white $accent : $brand-warning $secondary: tint($brand-primary, 30%) $surface : shade($brand-secondary, 40%) */ .navy-background { --background-color: var(--brand-secondary); --default-color: color-mix(in srgb, var(--brand-secondary) 40%, white); --heading-color: #ffffff; --accent-color: var(--brand-warning); --secondary-color: color-mix(in srgb, var(--brand-primary) 28%, white); --surface-color: color-mix(in srgb, var(--brand-secondary) 60%, black); --contrast-color: color-mix(in srgb, var(--brand-secondary) 15%, black); --accent-tint-10: color-mix(in srgb, var(--brand-warning) 10%, transparent); --accent-tint-15: color-mix(in srgb, var(--brand-warning) 15%, transparent); --accent-tint-20: color-mix(in srgb, var(--brand-warning) 20%, transparent); --accent-tint-40: color-mix(in srgb, var(--brand-warning) 40%, transparent); --accent-light: color-mix(in srgb, var(--brand-warning) 25%, white); --accent-dark: color-mix(in srgb, var(--brand-warning) 75%, black); --secondary-tint: color-mix(in srgb, var(--brand-primary) 15%, transparent); --border-subtle: color-mix(in srgb, var(--default-color) 10%, transparent); --border-default: color-mix(in srgb, var(--default-color) 20%, transparent); --border-strong: color-mix(in srgb, var(--default-color) 40%, transparent); background-color: var(--background-color); color: var(--default-color); } /* ── .warning-background ────────────────────────────────────────── $bg : tint($brand-warning, 85%) $text : shade($brand-warning, 70%) $heading : $brand-dark $accent : $brand-primary $secondary: shade($brand-warning, 30%) $surface : white */ .warning-background { --background-color: color-mix(in srgb, var(--brand-warning) 15%, white); --default-color: color-mix(in srgb, var(--brand-warning) 30%, black); --heading-color: var(--brand-dark); --accent-color: var(--brand-primary); --secondary-color: color-mix(in srgb, var(--brand-warning) 70%, black); --surface-color: #ffffff; --contrast-color: #ffffff; --accent-tint-10: color-mix(in srgb, var(--brand-primary) 10%, transparent); --accent-tint-15: color-mix(in srgb, var(--brand-primary) 15%, transparent); --accent-tint-20: color-mix(in srgb, var(--brand-primary) 20%, transparent); --accent-tint-40: color-mix(in srgb, var(--brand-primary) 40%, transparent); --accent-light: color-mix(in srgb, var(--brand-primary) 25%, white); --accent-dark: color-mix(in srgb, var(--brand-primary) 75%, black); --secondary-tint: color-mix(in srgb, var(--brand-warning) 15%, transparent); --border-subtle: color-mix(in srgb, var(--default-color) 10%, transparent); --border-default: color-mix(in srgb, var(--default-color) 20%, transparent); --border-strong: color-mix(in srgb, var(--default-color) 40%, transparent); background-color: var(--background-color); color: var(--default-color); } /* Heading colors for all section classes */ .dark-background h1,.dark-background h2,.dark-background h3, .dark-background h4,.dark-background h5,.dark-background h6, .accent-background h1,.accent-background h2,.accent-background h3, .accent-background h4,.accent-background h5,.accent-background h6, .navy-background h1,.navy-background h2,.navy-background h3, .navy-background h4,.navy-background h5,.navy-background h6 { color: #ffffff; } .light-background h1,.light-background h2,.light-background h3, .light-background h4,.light-background h5,.light-background h6 { color: var(--brand-dark); } .warning-background h1,.warning-background h2,.warning-background h3, .warning-background h4,.warning-background h5,.warning-background h6 { color: var(--brand-dark); } } /* end @layer tokens */ /* =========================================================== @supports fallback Browsers that cannot parse color-mix() already have valid values from theme.css (Angular build bakes the default brand). This block is ignored by modern browsers (they parsed the @layer above successfully) and only activates for old browsers that need explicit fallbacks for critical tokens only. =========================================================== */ @supports not (color: color-mix(in srgb, red, blue)) { :root { /* Critical semantic tokens - literal fallbacks */ --color-accent: var(--brand-primary, #8c000b); --color-heading: var(--brand-secondary, #012c60); --color-secondary: var(--brand-warning, #f6ba2a); --color-accent-dark: #6f0009; --color-text: #010a16; --color-text-muted: #4d6b90; --color-border: #ccd5df; --color-border-subtle: #e6eaef; --color-bg-subtle: #f9f2f3; --color-surface-2: #f2f4f7; /* Critical brand scale stops used by bs5-overrides.css */ --brand-primary-50: #f6ebeb; --brand-primary-100: #ead1d3; --brand-primary-200: #d7a6aa; --brand-primary-700: #770009; --brand-primary-800: #5f0007; --brand-primary-900: #430005; --brand-primary-950: #2a0003; --brand-secondary-50: #ebeef2; --brand-secondary-100: #d1d9e2; --brand-secondary-200: #a6b5c7; --brand-secondary-700: #012552; --brand-secondary-800: #011e41; --brand-secondary-900: #00152e; --brand-secondary-950: #000d1d; --brand-warning-50: #fef9ee; --brand-warning-700: #d19e24; --brand-warning-800: #a77e1d; --brand-warning-950: #4a380d; /* Critical alpha tokens */ --brand-primary-a10: rgba(140, 0, 11, 0.10); --brand-primary-a20: rgba(140, 0, 11, 0.20); --brand-primary-a30: rgba(140, 0, 11, 0.30); --brand-secondary-a10: rgba(1, 44, 96, 0.10); --brand-secondary-a20: rgba(1, 44, 96, 0.20); --brand-warning-a10: rgba(246, 186, 42, 0.10); --brand-warning-a20: rgba(246, 186, 42, 0.20); /* Critical shadow tokens */ --shadow-sm: 0 1px 3px rgba(1,44,96,0.10), 0 1px 2px rgba(1,44,96,0.06); --shadow-md: 0 4px 6px rgba(1,44,96,0.07), 0 2px 4px rgba(1,44,96,0.05); --shadow-lg: 0 10px 15px rgba(1,44,96,0.10), 0 4px 6px rgba(1,44,96,0.05); --shadow-brand: 0 8px 24px rgba(140,0,11,0.35); } }