/* SynthGateway — shared badge palette for tenant/product slugs. * * DCR-2026-051: canonical per-product brand-color map for the gateway * UI. Aligns the agents.html + telemetry.html badges with the rest of * the Synthology brand system (installer rasters, EUG covers, website * hero cards) by sourcing the brand hex from * branding/_render-eug-rasters-fleet.sh. Pre-DCR-051 the gateway used * an 8-bucket deterministic hash for product slugs, which produced * guaranteed collisions (13+ products, 8 buckets) — synthiq + * pathology-engine + encounter-engine all rendered the same pink, * router + 4 VNA siblings + synthqms all rendered the same blue, etc. * * Tenant slugs continue using the deterministic hash-fallback palette * below (badge-c0..c7). The tenant slug space is open + uncurated so * we can't pre-assign a color per tenant; the hash gives a stable * assignment with adequate distribution for the small N of demo * tenants we see today. * * Product slugs use the per-product canonical brand badges below * (.badge-product-). Unknown product slugs fall through to the * hash so the gateway keeps working for new products that haven't * been registered in this map yet. * * Avoid red here — red is reserved for revoke/error status badges. */ /* ── Hash-fallback palette (tenants + unknown product slugs) ───────── */ .badge-c0 { background: rgba( 34, 211, 238, .18); color: #22d3ee; } /* cyan */ .badge-c1 { background: rgba( 52, 211, 153, .18); color: #34d399; } /* green */ .badge-c2 { background: rgba(192, 132, 252, .18); color: #c084fc; } /* purple */ .badge-c3 { background: rgba(251, 146, 60, .18); color: #fb923c; } /* orange */ .badge-c4 { background: rgba(244, 114, 182, .18); color: #f472b6; } /* pink */ .badge-c5 { background: rgba( 96, 165, 250, .18); color: #60a5fa; } /* blue */ .badge-c6 { background: rgba( 94, 234, 212, .18); color: #5eead4; } /* teal */ .badge-c7 { background: rgba(251, 191, 36, .18); color: #fbbf24; } /* yellow */ /* ── Per-product badges -- STRICT BRAND from the canonical renderer config ────────────────────────────────────────────────────────────────────────── DCR-2026-051 user-acceptance pass 4 (1.0.0.17): single source of truth for product brand colors is branding/_render-eug-rasters-fleet.sh -- the same file that drives installer raster generation, EUG cover rendering, and website hero-card output. Every consumer in the Synthology brand system reads the SAME slug → hex map from that file. If a brand color needs to change, change it in the renderer config and every downstream surface picks it up uniformly. .16's hand-curated hybrid (amber/pink/lime reassignments for the XyDromatics blue/violet cluster) is reverted here. The clustering it tried to fix is a property of the brand palette itself; the right fix is to update the renderer config, not deviate per-surface. Format below is exactly the slug → hex pairs from _render-eug-rasters- fleet.sh, mechanically applied. bg .35 alpha (carried from .15) + fg uses brand hex directly. SynthQMS + SynthVault still carry Tailwind-300 fg lifts because their navy/steel-blue brands are unreadable as raw fg text on the dark page bg at any reasonable bg alpha. The 5 VNA siblings intentionally share #2563eb -- the renderer config assigns all 5 to the same hex; shared family color carries "these are the VNA siblings" at a glance. Known mismatch (filed as separate roadmap item): the visual contact sheet at branding/xydromatics-family/family-contact-sheet.svg uses a different gradient palette than the renderer config (11 distinct hues incl. green for SR Engine, amber for Encounter, teal-family for VNA). The renderer config wins per "single source of truth" rule; reconciling the two is a brand-system convergence task, not a per-product CSS task. */ /* Inline disc-icon style (DCR-2026-051 #3): per-product brand disc SVGs live in /brand-discs/.svg; render at 18px inside the .badge so the pill carries brand color + disc glyph + slug text together. Each disc is a 256x256 SVG with the brand color circle + product-unique white glyph (e.g., archive cylinder + magnifier for VNA Research) so the operator gets both color identity AND visual identity at a glance. */ .badge .badge-disc { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; } .badge-product-synthiq { background: rgba(124, 58, 237, .35); color: #7c3aed; } /* synthiq #7c3aed violet */ .badge-product-synthgateway { background: rgba( 13, 148, 136, .35); color: #0d9488; } /* synthgateway #0d9488 teal */ .badge-product-synthqms { background: rgba( 58, 103, 163, .35); color: #93c5fd; } /* synthqms #3a67a3 steel-blue (brand bg + Tailwind-300 fg)*/ .badge-product-synthvault { background: rgba( 38, 66, 110, .35); color: #a5b4fc; } /* synthvault #26426e navy (brand bg + Tailwind-300 fg)*/ .badge-product-synthcloudconnect { background: rgba( 16, 185, 129, .35); color: #10b981; } /* synthcloudconnect #10b981 emerald */ .badge-product-xydromatics-router { background: rgba( 79, 142, 247, .35); color: #4f8ef7; } /* xydromatics-router #4f8ef7 blue */ .badge-product-xydromatics-sr-engine { background: rgba( 34, 211, 238, .35); color: #22d3ee; } /* xydromatics-sr-engine #22d3ee cyan */ .badge-product-xydromatics-migration-engine { background: rgba(139, 92, 246, .35); color: #8b5cf6; } /* xydromatics-migration-engine #8b5cf6 violet */ .badge-product-xydromatics-pathology-engine { background: rgba(241, 90, 41, .35); color: #F15A29; } /* xydromatics-pathology-engine #F15A29 orange */ .badge-product-xydromatics-encounter-engine { background: rgba(168, 85, 247, .35); color: #a855f7; } /* xydromatics-encounter-engine #a855f7 purple */ .badge-product-xydromatics-vna-clinical { background: rgba( 37, 99, 235, .35); color: #2563eb; } /* xydromatics-vna-* (5 siblings share) #2563eb VNA-family blue */ .badge-product-xydromatics-vna-clinical-research { background: rgba( 37, 99, 235, .35); color: #2563eb; } .badge-product-xydromatics-vna-migration { background: rgba( 37, 99, 235, .35); color: #2563eb; } .badge-product-xydromatics-vna-repository { background: rgba( 37, 99, 235, .35); color: #2563eb; } .badge-product-xydromatics-vna-research { background: rgba( 37, 99, 235, .35); color: #2563eb; }