/**** Cooper Hewitt Book Font Declaration ****/ /* Custom font from asset library: Cooper Hewitt Book */ @font-face { font-family: 'Cooper Hewitt Book'; font-weight: 100 900; font-display: swap; src: url(https://nva.avature.net/assetFile/iats/17022); } /**** Cooper Hewitt Bold Font Declaration ****/ /* Custom font from asset library: Cooper Hewitt Bold */ @font-face { font-family: 'Cooper Hewitt Bold'; font-weight: 100 900; font-display: swap; src: url(https://nva.avature.net/assetFile/iats/17021); } /* =========================================================================== GLOBAL VARIABLES: BASE -------------------------------------------------------------------------- Root : Font : Color (Palettes, Hue and Saturation) -------------------------------------------------------------------------- GLOBAL VARIABLES: CALCULATED -------------------------------------------------------------------------- Root : Color (Palettes - transparent variant) : Neutral ('General' in UI) : Link : Button : Brand : Emphasis : Error : Info : Success : Warning -------------------------------------------------------------------------- VARIABLE SETS: ELEMENTS -------------------------------------------------------------------------- Buttons Fields Typography : Descriptions : Labels : Titles -------------------------------------------------------------------------- VARIABLE SETS: COMPONENTS -------------------------------------------------------------------------- Tables / Lists =========================================================================== */ /* GLOBAL VARIABLES: BASE/Root */ :root { --a-gs--font--family--default:'Cooper Hewitt Book'; --a-gs--font--family--emphasis:'Cooper Hewitt Bold'; --a-gs--font--size--default:1rem; --a-gs--font--size--00:0.8rem; --a-gs--font--size--01:1rem; --a-gs--font--size--02:1.1rem; --a-gs--font--size--03:1.25rem; --a-gs--font--size--04:1.4rem; --a-gs--font--size--05:1.5rem; --a-gs--font--size--06:1.6rem; --a-gs--font--size--07:1.75rem; --a-gs--font--size--08:1.9rem; --a-gs--font--size--09:2.1rem; --a-gs--font--size--10:2.75rem; --a-gs--color--neutral--base--hue:0; --a-gs--color--neutral--base--sat:0%; --a-gs--color--neutral--base--lig:50; --a-gs--swatch--neutral--100:hsla(var(--a-gs--color--neutral--base--hue), var(--a-gs--color--neutral--base--sat), var(--a-gs--lightness--neutral--100, 100%), 1); --a-gs--swatch--neutral--095:hsla(var(--a-gs--color--neutral--base--hue), var(--a-gs--color--neutral--base--sat), var(--a-gs--lightness--neutral--095, 95%), 1); --a-gs--swatch--neutral--090:hsla(var(--a-gs--color--neutral--base--hue), var(--a-gs--color--neutral--base--sat), var(--a-gs--lightness--neutral--090, 90%), 1); --a-gs--swatch--neutral--080:hsla(var(--a-gs--color--neutral--base--hue), var(--a-gs--color--neutral--base--sat), var(--a-gs--lightness--neutral--080, 80%), 1); --a-gs--swatch--neutral--070:hsla(var(--a-gs--color--neutral--base--hue), var(--a-gs--color--neutral--base--sat), var(--a-gs--lightness--neutral--070, 70%), 1); --a-gs--swatch--neutral--060:hsla(var(--a-gs--color--neutral--base--hue), var(--a-gs--color--neutral--base--sat), var(--a-gs--lightness--neutral--060, 60%), 1); --a-gs--swatch--neutral--050:hsla(var(--a-gs--color--neutral--base--hue), var(--a-gs--color--neutral--base--sat), var(--a-gs--lightness--neutral--050, 50%), 1); --a-gs--swatch--neutral--040:hsla(var(--a-gs--color--neutral--base--hue), var(--a-gs--color--neutral--base--sat), var(--a-gs--lightness--neutral--040, 40%), 1); --a-gs--swatch--neutral--030:hsla(var(--a-gs--color--neutral--base--hue), var(--a-gs--color--neutral--base--sat), var(--a-gs--lightness--neutral--030, 30%), 1); --a-gs--swatch--neutral--020:hsla(var(--a-gs--color--neutral--base--hue), var(--a-gs--color--neutral--base--sat), var(--a-gs--lightness--neutral--020, 20%), 1); --a-gs--swatch--neutral--010:hsla(var(--a-gs--color--neutral--base--hue), var(--a-gs--color--neutral--base--sat), var(--a-gs--lightness--neutral--010, 10%), 1); --a-gs--swatch--neutral--000:hsla(var(--a-gs--color--neutral--base--hue), var(--a-gs--color--neutral--base--sat), var(--a-gs--lightness--neutral--000, 0%), 1); --a-gs--color--brand--base--hue:184; --a-gs--color--brand--base--sat:83%; --a-gs--color--brand--base--lig:14; --a-gs--swatch--brand--100:hsla(var(--a-gs--color--brand--base--hue), var(--a-gs--color--brand--base--sat), var(--a-gs--lightness--brand--100, 100%), 1); --a-gs--swatch--brand--095:hsla(var(--a-gs--color--brand--base--hue), var(--a-gs--color--brand--base--sat), var(--a-gs--lightness--brand--095, 95%), 1); --a-gs--swatch--brand--090:hsla(var(--a-gs--color--brand--base--hue), var(--a-gs--color--brand--base--sat), var(--a-gs--lightness--brand--090, 90%), 1); --a-gs--swatch--brand--080:hsla(var(--a-gs--color--brand--base--hue), var(--a-gs--color--brand--base--sat), var(--a-gs--lightness--brand--080, 80%), 1); --a-gs--swatch--brand--070:hsla(var(--a-gs--color--brand--base--hue), var(--a-gs--color--brand--base--sat), var(--a-gs--lightness--brand--070, 70%), 1); --a-gs--swatch--brand--060:hsla(var(--a-gs--color--brand--base--hue), var(--a-gs--color--brand--base--sat), var(--a-gs--lightness--brand--060, 60%), 1); --a-gs--swatch--brand--050:hsla(var(--a-gs--color--brand--base--hue), var(--a-gs--color--brand--base--sat), var(--a-gs--lightness--brand--050, 50%), 1); --a-gs--swatch--brand--040:hsla(var(--a-gs--color--brand--base--hue), var(--a-gs--color--brand--base--sat), var(--a-gs--lightness--brand--040, 40%), 1); --a-gs--swatch--brand--030:hsla(var(--a-gs--color--brand--base--hue), var(--a-gs--color--brand--base--sat), var(--a-gs--lightness--brand--030, 30%), 1); --a-gs--swatch--brand--020:hsla(var(--a-gs--color--brand--base--hue), var(--a-gs--color--brand--base--sat), var(--a-gs--lightness--brand--020, 20%), 1); --a-gs--swatch--brand--010:hsla(var(--a-gs--color--brand--base--hue), var(--a-gs--color--brand--base--sat), var(--a-gs--lightness--brand--010, 10%), 1); --a-gs--swatch--brand--000:hsla(var(--a-gs--color--brand--base--hue), var(--a-gs--color--brand--base--sat), var(--a-gs--lightness--brand--000, 0%), 1); --a-gs--color--emphasis--base--hue:184; --a-gs--color--emphasis--base--sat:30%; --a-gs--color--emphasis--base--lig:68; --a-gs--swatch--emphasis--100:hsla(var(--a-gs--color--emphasis--base--hue), var(--a-gs--color--emphasis--base--sat), var(--a-gs--lightness--emphasis--100, 100%), 1); --a-gs--swatch--emphasis--095:hsla(var(--a-gs--color--emphasis--base--hue), var(--a-gs--color--emphasis--base--sat), var(--a-gs--lightness--emphasis--095, 95%), 1); --a-gs--swatch--emphasis--090:hsla(var(--a-gs--color--emphasis--base--hue), var(--a-gs--color--emphasis--base--sat), var(--a-gs--lightness--emphasis--090, 90%), 1); --a-gs--swatch--emphasis--080:hsla(var(--a-gs--color--emphasis--base--hue), var(--a-gs--color--emphasis--base--sat), var(--a-gs--lightness--emphasis--080, 80%), 1); --a-gs--swatch--emphasis--070:hsla(var(--a-gs--color--emphasis--base--hue), var(--a-gs--color--emphasis--base--sat), var(--a-gs--lightness--emphasis--070, 70%), 1); --a-gs--swatch--emphasis--060:hsla(var(--a-gs--color--emphasis--base--hue), var(--a-gs--color--emphasis--base--sat), var(--a-gs--lightness--emphasis--060, 60%), 1); --a-gs--swatch--emphasis--050:hsla(var(--a-gs--color--emphasis--base--hue), var(--a-gs--color--emphasis--base--sat), var(--a-gs--lightness--emphasis--050, 50%), 1); --a-gs--swatch--emphasis--040:hsla(var(--a-gs--color--emphasis--base--hue), var(--a-gs--color--emphasis--base--sat), var(--a-gs--lightness--emphasis--040, 40%), 1); --a-gs--swatch--emphasis--030:hsla(var(--a-gs--color--emphasis--base--hue), var(--a-gs--color--emphasis--base--sat), var(--a-gs--lightness--emphasis--030, 30%), 1); --a-gs--swatch--emphasis--020:hsla(var(--a-gs--color--emphasis--base--hue), var(--a-gs--color--emphasis--base--sat), var(--a-gs--lightness--emphasis--020, 20%), 1); --a-gs--swatch--emphasis--010:hsla(var(--a-gs--color--emphasis--base--hue), var(--a-gs--color--emphasis--base--sat), var(--a-gs--lightness--emphasis--010, 10%), 1); --a-gs--swatch--emphasis--000:hsla(var(--a-gs--color--emphasis--base--hue), var(--a-gs--color--emphasis--base--sat), var(--a-gs--lightness--emphasis--000, 0%), 1); --a-gs--color--link--base--hue:185; --a-gs--color--link--base--sat:83%; --a-gs--color--link--base--lig:21; --a-gs--swatch--link--100:hsla(var(--a-gs--color--link--base--hue), var(--a-gs--color--link--base--sat), var(--a-gs--lightness--link--100, 100%), 1); --a-gs--swatch--link--095:hsla(var(--a-gs--color--link--base--hue), var(--a-gs--color--link--base--sat), var(--a-gs--lightness--link--095, 95%), 1); --a-gs--swatch--link--090:hsla(var(--a-gs--color--link--base--hue), var(--a-gs--color--link--base--sat), var(--a-gs--lightness--link--090, 90%), 1); --a-gs--swatch--link--080:hsla(var(--a-gs--color--link--base--hue), var(--a-gs--color--link--base--sat), var(--a-gs--lightness--link--080, 80%), 1); --a-gs--swatch--link--070:hsla(var(--a-gs--color--link--base--hue), var(--a-gs--color--link--base--sat), var(--a-gs--lightness--link--070, 70%), 1); --a-gs--swatch--link--060:hsla(var(--a-gs--color--link--base--hue), var(--a-gs--color--link--base--sat), var(--a-gs--lightness--link--060, 60%), 1); --a-gs--swatch--link--050:hsla(var(--a-gs--color--link--base--hue), var(--a-gs--color--link--base--sat), var(--a-gs--lightness--link--050, 50%), 1); --a-gs--swatch--link--040:hsla(var(--a-gs--color--link--base--hue), var(--a-gs--color--link--base--sat), var(--a-gs--lightness--link--040, 40%), 1); --a-gs--swatch--link--030:hsla(var(--a-gs--color--link--base--hue), var(--a-gs--color--link--base--sat), var(--a-gs--lightness--link--030, 30%), 1); --a-gs--swatch--link--020:hsla(var(--a-gs--color--link--base--hue), var(--a-gs--color--link--base--sat), var(--a-gs--lightness--link--020, 20%), 1); --a-gs--swatch--link--010:hsla(var(--a-gs--color--link--base--hue), var(--a-gs--color--link--base--sat), var(--a-gs--lightness--link--010, 10%), 1); --a-gs--swatch--link--000:hsla(var(--a-gs--color--link--base--hue), var(--a-gs--color--link--base--sat), var(--a-gs--lightness--link--000, 0%), 1); --a-gs--color--button--base--hue:90; --a-gs--color--button--base--sat:44%; --a-gs--color--button--base--lig:64; --a-gs--swatch--button--100:hsla(var(--a-gs--color--button--base--hue), var(--a-gs--color--button--base--sat), var(--a-gs--lightness--button--100, 100%), 1); --a-gs--swatch--button--095:hsla(var(--a-gs--color--button--base--hue), var(--a-gs--color--button--base--sat), var(--a-gs--lightness--button--095, 95%), 1); --a-gs--swatch--button--090:hsla(var(--a-gs--color--button--base--hue), var(--a-gs--color--button--base--sat), var(--a-gs--lightness--button--090, 90%), 1); --a-gs--swatch--button--080:hsla(var(--a-gs--color--button--base--hue), var(--a-gs--color--button--base--sat), var(--a-gs--lightness--button--080, 80%), 1); --a-gs--swatch--button--070:hsla(var(--a-gs--color--button--base--hue), var(--a-gs--color--button--base--sat), var(--a-gs--lightness--button--070, 70%), 1); --a-gs--swatch--button--060:hsla(var(--a-gs--color--button--base--hue), var(--a-gs--color--button--base--sat), var(--a-gs--lightness--button--060, 60%), 1); --a-gs--swatch--button--050:hsla(var(--a-gs--color--button--base--hue), var(--a-gs--color--button--base--sat), var(--a-gs--lightness--button--050, 50%), 1); --a-gs--swatch--button--040:hsla(var(--a-gs--color--button--base--hue), var(--a-gs--color--button--base--sat), var(--a-gs--lightness--button--040, 40%), 1); --a-gs--swatch--button--030:hsla(var(--a-gs--color--button--base--hue), var(--a-gs--color--button--base--sat), var(--a-gs--lightness--button--030, 30%), 1); --a-gs--swatch--button--020:hsla(var(--a-gs--color--button--base--hue), var(--a-gs--color--button--base--sat), var(--a-gs--lightness--button--020, 20%), 1); --a-gs--swatch--button--010:hsla(var(--a-gs--color--button--base--hue), var(--a-gs--color--button--base--sat), var(--a-gs--lightness--button--010, 10%), 1); --a-gs--swatch--button--000:hsla(var(--a-gs--color--button--base--hue), var(--a-gs--color--button--base--sat), var(--a-gs--lightness--button--000, 0%), 1); --a-gs--color--error--base--hue:354; --a-gs--color--error--base--sat:74%; --a-gs--color--error--base--lig:40; --a-gs--swatch--error--100:hsla(var(--a-gs--color--error--base--hue), var(--a-gs--color--error--base--sat), var(--a-gs--lightness--error--100, 100%), 1); --a-gs--swatch--error--095:hsla(var(--a-gs--color--error--base--hue), var(--a-gs--color--error--base--sat), var(--a-gs--lightness--error--095, 95%), 1); --a-gs--swatch--error--090:hsla(var(--a-gs--color--error--base--hue), var(--a-gs--color--error--base--sat), var(--a-gs--lightness--error--090, 90%), 1); --a-gs--swatch--error--080:hsla(var(--a-gs--color--error--base--hue), var(--a-gs--color--error--base--sat), var(--a-gs--lightness--error--080, 80%), 1); --a-gs--swatch--error--070:hsla(var(--a-gs--color--error--base--hue), var(--a-gs--color--error--base--sat), var(--a-gs--lightness--error--070, 70%), 1); --a-gs--swatch--error--060:hsla(var(--a-gs--color--error--base--hue), var(--a-gs--color--error--base--sat), var(--a-gs--lightness--error--060, 60%), 1); --a-gs--swatch--error--050:hsla(var(--a-gs--color--error--base--hue), var(--a-gs--color--error--base--sat), var(--a-gs--lightness--error--050, 50%), 1); --a-gs--swatch--error--040:hsla(var(--a-gs--color--error--base--hue), var(--a-gs--color--error--base--sat), var(--a-gs--lightness--error--040, 40%), 1); --a-gs--swatch--error--030:hsla(var(--a-gs--color--error--base--hue), var(--a-gs--color--error--base--sat), var(--a-gs--lightness--error--030, 30%), 1); --a-gs--swatch--error--020:hsla(var(--a-gs--color--error--base--hue), var(--a-gs--color--error--base--sat), var(--a-gs--lightness--error--020, 20%), 1); --a-gs--swatch--error--010:hsla(var(--a-gs--color--error--base--hue), var(--a-gs--color--error--base--sat), var(--a-gs--lightness--error--010, 10%), 1); --a-gs--swatch--error--000:hsla(var(--a-gs--color--error--base--hue), var(--a-gs--color--error--base--sat), var(--a-gs--lightness--error--000, 0%), 1); --a-gs--color--info--base--hue:0; --a-gs--color--info--base--sat:0%; --a-gs--color--info--base--lig:33; --a-gs--swatch--info--100:hsla(var(--a-gs--color--info--base--hue), var(--a-gs--color--info--base--sat), var(--a-gs--lightness--info--100, 100%), 1); --a-gs--swatch--info--095:hsla(var(--a-gs--color--info--base--hue), var(--a-gs--color--info--base--sat), var(--a-gs--lightness--info--095, 95%), 1); --a-gs--swatch--info--090:hsla(var(--a-gs--color--info--base--hue), var(--a-gs--color--info--base--sat), var(--a-gs--lightness--info--090, 90%), 1); --a-gs--swatch--info--080:hsla(var(--a-gs--color--info--base--hue), var(--a-gs--color--info--base--sat), var(--a-gs--lightness--info--080, 80%), 1); --a-gs--swatch--info--070:hsla(var(--a-gs--color--info--base--hue), var(--a-gs--color--info--base--sat), var(--a-gs--lightness--info--070, 70%), 1); --a-gs--swatch--info--060:hsla(var(--a-gs--color--info--base--hue), var(--a-gs--color--info--base--sat), var(--a-gs--lightness--info--060, 60%), 1); --a-gs--swatch--info--050:hsla(var(--a-gs--color--info--base--hue), var(--a-gs--color--info--base--sat), var(--a-gs--lightness--info--050, 50%), 1); --a-gs--swatch--info--040:hsla(var(--a-gs--color--info--base--hue), var(--a-gs--color--info--base--sat), var(--a-gs--lightness--info--040, 40%), 1); --a-gs--swatch--info--030:hsla(var(--a-gs--color--info--base--hue), var(--a-gs--color--info--base--sat), var(--a-gs--lightness--info--030, 30%), 1); --a-gs--swatch--info--020:hsla(var(--a-gs--color--info--base--hue), var(--a-gs--color--info--base--sat), var(--a-gs--lightness--info--020, 20%), 1); --a-gs--swatch--info--010:hsla(var(--a-gs--color--info--base--hue), var(--a-gs--color--info--base--sat), var(--a-gs--lightness--info--010, 10%), 1); --a-gs--swatch--info--000:hsla(var(--a-gs--color--info--base--hue), var(--a-gs--color--info--base--sat), var(--a-gs--lightness--info--000, 0%), 1); --a-gs--color--warning--base--hue:45; --a-gs--color--warning--base--sat:90%; --a-gs--color--warning--base--lig:50; --a-gs--swatch--warning--100:hsla(var(--a-gs--color--warning--base--hue), var(--a-gs--color--warning--base--sat), var(--a-gs--lightness--warning--100, 100%), 1); --a-gs--swatch--warning--095:hsla(var(--a-gs--color--warning--base--hue), var(--a-gs--color--warning--base--sat), var(--a-gs--lightness--warning--095, 95%), 1); --a-gs--swatch--warning--090:hsla(var(--a-gs--color--warning--base--hue), var(--a-gs--color--warning--base--sat), var(--a-gs--lightness--warning--090, 90%), 1); --a-gs--swatch--warning--080:hsla(var(--a-gs--color--warning--base--hue), var(--a-gs--color--warning--base--sat), var(--a-gs--lightness--warning--080, 80%), 1); --a-gs--swatch--warning--070:hsla(var(--a-gs--color--warning--base--hue), var(--a-gs--color--warning--base--sat), var(--a-gs--lightness--warning--070, 70%), 1); --a-gs--swatch--warning--060:hsla(var(--a-gs--color--warning--base--hue), var(--a-gs--color--warning--base--sat), var(--a-gs--lightness--warning--060, 60%), 1); --a-gs--swatch--warning--050:hsla(var(--a-gs--color--warning--base--hue), var(--a-gs--color--warning--base--sat), var(--a-gs--lightness--warning--050, 50%), 1); --a-gs--swatch--warning--040:hsla(var(--a-gs--color--warning--base--hue), var(--a-gs--color--warning--base--sat), var(--a-gs--lightness--warning--040, 40%), 1); --a-gs--swatch--warning--030:hsla(var(--a-gs--color--warning--base--hue), var(--a-gs--color--warning--base--sat), var(--a-gs--lightness--warning--030, 30%), 1); --a-gs--swatch--warning--020:hsla(var(--a-gs--color--warning--base--hue), var(--a-gs--color--warning--base--sat), var(--a-gs--lightness--warning--020, 20%), 1); --a-gs--swatch--warning--010:hsla(var(--a-gs--color--warning--base--hue), var(--a-gs--color--warning--base--sat), var(--a-gs--lightness--warning--010, 10%), 1); --a-gs--swatch--warning--000:hsla(var(--a-gs--color--warning--base--hue), var(--a-gs--color--warning--base--sat), var(--a-gs--lightness--warning--000, 0%), 1); --a-gs--color--success--base--hue:90; --a-gs--color--success--base--sat:44%; --a-gs--color--success--base--lig:64; --a-gs--swatch--success--100:hsla(var(--a-gs--color--success--base--hue), var(--a-gs--color--success--base--sat), var(--a-gs--lightness--success--100, 100%), 1); --a-gs--swatch--success--095:hsla(var(--a-gs--color--success--base--hue), var(--a-gs--color--success--base--sat), var(--a-gs--lightness--success--095, 95%), 1); --a-gs--swatch--success--090:hsla(var(--a-gs--color--success--base--hue), var(--a-gs--color--success--base--sat), var(--a-gs--lightness--success--090, 90%), 1); --a-gs--swatch--success--080:hsla(var(--a-gs--color--success--base--hue), var(--a-gs--color--success--base--sat), var(--a-gs--lightness--success--080, 80%), 1); --a-gs--swatch--success--070:hsla(var(--a-gs--color--success--base--hue), var(--a-gs--color--success--base--sat), var(--a-gs--lightness--success--070, 70%), 1); --a-gs--swatch--success--060:hsla(var(--a-gs--color--success--base--hue), var(--a-gs--color--success--base--sat), var(--a-gs--lightness--success--060, 60%), 1); --a-gs--swatch--success--050:hsla(var(--a-gs--color--success--base--hue), var(--a-gs--color--success--base--sat), var(--a-gs--lightness--success--050, 50%), 1); --a-gs--swatch--success--040:hsla(var(--a-gs--color--success--base--hue), var(--a-gs--color--success--base--sat), var(--a-gs--lightness--success--040, 40%), 1); --a-gs--swatch--success--030:hsla(var(--a-gs--color--success--base--hue), var(--a-gs--color--success--base--sat), var(--a-gs--lightness--success--030, 30%), 1); --a-gs--swatch--success--020:hsla(var(--a-gs--color--success--base--hue), var(--a-gs--color--success--base--sat), var(--a-gs--lightness--success--020, 20%), 1); --a-gs--swatch--success--010:hsla(var(--a-gs--color--success--base--hue), var(--a-gs--color--success--base--sat), var(--a-gs--lightness--success--010, 10%), 1); --a-gs--swatch--success--000:hsla(var(--a-gs--color--success--base--hue), var(--a-gs--color--success--base--sat), var(--a-gs--lightness--success--000, 0%), 1); --a-gs--font--weight--01:100; --a-gs--font--weight--02:200; --a-gs--font--weight--03:300; --a-gs--font--weight--04:400; --a-gs--font--weight--05:500; --a-gs--font--weight--06:600; --a-gs--font--weight--07:700; --a-gs--font--weight--08:800; --a-gs--font--weight--09:900; --a-gs--font--style--normal:normal; --a-gs--font--style--italic:italic; /* Lightness variables for dynamic swatches */ --a-gs--lightness--neutral--100:100%; --a-gs--lightness--neutral--095:95%; --a-gs--lightness--neutral--090:90%; --a-gs--lightness--brand--010:10%; --a-gs--lightness--neutral--070:70%; --a-gs--lightness--neutral--010:10%; --a-gs--lightness--neutral--000:0%; --a-gs--lightness--neutral--030:30%; --a-gs--lightness--neutral--080:80%; --a-gs--lightness--link--020:21%; --a-gs--lightness--link--000:0%; --a-gs--lightness--neutral--020:20%; --a-gs--lightness--button--000:0%; --a-gs--lightness--info--095:95%; --a-gs--lightness--button--070:74%; --a-gs--lightness--emphasis--070:68%; --a-gs--lightness--neutral--060:60%; --a-gs--lightness--button--060:64%; --a-gs--lightness--emphasis--090:88%; --a-gs--lightness--emphasis--030:28%; --a-gs--lightness--emphasis--050:48%; --a-gs--lightness--emphasis--060:58%; --a-gs--lightness--link--010:10%; --a-gs--lightness--emphasis--020:18%; --a-gs--lightness--emphasis--000:0%; --a-gs--lightness--button--050:54%; --a-gs--lightness--link--030:31%; --a-gs--lightness--link--100:100%; --a-gs--lightness--link--095:95%; --a-gs--lightness--link--090:91%; --a-gs--lightness--link--040:41%; --a-gs--lightness--button--010:10%; --a-gs--lightness--button--100:100%; --a-gs--lightness--emphasis--095:95%; --a-gs--lightness--emphasis--040:38%; --a-gs--lightness--emphasis--010:10%; --a-gs--lightness--info--050:53%; --a-gs--lightness--info--010:10%; --a-gs--lightness--info--090:93%; --a-gs--lightness--error--040:40%; --a-gs--lightness--error--030:30%; --a-gs--lightness--error--095:95%; --a-gs--lightness--error--010:10%; --a-gs--lightness--error--090:90%; --a-gs--lightness--warning--050:50%; --a-gs--lightness--warning--030:30%; --a-gs--lightness--warning--095:95%; --a-gs--lightness--warning--010:10%; --a-gs--lightness--warning--080:80%; --a-gs--lightness--success--050:54%; --a-gs--lightness--success--030:34%; --a-gs--lightness--success--080:84%; --a-gs--lightness--success--010:10%; } /* GLOBAL VARIABLES: CALCULATED/Root */ :root { /* GLOBAL STYLES: COLOR VARIABLES SETS/Transparent */ --a-gs--swatch--neutral--transparent: hsla(var(--a-gs--color--neutral--base--hue), var(--a-gs--color--neutral--base--sat), 100%, 0); --a-gs--color--border--transparent: var(--a-gs--swatch--neutral--transparent); --a-gs--color--background--transparent: var(--a-gs--swatch--neutral--transparent); --a-gs--color--surface--transparent: var(--a-gs--swatch--neutral--transparent); --a-gs--color--fill--transparent: var(--a-gs--swatch--neutral--transparent); --a-gs--color--text--transparent: var(--a-gs--swatch--neutral--transparent); } /* VARIABLE SETS: ADDED DYNAMICALLY */ :root { --a-gs--title--font--family:var(--a-gs--font--family--emphasis); --a-gs--title--font--size--01:var(--a-gs--font--size--10); --a-gs--title--font--size--02:var(--a-gs--font--size--09); --a-gs--title--font--size--03:var(--a-gs--font--size--07); --a-gs--title--font--size--04:var(--a-gs--font--size--04); --a-gs--title--font--weight:var(--a-gs--font--weight--07); --a-gs--title--font--style:var(--a-gs--font--style--normal); --a-gs--text--font--family:var(--a-gs--font--family--default); --a-gs--text--font--size--01:var(--a-gs--font--size--default); --a-gs--text--font--size--02:var(--a-gs--font--size--02); --a-gs--text--font--weight:var(--a-gs--font--weight--04); --a-gs--text--font--style:var(--a-gs--font--style--normal); --a-gs--button--font--family:var(--a-gs--font--family--emphasis); --a-gs--button--font--size:var(--a-gs--font--size--01); --a-gs--button--font--weight:var(--a-gs--font--weight--07); --a-gs--button--font--style:var(--a-gs--font--style--normal); --a-gs--color--background--default:var(--a-gs--swatch--neutral--100); --a-gs--color--background--secondary:var(--a-gs--swatch--neutral--095); --a-gs--color--background--tertiary:var(--a-gs--swatch--neutral--090); --a-gs--color--surface--default:var(--a-gs--swatch--neutral--100); --a-gs--color--surface--secondary:var(--a-gs--swatch--neutral--095); --a-gs--color--surface--tertiary:var(--a-gs--swatch--brand--010); --a-gs--color--border--default:var(--a-gs--swatch--neutral--070); --a-gs--color--text--default:var(--a-gs--swatch--neutral--010); --a-gs--color--text--strong:var(--a-gs--swatch--neutral--000); --a-gs--color--text--subdued:var(--a-gs--swatch--neutral--030); --a-gs--color--text--disabled:var(--a-gs--swatch--neutral--080); --a-gs--color--fill--default:var(--a-gs--swatch--neutral--100); --a-gs--color--fill--default--hover:var(--a-gs--swatch--neutral--095); --a-gs--color--fill--default--focus:var(--a-gs--swatch--neutral--100); --a-gs--color--fill--default--active:var(--a-gs--swatch--neutral--090); --a-gs--color--fill--default--selected:var(--a-gs--swatch--neutral--100); --a-gs--color--fill--default--disabled:var(--a-gs--swatch--neutral--095); --a-gs--color--text--on--fill--default:var(--a-gs--swatch--neutral--010); --a-gs--color--text--on--fill--default--hover:var(--a-gs--swatch--link--020); --a-gs--color--text--on--fill--default--focus:var(--a-gs--swatch--link--020); --a-gs--color--text--on--fill--default--active:var(--a-gs--swatch--link--020); --a-gs--color--text--on--fill--default--selected:var(--a-gs--swatch--link--000); --a-gs--color--text--on--fill--default--disabled:var(--a-gs--swatch--neutral--080); --a-gs--color--border--on--fill--default:var(--a-gs--swatch--neutral--070); --a-gs--color--border--on--fill--default--hover:var(--a-gs--swatch--neutral--020); --a-gs--color--border--on--fill--default--focus:var(--a-gs--swatch--button--000); --a-gs--color--border--on--fill--default--active:var(--a-gs--swatch--neutral--020); --a-gs--color--border--on--fill--default--selected:var(--a-gs--swatch--neutral--000); --a-gs--color--border--on--fill--default--disabled:var(--a-gs--swatch--neutral--080); --a-gs--color--surface--brand:var(--a-gs--swatch--info--095); --a-gs--color--border--brand:var(--a-gs--swatch--info--095); --a-gs--color--text--brand:var(--a-gs--swatch--neutral--010); --a-gs--color--fill--brand:var(--a-gs--swatch--button--070); --a-gs--color--fill--brand--hover:var(--a-gs--swatch--emphasis--070); --a-gs--color--fill--brand--focus:var(--a-gs--swatch--button--070); --a-gs--color--fill--brand--active:var(--a-gs--swatch--emphasis--070); --a-gs--color--fill--brand--selected:var(--a-gs--swatch--emphasis--070); --a-gs--color--fill--brand--disabled:var(--a-gs--swatch--neutral--090); --a-gs--color--text--on--fill--brand:var(--a-gs--swatch--brand--010); --a-gs--color--text--on--fill--brand--hover:var(--a-gs--swatch--brand--010); --a-gs--color--text--on--fill--brand--focus:var(--a-gs--swatch--brand--010); --a-gs--color--text--on--fill--brand--active:var(--a-gs--swatch--brand--010); --a-gs--color--text--on--fill--brand--selected:var(--a-gs--swatch--brand--010); --a-gs--color--text--on--fill--brand--disabled:var(--a-gs--swatch--neutral--060); --a-gs--color--border--on--fill--brand:var(--a-gs--swatch--button--060); --a-gs--color--border--on--fill--brand--hover:var(--a-gs--swatch--emphasis--070); --a-gs--color--border--on--fill--brand--focus:var(--a-gs--swatch--button--060); --a-gs--color--border--on--fill--brand--active:var(--a-gs--swatch--button--060); --a-gs--color--border--on--fill--brand--selected:var(--a-gs--swatch--emphasis--070); --a-gs--color--border--on--fill--brand--disabled:var(--a-gs--swatch--neutral--090); --a-gs--color--surface--emphasis:var(--a-gs--swatch--emphasis--090); --a-gs--color--border--emphasis:var(--a-gs--swatch--emphasis--090); --a-gs--color--text--emphasis:var(--a-gs--swatch--emphasis--030); --a-gs--color--fill--emphasis:var(--a-gs--swatch--emphasis--070); --a-gs--color--fill--emphasis--hover:var(--a-gs--swatch--emphasis--050); --a-gs--color--fill--emphasis--focus:var(--a-gs--swatch--emphasis--060); --a-gs--color--fill--emphasis--active:var(--a-gs--swatch--emphasis--030); --a-gs--color--fill--emphasis--selected:var(--a-gs--swatch--emphasis--030); --a-gs--color--fill--emphasis--disabled:var(--a-gs--swatch--neutral--095); --a-gs--color--text--on--fill--emphasis:var(--a-gs--swatch--link--010); --a-gs--color--text--on--fill--emphasis--hover:var(--a-gs--swatch--emphasis--020); --a-gs--color--text--on--fill--emphasis--focus:var(--a-gs--swatch--emphasis--000); --a-gs--color--text--on--fill--emphasis--active:var(--a-gs--swatch--emphasis--000); --a-gs--color--text--on--fill--emphasis--selected:var(--a-gs--swatch--emphasis--000); --a-gs--color--text--on--fill--emphasis--disabled:var(--a-gs--swatch--neutral--090); --a-gs--color--border--on--fill--emphasis:var(--a-gs--swatch--emphasis--070); --a-gs--color--border--on--fill--emphasis--hover:var(--a-gs--swatch--emphasis--050); --a-gs--color--border--on--fill--emphasis--focus:var(--a-gs--swatch--emphasis--060); --a-gs--color--border--on--fill--emphasis--active:var(--a-gs--swatch--emphasis--070); --a-gs--color--border--on--fill--emphasis--selected:var(--a-gs--swatch--emphasis--030); --a-gs--color--border--on--fill--emphasis--disabled:var(--a-gs--swatch--neutral--070); --a-gs--color--text--link:var(--a-gs--swatch--link--020); --a-gs--color--text--link--hover:var(--a-gs--swatch--button--050); --a-gs--color--text--link--focus:var(--a-gs--swatch--link--020); --a-gs--color--text--link--active:var(--a-gs--swatch--button--050); --a-gs--color--text--link--selected:var(--a-gs--swatch--link--030); --a-gs--color--text--link--disabled:var(--a-gs--swatch--neutral--080); --a-gs--color--fill--link:var(--a-gs--swatch--link--100); --a-gs--color--fill--link--hover:var(--a-gs--swatch--link--095); --a-gs--color--fill--link--focus:var(--a-gs--swatch--link--095); --a-gs--color--fill--link--active:var(--a-gs--swatch--link--095); --a-gs--color--fill--link--selected:var(--a-gs--swatch--link--090); --a-gs--color--fill--link--disabled:var(--a-gs--swatch--neutral--100); --a-gs--color--text--on--fill--link:var(--a-gs--swatch--link--010); --a-gs--color--text--on--fill--link--hover:var(--a-gs--swatch--link--030); --a-gs--color--text--on--fill--link--focus:var(--a-gs--swatch--link--040); --a-gs--color--text--on--fill--link--active:var(--a-gs--swatch--link--030); --a-gs--color--text--on--fill--link--selected:var(--a-gs--swatch--link--000); --a-gs--color--text--on--fill--link--disabled:var(--a-gs--swatch--neutral--080); --a-gs--color--border--on--fill--link:var(--a-gs--swatch--link--100); --a-gs--color--border--on--fill--link--hover:var(--a-gs--swatch--link--095); --a-gs--color--border--on--fill--link--focus:var(--a-gs--swatch--button--000); --a-gs--color--border--on--fill--link--active:var(--a-gs--swatch--link--095); --a-gs--color--border--on--fill--link--selected:var(--a-gs--swatch--link--100); --a-gs--color--border--on--fill--link--disabled:var(--a-gs--swatch--neutral--100); --a-gs--color--fill--primary:var(--a-gs--swatch--button--070); --a-gs--color--fill--primary--hover:var(--a-gs--swatch--emphasis--070); --a-gs--color--fill--primary--focus:var(--a-gs--swatch--button--070); --a-gs--color--fill--primary--active:var(--a-gs--swatch--emphasis--070); --a-gs--color--fill--primary--selected:var(--a-gs--swatch--emphasis--070); --a-gs--color--fill--primary--disabled:var(--a-gs--swatch--neutral--090); --a-gs--color--text--on--fill--primary:var(--a-gs--swatch--link--010); --a-gs--color--text--on--fill--primary--hover:var(--a-gs--swatch--link--010); --a-gs--color--text--on--fill--primary--focus:var(--a-gs--swatch--link--010); --a-gs--color--text--on--fill--primary--active:var(--a-gs--swatch--link--010); --a-gs--color--text--on--fill--primary--selected:var(--a-gs--swatch--link--010); --a-gs--color--text--on--fill--primary--disabled:var(--a-gs--swatch--neutral--060); --a-gs--color--border--on--fill--primary:var(--a-gs--swatch--button--070); --a-gs--color--border--on--fill--primary--hover:var(--a-gs--swatch--emphasis--070); --a-gs--color--border--on--fill--primary--focus:var(--a-gs--swatch--button--010); --a-gs--color--border--on--fill--primary--active:var(--a-gs--swatch--emphasis--070); --a-gs--color--border--on--fill--primary--selected:var(--a-gs--swatch--emphasis--070); --a-gs--color--border--on--fill--primary--disabled:var(--a-gs--swatch--neutral--090); --a-gs--color--fill--secondary:var(--a-gs--swatch--button--100); --a-gs--color--fill--secondary--hover:var(--a-gs--swatch--emphasis--070); --a-gs--color--fill--secondary--focus:var(--a-gs--swatch--emphasis--095); --a-gs--color--fill--secondary--active:var(--a-gs--swatch--emphasis--070); --a-gs--color--fill--secondary--selected:var(--a-gs--swatch--emphasis--070); --a-gs--color--fill--secondary--disabled:var(--a-gs--swatch--neutral--100); --a-gs--color--text--on--fill--secondary:var(--a-gs--swatch--link--010); --a-gs--color--text--on--fill--secondary--hover:var(--a-gs--swatch--link--010); --a-gs--color--text--on--fill--secondary--focus:var(--a-gs--swatch--link--010); --a-gs--color--text--on--fill--secondary--active:var(--a-gs--swatch--link--010); --a-gs--color--text--on--fill--secondary--selected:var(--a-gs--swatch--link--010); --a-gs--color--text--on--fill--secondary--disabled:var(--a-gs--swatch--neutral--060); --a-gs--color--border--on--fill--secondary:var(--a-gs--swatch--button--050); --a-gs--color--border--on--fill--secondary--hover:var(--a-gs--swatch--emphasis--040); --a-gs--color--border--on--fill--secondary--focus:var(--a-gs--swatch--emphasis--010); --a-gs--color--border--on--fill--secondary--active:var(--a-gs--swatch--emphasis--040); --a-gs--color--border--on--fill--secondary--selected:var(--a-gs--swatch--emphasis--040); --a-gs--color--border--on--fill--secondary--disabled:var(--a-gs--swatch--neutral--070); --a-gs--color--fill--tertiary:var(--a-gs--swatch--neutral--transparent); --a-gs--color--fill--tertiary--hover:var(--a-gs--swatch--neutral--transparent); --a-gs--color--fill--tertiary--focus:var(--a-gs--swatch--neutral--transparent); --a-gs--color--fill--tertiary--active:var(--a-gs--swatch--neutral--transparent); --a-gs--color--fill--tertiary--selected:var(--a-gs--swatch--neutral--transparent); --a-gs--color--fill--tertiary--disabled:var(--a-gs--swatch--neutral--transparent); --a-gs--color--text--on--fill--tertiary:var(--a-gs--swatch--link--020); --a-gs--color--text--on--fill--tertiary--hover:var(--a-gs--swatch--button--050); --a-gs--color--text--on--fill--tertiary--focus:var(--a-gs--swatch--link--010); --a-gs--color--text--on--fill--tertiary--active:var(--a-gs--swatch--link--020); --a-gs--color--text--on--fill--tertiary--selected:var(--a-gs--swatch--link--010); --a-gs--color--text--on--fill--tertiary--disabled:var(--a-gs--swatch--neutral--070); --a-gs--color--border--on--fill--tertiary:var(--a-gs--swatch--neutral--transparent); --a-gs--color--border--on--fill--tertiary--hover:var(--a-gs--swatch--neutral--transparent); --a-gs--color--border--on--fill--tertiary--focus:var(--a-gs--swatch--neutral--000); --a-gs--color--border--on--fill--tertiary--active:var(--a-gs--swatch--neutral--transparent); --a-gs--color--border--on--fill--tertiary--selected:var(--a-gs--swatch--neutral--transparent); --a-gs--color--border--on--fill--tertiary--disabled:var(--a-gs--swatch--neutral--transparent); --a-gs--color--border--info:var(--a-gs--swatch--info--050); --a-gs--color--text--info:var(--a-gs--swatch--info--050); --a-gs--color--fill--info:var(--a-gs--swatch--info--095); --a-gs--color--text--on--fill--info:var(--a-gs--swatch--info--010); --a-gs--color--border--on--fill--info:var(--a-gs--swatch--info--090); --a-gs--color--border--error:var(--a-gs--swatch--error--040); --a-gs--color--text--error:var(--a-gs--swatch--error--030); --a-gs--color--fill--error:var(--a-gs--swatch--error--095); --a-gs--color--text--on--fill--error:var(--a-gs--swatch--error--010); --a-gs--color--border--on--fill--error:var(--a-gs--swatch--error--090); --a-gs--color--border--warning:var(--a-gs--swatch--warning--050); --a-gs--color--text--warning:var(--a-gs--swatch--warning--030); --a-gs--color--fill--warning:var(--a-gs--swatch--warning--095); --a-gs--color--text--on--fill--warning:var(--a-gs--swatch--warning--010); --a-gs--color--border--on--fill--warning:var(--a-gs--swatch--warning--080); --a-gs--color--border--success:var(--a-gs--swatch--success--050); --a-gs--color--text--success:var(--a-gs--swatch--success--030); --a-gs--color--fill--success:var(--a-gs--swatch--success--080); --a-gs--color--text--on--fill--success:var(--a-gs--swatch--success--010); --a-gs--color--border--on--fill--success:var(--a-gs--swatch--success--080); }