/* Product family accents. The shell, spacing, type and components are identical across every net-brain product; only this accent, the product symbol and the product name change. Set data-product on . Roadmap order: time (first release), ticket, aim, projects. braindesk / crm / erp / portal are reserved for later. --product-bar-base is the saturated brand hue. The top bar paints with --product-bar: the base hue in light, a deep tinted version of it in dark, with --product-on-bar as the light text on top. */ :root{ --product-accent:var(--nb-cobalt-600); --product-accent-hover:var(--nb-cobalt-700); --product-accent-container:var(--nb-cobalt-50); --product-on-accent:#FFFFFF; --product-bar-base:var(--nb-cobalt-600); --product-symbol:"hub"; /* @kind other */ } [data-product="braindesk"]{--product-accent:var(--nb-cobalt-600);--product-accent-hover:var(--nb-cobalt-700);--product-accent-container:var(--nb-cobalt-50);--product-bar-base:var(--nb-cobalt-600);--product-symbol:"dashboard"; /* @kind other */} [data-product="aim"]{--product-accent:var(--nb-berry-500);--product-accent-hover:var(--nb-berry-600);--product-accent-container:var(--nb-berry-50);--product-bar-base:var(--nb-berry-500);--product-symbol:"neurology"; /* @kind other */} [data-product="ticket"]{--product-accent:var(--nb-teal-500);--product-accent-hover:var(--nb-teal-600);--product-accent-container:var(--nb-teal-50);--product-bar-base:var(--nb-teal-500);--product-symbol:"confirmation_number"; /* @kind other */} [data-product="time"]{--product-accent:var(--nb-harbour-600);--product-accent-hover:var(--nb-harbour-700);--product-accent-container:var(--nb-harbour-50);--product-bar-base:var(--nb-harbour-600);--product-symbol:"schedule"; /* @kind other */} [data-product="projects"]{--product-accent:var(--nb-ember-500);--product-accent-hover:var(--nb-ember-600);--product-accent-container:var(--nb-ember-50);--product-bar-base:var(--nb-ember-500);--product-symbol:"lan"; /* @kind other */} [data-product="crm"]{--product-accent:#B4344F;--product-accent-hover:#96253C;--product-accent-container:#FCECEF;--product-bar-base:#B4344F;--product-symbol:"contacts"; /* @kind other */} [data-product="erp"]{--product-accent:var(--nb-success-500);--product-accent-hover:var(--nb-success-600);--product-accent-container:var(--nb-success-50);--product-bar-base:var(--nb-success-500);--product-symbol:"inventory_2"; /* @kind other */} [data-product="portal"]{--product-accent:var(--nb-info-500);--product-accent-hover:var(--nb-info-600);--product-accent-container:var(--nb-info-50);--product-bar-base:var(--nb-info-500);--product-symbol:"badge"; /* @kind other */} /* Top bar tone — one rule per theme, valid for every product */ :root{--product-bar:var(--product-bar-base);--product-on-bar:#FFFFFF} [data-theme="dark"]{--product-accent:var(--nb-cobalt-300);--product-on-accent:#0E1730;--product-bar:color-mix(in oklab,var(--product-bar-base) 34%,var(--nb-grey-900));--product-on-bar:var(--nb-grey-50)} [data-theme="dark"][data-product="aim"]{--product-accent:var(--nb-berry-300);--product-accent-container:#3B1128} [data-theme="dark"][data-product="ticket"]{--product-accent:var(--nb-teal-300);--product-accent-container:#0E2E31} [data-theme="dark"][data-product="time"]{--product-accent:var(--nb-harbour-300);--product-accent-container:#132844} [data-theme="dark"][data-product="projects"]{--product-accent:var(--nb-ember-300);--product-accent-container:#3A1B0A} [data-theme="dark"][data-product="crm"]{--product-accent:#EE8296;--product-accent-container:#3A1620} [data-theme="dark"][data-product="erp"]{--product-accent:var(--nb-success-300);--product-accent-container:#0D2A1C} [data-theme="dark"][data-product="portal"]{--product-accent:var(--nb-info-300);--product-accent-container:#0B2A40}