:root { --brand-colorsraspberry: rgba(217, 22, 103, 1); --brand-colorssteelman-cyan: rgba(22, 193, 200, 1); --brand-colorsdebatably-grey: rgba(55, 58, 58, 1); --lightgrayscalecontent-1: rgba(28, 28, 28, 1); --lightgrayscalebackground-primary: rgba(255, 255, 255, 1); --lightgrayscaleborder: rgba(232, 232, 232, 1); --constant-stylesblack: rgba(28, 28, 28, 1); --constant-styleswhite: rgba(255, 255, 255, 1); --lightgrayscalebackground-secondary: rgba(247, 247, 247, 1); --lightgrayscalecontent-3: rgba(150, 150, 150, 1); --lightbluebase: rgba(0, 133, 255, 1); --lightgrayscalecontent-2: rgba(88, 87, 87, 1); --lightbluebackground: rgba(229, 243, 255, 1); --lightblueborder: rgba(204, 231, 255, 1); /* Updated font variables */ --display-64-font-family: "Inter", sans-serif; --display-64-font-weight: 500; --display-64-font-size: 64px; --display-64-letter-spacing: 0px; --display-64-line-height: 80px; --display-64-font-style: normal; --paragraph-p2-16-font-family: "Inter", sans-serif; --paragraph-p2-16-font-weight: 400; --paragraph-p2-16-font-size: 16px; --paragraph-p2-16-letter-spacing: 0px; --paragraph-p2-16-line-height: 24px; --paragraph-p2-16-font-style: normal; --heading-h5-16-font-family: "Inter", sans-serif; --heading-h5-16-font-weight: 500; --heading-h5-16-font-size: 16px; --heading-h5-16-letter-spacing: 0px; --heading-h5-16-line-height: 24px; --heading-h5-16-font-style: normal; --caps-caps-3-10-bold-font-family: "Inter", sans-serif; --caps-caps-3-10-bold-font-weight: 700; --caps-caps-3-10-bold-font-size: 10px; --caps-caps-3-10-bold-letter-spacing: 0.4px; --caps-caps-3-10-bold-line-height: 16px; --caps-caps-3-10-bold-font-style: normal; --heading-h2-36-font-family: "Inter", sans-serif; --heading-h2-36-font-weight: 500; --heading-h2-36-font-size: 36px; --heading-h2-36-letter-spacing: 0px; --heading-h2-36-line-height: 48px; --heading-h2-36-font-style: normal; --paragraph-p1-20-font-family: "Inter", sans-serif; --paragraph-p1-20-font-weight: 400; --paragraph-p1-20-font-size: 20px; --paragraph-p1-20-letter-spacing: 0px; --paragraph-p1-20-line-height: 32px; --paragraph-p1-20-font-style: normal; --caps-caps-2-12-bold-font-family: "Inter", sans-serif; --caps-caps-2-12-bold-font-weight: 700; --caps-caps-2-12-bold-font-size: 12px; --caps-caps-2-12-bold-letter-spacing: 0.48px; --caps-caps-2-12-bold-line-height: 16px; --caps-caps-2-12-bold-font-style: normal; --paragraph-p3-13-font-family: "Inter", sans-serif; --paragraph-p3-13-font-weight: 400; --paragraph-p3-13-font-size: 13px; --paragraph-p3-13-letter-spacing: 0px; --paragraph-p3-13-line-height: 20px; --paragraph-p3-13-font-style: normal; --heading-h6-13-font-family: "Inter", sans-serif; --heading-h6-13-font-weight: 500; --heading-h6-13-font-size: 13px; --heading-h6-13-letter-spacing: 0px; --heading-h6-13-line-height: 20px; --heading-h6-13-font-style: normal; --light-drop-shadow-2: 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 0px 2px 1px 0px rgba(0, 0, 0, 0.06), 0px 1px 3px 0px rgba(0, 0, 0, 0.1); --light-drop-shadow-1: 0px 1px 1px 0px rgba(0, 0, 0, 0.06); --collection-1-colors-greys-main-text-color: rgba(255, 255, 255, 1); --collection-1-colors-greys-grey-3: rgba(150, 150, 150, 1); --collection-1-colors-greys-grey-2: rgba(255, 255, 255, 1); --collection-1-colors-greys-grey-1: rgba(28, 28, 28, 1); --collection-1-colors-greys-border: rgba(232, 232, 232, 1); --collection-1-colors-greys-background: rgba(247, 247, 247, 1); --collection-1-colors-greys-brand-1: rgba(22, 193, 200, 1); --collection-1-colors-greys-brand-2: rgba(217, 22, 103, 1); --collection-1-colors-greys-brand-3: rgba(55, 58, 58, 1); } /* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: You can apply the theme on any DOM node, not just the `body` */ [data-collection-1-mode="light"] { --collection-1-colors-greys-main-text-color: rgba(255, 255, 255, 1); --collection-1-colors-greys-grey-1: rgba(28, 28, 28, 1); --collection-1-colors-greys-border: rgba(232, 232, 232, 1); } [data-collection-1-mode="dark"] { --collection-1-colors-greys-main-text-color: rgba(28, 28, 28, 1); --collection-1-colors-greys-grey-1: rgba(255, 255, 255, 1); --collection-1-colors-greys-border: rgba(88, 87, 87, 1); } /* I've removed the duplicate :root section that was in the original file since it contained redundant declarations */