/* ------------------------------------------- * Autogenerated by ⛋ Terrazzo. DO NOT EDIT! * ------------------------------------------- */ /* Font faces from fonts/rexall.css (ADR 0011). */ @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(../../fonts/open-sans/open-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(../../fonts/open-sans/open-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(../../fonts/open-sans/open-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(../../fonts/open-sans/open-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/source-code-pro/source-code-pro-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/source-code-pro/source-code-pro-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @layer tokens { :root { --tui-color-background-accent-green: var(--tui-color-green-500); --tui-color-background-accent-green-bold: var(--tui-color-green-700); --tui-color-background-accent-green-subtle: var(--tui-color-green-500); --tui-color-background-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-background-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-background-accent-steel-subtle: var(--tui-color-rexall-steel-500); --tui-color-background-accent-teal: var(--tui-color-teal-500); --tui-color-background-accent-teal-bold: var(--tui-color-teal-700); --tui-color-background-accent-teal-subtle: var(--tui-color-teal-500); --tui-color-background-brand: var(--tui-color-teal-500); --tui-color-background-brand-bold: var(--tui-color-teal-700); --tui-color-background-brand-bold-hovered: var(--tui-color-teal-800); --tui-color-background-brand-bold-pressed: var(--tui-color-teal-900); --tui-color-background-brand-subtle: var(--tui-color-teal-100); --tui-color-background-brand-subtle-hovered: var(--tui-color-teal-200); --tui-color-background-brand-subtle-pressed: var(--tui-color-teal-300); --tui-color-background-danger: var(--tui-color-red-700); --tui-color-background-danger-bold: var(--tui-color-red-700); --tui-color-background-danger-hovered: var(--tui-color-red-800); --tui-color-background-danger-pressed: var(--tui-color-red-900); --tui-color-background-danger-subtle: var(--tui-color-red-100); --tui-color-background-danger-subtle-hovered: var(--tui-color-red-200); --tui-color-background-danger-subtle-pressed: var(--tui-color-red-300); --tui-color-background-disabled: var(--tui-color-neutral-100); --tui-color-background-hovered: var(--tui-color-neutral-100); --tui-color-background-information: var(--tui-color-rexall-steel-500); --tui-color-background-information-bold: var(--tui-color-rexall-steel-700); --tui-color-background-information-subtle: var(--tui-color-rexall-steel-100); --tui-color-background-inverse: var(--tui-color-neutral-900); --tui-color-background-inverse-hovered: var(--tui-color-neutral-1000); --tui-color-background-inverse-pressed: var(--tui-color-neutral-800); --tui-color-background-neutral: var(--tui-color-neutral-400); --tui-color-background-neutral-bold: var(--tui-color-neutral-700); --tui-color-background-neutral-hovered: var(--tui-color-neutral-300); --tui-color-background-neutral-pressed: var(--tui-color-neutral-500); --tui-color-background-neutral-subtle: var(--tui-color-neutral-200); --tui-color-background-neutral-subtle-hovered: var(--tui-color-neutral-100); --tui-color-background-neutral-subtle-pressed: var(--tui-color-neutral-300); --tui-color-background-pressed: var(--tui-color-neutral-200); --tui-color-background-selected: var(--tui-color-teal-100); --tui-color-background-success: var(--tui-color-green-500); --tui-color-background-success-bold: var(--tui-color-green-700); --tui-color-background-success-subtle: var(--tui-color-green-100); --tui-color-background-warning: var(--tui-color-yellow-300); --tui-color-background-warning-bold: var(--tui-color-yellow-300); --tui-color-background-warning-subtle: var(--tui-color-yellow-100); --tui-color-black: oklch(0% 0 0); --tui-color-blanket-background: var(--tui-color-neutral-900); --tui-color-border: var(--tui-color-neutral-300); --tui-color-border-accent-green: var(--tui-color-green-500); --tui-color-border-accent-green-bold: var(--tui-color-green-700); --tui-color-border-accent-green-subtle: var(--tui-color-green-300); --tui-color-border-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-border-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-border-accent-steel-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-accent-teal: var(--tui-color-teal-500); --tui-color-border-accent-teal-bold: var(--tui-color-teal-700); --tui-color-border-accent-teal-subtle: var(--tui-color-teal-300); --tui-color-border-brand: var(--tui-color-teal-700); --tui-color-border-brand-bold: var(--tui-color-teal-700); --tui-color-border-brand-hovered: var(--tui-color-teal-800); --tui-color-border-brand-pressed: var(--tui-color-teal-900); --tui-color-border-brand-subtle: var(--tui-color-teal-300); --tui-color-border-danger: var(--tui-color-red-600); --tui-color-border-danger-bold: var(--tui-color-red-700); --tui-color-border-danger-hovered: var(--tui-color-red-700); --tui-color-border-danger-pressed: var(--tui-color-red-800); --tui-color-border-danger-subtle: var(--tui-color-red-300); --tui-color-border-disabled: var(--tui-color-neutral-200); --tui-color-border-focus: var(--tui-color-neutral-1000); --tui-color-border-information: var(--tui-color-rexall-steel-600); --tui-color-border-information-bold: var(--tui-color-rexall-steel-700); --tui-color-border-information-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-inverse-focus: var(--tui-color-white); --tui-color-border-neutral: var(--tui-color-neutral-300); --tui-color-border-neutral-bold: var(--tui-color-neutral-600); --tui-color-border-neutral-bold-hovered: var(--tui-color-neutral-700); --tui-color-border-neutral-bold-pressed: var(--tui-color-neutral-800); --tui-color-border-neutral-hovered: var(--tui-color-neutral-200); --tui-color-border-neutral-pressed: var(--tui-color-neutral-400); --tui-color-border-neutral-subtle: var(--tui-color-neutral-300); --tui-color-border-neutral-subtlest: var(--tui-color-neutral-200); --tui-color-border-selected: var(--tui-color-teal-700); --tui-color-border-success: var(--tui-color-green-700); --tui-color-border-success-bold: var(--tui-color-green-700); --tui-color-border-success-subtle: var(--tui-color-green-300); --tui-color-border-warning: var(--tui-color-yellow-600); --tui-color-border-warning-bold: var(--tui-color-yellow-700); --tui-color-border-warning-subtle: var(--tui-color-yellow-300); --tui-color-container-background: var(--tui-color-white); --tui-color-container-background-accent-green: var(--tui-color-background-accent-green); --tui-color-container-background-accent-green-bold: var(--tui-color-background-accent-green-bold); --tui-color-container-background-accent-green-subtle: var(--tui-color-background-accent-green-subtle); --tui-color-container-background-accent-steel: var(--tui-color-background-accent-steel); --tui-color-container-background-accent-steel-bold: var(--tui-color-background-accent-steel-bold); --tui-color-container-background-accent-steel-subtle: var(--tui-color-background-accent-steel-subtle); --tui-color-container-background-accent-teal: var(--tui-color-background-accent-teal); --tui-color-container-background-accent-teal-bold: var(--tui-color-background-accent-teal-bold); --tui-color-container-background-accent-teal-subtle: var(--tui-color-background-accent-teal-subtle); --tui-color-container-background-brand: var(--tui-color-background-brand); --tui-color-container-background-brand-bold: var(--tui-color-background-brand-bold); --tui-color-container-background-brand-subtle: var(--tui-color-background-brand-subtle); --tui-color-container-background-danger: var(--tui-color-background-danger); --tui-color-container-background-danger-bold: var(--tui-color-background-danger-bold); --tui-color-container-background-danger-subtle: var(--tui-color-background-danger-subtle); --tui-color-container-background-information: var(--tui-color-background-information); --tui-color-container-background-information-bold: var(--tui-color-background-information-bold); --tui-color-container-background-information-subtle: var(--tui-color-background-information-subtle); --tui-color-container-background-neutral: var(--tui-color-background-neutral); --tui-color-container-background-neutral-bold: var(--tui-color-background-inverse); --tui-color-container-background-neutral-subtle: var(--tui-color-surface-background-neutral-subtle); --tui-color-container-background-success: var(--tui-color-background-success); --tui-color-container-background-success-bold: var(--tui-color-background-success-bold); --tui-color-container-background-success-subtle: var(--tui-color-background-success-subtle); --tui-color-container-background-warning: var(--tui-color-background-warning); --tui-color-container-background-warning-bold: var(--tui-color-background-warning-bold); --tui-color-container-background-warning-subtle: var(--tui-color-background-warning-subtle); --tui-color-container-border: var(--tui-color-neutral-300); --tui-color-container-border-accent-green: var(--tui-color-border-accent-green); --tui-color-container-border-accent-green-bold: var(--tui-color-border-accent-green-bold); --tui-color-container-border-accent-green-subtle: var(--tui-color-border-accent-green-subtle); --tui-color-container-border-accent-steel: var(--tui-color-border-accent-steel); --tui-color-container-border-accent-steel-bold: var(--tui-color-border-accent-steel-bold); --tui-color-container-border-accent-steel-subtle: var(--tui-color-border-accent-steel-subtle); --tui-color-container-border-accent-teal: var(--tui-color-border-accent-teal); --tui-color-container-border-accent-teal-bold: var(--tui-color-border-accent-teal-bold); --tui-color-container-border-accent-teal-subtle: var(--tui-color-border-accent-teal-subtle); --tui-color-container-border-brand: var(--tui-color-border-brand); --tui-color-container-border-brand-bold: var(--tui-color-border-brand-bold); --tui-color-container-border-brand-subtle: var(--tui-color-border-brand-subtle); --tui-color-container-border-danger: var(--tui-color-border-danger); --tui-color-container-border-danger-bold: var(--tui-color-border-danger-bold); --tui-color-container-border-danger-subtle: var(--tui-color-border-danger-subtle); --tui-color-container-border-information: var(--tui-color-border-information); --tui-color-container-border-information-bold: var(--tui-color-border-information-bold); --tui-color-container-border-information-subtle: var(--tui-color-border-information-subtle); --tui-color-container-border-neutral: var(--tui-color-border-neutral); --tui-color-container-border-neutral-bold: var(--tui-color-border-neutral-bold); --tui-color-container-border-neutral-subtle: var(--tui-color-border-neutral-subtle); --tui-color-container-border-success: var(--tui-color-border-success); --tui-color-container-border-success-bold: var(--tui-color-border-success-bold); --tui-color-container-border-success-subtle: var(--tui-color-border-success-subtle); --tui-color-container-border-warning: var(--tui-color-border-warning); --tui-color-container-border-warning-bold: var(--tui-color-border-warning-bold); --tui-color-container-border-warning-subtle: var(--tui-color-border-warning-subtle); /* Text inside a box that holds content, such as a card. */ --tui-color-container-text: var(--tui-color-text); /* Secondary text inside a box that holds content. */ --tui-color-container-text-neutral-subtle: var(--tui-color-text-neutral-subtle); --tui-color-green-100: oklch(95.8% 0.0339 134); --tui-color-green-200: oklch(91% 0.0654 134); --tui-color-green-300: oklch(86% 0.0956 134); --tui-color-green-400: oklch(79.5% 0.1328 134); --tui-color-green-500: var(--tui-color-rexall-well-green); --tui-color-green-600: oklch(63.5% 0.1512 134); --tui-color-green-700: oklch(54.5% 0.1328 134); --tui-color-green-800: oklch(45.5% 0.1139 134); --tui-color-green-900: oklch(36.5% 0.0944 134); --tui-color-green-1000: oklch(27% 0.0731 134); --tui-color-icon: var(--tui-color-neutral-900); --tui-color-icon-brand: var(--tui-color-teal-700); --tui-color-icon-danger: var(--tui-color-red-700); --tui-color-icon-disabled: var(--tui-color-neutral-600); --tui-color-icon-information: var(--tui-color-rexall-steel-700); --tui-color-icon-inverse: var(--tui-color-white); --tui-color-icon-neutral-subtle: var(--tui-color-neutral-700); --tui-color-icon-success: var(--tui-color-green-700); --tui-color-icon-warning: var(--tui-color-yellow-700); --tui-color-input-background: var(--tui-color-white); --tui-color-input-background-disabled: var(--tui-color-neutral-100); --tui-color-input-border: var(--tui-color-neutral-600); --tui-color-link-text: var(--tui-color-teal-700); --tui-color-link-text-hovered: var(--tui-color-teal-800); --tui-color-link-text-inverse: var(--tui-color-text-inverse); --tui-color-link-text-inverse-hovered: var(--tui-color-text-inverse); --tui-color-link-text-inverse-pressed: var(--tui-color-text-inverse); --tui-color-link-text-inverse-visited: var(--tui-color-text-inverse); --tui-color-link-text-neutral: var(--tui-color-text-neutral); --tui-color-link-text-neutral-hovered: var(--tui-color-text-neutral-hovered); --tui-color-link-text-neutral-pressed: var(--tui-color-text-neutral-pressed); --tui-color-link-text-neutral-visited: var(--tui-color-text-neutral); --tui-color-link-text-pressed: var(--tui-color-teal-800); --tui-color-link-text-visited: var(--tui-color-magenta-700); --tui-color-magenta-100: oklch(95.8% 0.0241 351.2); --tui-color-magenta-200: oklch(91% 0.0541 351.2); --tui-color-magenta-300: oklch(86% 0.0816 351.2); --tui-color-magenta-400: oklch(79.5% 0.1047 351.2); --tui-color-magenta-500: oklch(71.5% 0.13 351.2); --tui-color-magenta-600: oklch(63.5% 0.153 351.2); --tui-color-magenta-700: var(--tui-color-rexall-berry-purple); --tui-color-magenta-800: oklch(45.5% 0.1676 351.2); --tui-color-magenta-900: oklch(36.5% 0.1389 351.2); --tui-color-magenta-1000: oklch(27% 0.1075 351.2); --tui-color-neutral-100: oklch(95.8% 0 0); --tui-color-neutral-200: oklch(91% 0 0); --tui-color-neutral-300: oklch(86% 0 0); --tui-color-neutral-400: oklch(79.5% 0 0); --tui-color-neutral-500: oklch(71.5% 0 0); --tui-color-neutral-600: oklch(63.5% 0 0); --tui-color-neutral-700: oklch(54.5% 0 0); --tui-color-neutral-800: oklch(45.5% 0 0); --tui-color-neutral-900: var(--tui-color-rexall-charcoal-grey); --tui-color-neutral-1000: oklch(27% 0 0); --tui-color-neutral-A100: oklch(10.78% 0 0 / 0.056); --tui-color-neutral-A200: oklch(7.66% 0 0 / 0.118); --tui-color-neutral-A300: oklch(6.76% 0 0 / 0.182); --tui-color-neutral-A400: oklch(6.59% 0 0 / 0.264); --tui-color-neutral-A500: oklch(5.18% 0 0 / 0.362); --tui-color-neutral-A600: oklch(1.98% 0 0 / 0.457); --tui-color-neutral-A700: oklch(0% 0 0 / 0.561); --tui-color-neutral-A800: oklch(3.14% 0 0 / 0.661); --tui-color-neutral-A900: oklch(4.4% 0 0 / 0.797); --tui-color-neutral-A1000: oklch(3.14% 0 0 / 0.85); --tui-color-orange-100: oklch(95.8% 0.023 48.9); --tui-color-orange-200: oklch(91% 0.0514 48.9); --tui-color-orange-300: oklch(86% 0.0834 48.9); --tui-color-orange-400: oklch(79.5% 0.1188 48.9); --tui-color-orange-500: oklch(71.5% 0.1528 48.9); --tui-color-orange-600: var(--tui-color-rexall-terracotta-orange); --tui-color-orange-700: oklch(54.5% 0.1463 48.9); --tui-color-orange-800: oklch(45.5% 0.1222 48.9); --tui-color-orange-900: oklch(36.5% 0.098 48.9); --tui-color-orange-1000: oklch(27% 0.0725 48.9); --tui-color-pink-100: oklch(95.8% 0.0216 5); --tui-color-pink-200: oklch(91% 0.0485 5); --tui-color-pink-300: oklch(86% 0.0792 5); --tui-color-pink-400: oklch(79.5% 0.1241 5); --tui-color-pink-500: oklch(71.5% 0.1644 5); --tui-color-pink-600: var(--tui-color-rexall-tulip-pink); --tui-color-pink-700: oklch(54.5% 0.1544 5); --tui-color-pink-800: oklch(45.5% 0.1324 5); --tui-color-pink-900: oklch(36.5% 0.1098 5); --tui-color-pink-1000: oklch(27% 0.085 5); --tui-color-red-100: oklch(95.8% 0.0206 23.7); --tui-color-red-200: oklch(91% 0.0462 23.7); --tui-color-red-300: oklch(86% 0.0754 23.7); --tui-color-red-400: oklch(79.5% 0.1177 23.7); --tui-color-red-500: oklch(71.5% 0.1783 23.7); --tui-color-red-600: var(--tui-color-rexall-ladybug-red); --tui-color-red-700: oklch(54.5% 0.2142 23.7); --tui-color-red-800: oklch(45.5% 0.1837 23.7); --tui-color-red-900: oklch(36.5% 0.1475 23.7); --tui-color-red-1000: oklch(27% 0.1091 23.7); /* Be Well */ --tui-color-rexall-apricot-orange: oklch(71.4% 0.1525 56.134); /* Skin Health */ --tui-color-rexall-ash: oklch(90% 0.0027 106.45); /* Rexall */ --tui-color-rexall-banana-yellow: oklch(95.33% 0.0757 95.318); /* Berry Purple — magenta anchor */ --tui-color-rexall-berry-purple: oklch(51.17% 0.1852 351.18); /* Rexall */ --tui-color-rexall-blush-pink: oklch(58.59% 0.1586 4.6101); /* Be Well promo */ --tui-color-rexall-blush-red: oklch(86.8% 0.055 21.054); /* Be Well promo */ --tui-color-rexall-burgundy-red: oklch(45.44% 0.1821 28.716); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-calming-blue-haze: oklch(80.84% 0.0387 249.54); /* Charcoal Grey — neutral anchor */ --tui-color-rexall-charcoal-grey: oklch(32.5% 0 0); /* Rexall */ --tui-color-rexall-cloud-grey: oklch(84.52% 0 0); /* Be Well promo */ --tui-color-rexall-cream-yellow: oklch(99.23% 0.0159 98.986); /* Be Well promo */ --tui-color-rexall-daisy-yellow: oklch(92.84% 0.1204 106.48); /* Rexall AODA */ --tui-color-rexall-deep-ocean: oklch(42.34% 0.0723 194.8); /* Be Well promo */ --tui-color-rexall-dusty-red: oklch(50.13% 0.1755 23.713); /* Be Well */ --tui-color-rexall-evergreen: oklch(51.19% 0.0835 138.17); /* Rexall */ --tui-color-rexall-fog-grey: oklch(97.91% 0 0); /* Be Well */ --tui-color-rexall-forest-green: oklch(45.31% 0.073 146.02); /* Be Well */ --tui-color-rexall-garden-green: oklch(54.77% 0.0953 138.22); /* Be Well */ --tui-color-rexall-granite-grey: oklch(53.49% 0.005 17.313); /* Rexall */ --tui-color-rexall-grapefruit: oklch(95.01% 0.0848 98.329); /* Rexall */ --tui-color-rexall-grass-green: oklch(78.93% 0.1268 133.59); /* Be Well */ --tui-color-rexall-grey-blue: oklch(59.99% 0.0929 185.62); /* Be Well promo */ --tui-color-rexall-highlighter-yellow: oklch(92.14% 0.1824 105.41); /* Digestive */ --tui-color-rexall-immunity-orange: oklch(71.08% 0.1395 51.737); /* Ladybug Red — red anchor */ --tui-color-rexall-ladybug-red: oklch(60.41% 0.2338 23.742); /* Rexall AODA */ --tui-color-rexall-lakeside-blue: oklch(52.74% 0.0872 187.63); /* Be Well */ --tui-color-rexall-lavender-purple: oklch(89.47% 0.0375 342.55); /* Rexall */ --tui-color-rexall-lemon-yellow: oklch(88.28% 0.1811 94.46); /* Rexall */ --tui-color-rexall-light-blush-pink: oklch(85.56% 0.0673 10.506); /* Rexall */ --tui-color-rexall-light-drizzle: oklch(91.04% 0.0336 191.96); /* Be Well promo */ --tui-color-rexall-light-red: oklch(94.46% 0.0142 12.025); /* Be Well */ --tui-color-rexall-lime-green: oklch(75.39% 0.152 134.81); /* Be Well promo */ --tui-color-rexall-lipstick-red: oklch(62.76% 0.2141 23.004); /* Be Well */ --tui-color-rexall-melon-orange: oklch(85.06% 0.0788 62.059); /* Rexall */ --tui-color-rexall-mist-blue: oklch(95.8% 0.0169 192.36); /* Be Well */ --tui-color-rexall-moss-green: oklch(64.94% 0.1505 133.89); /* Be Well */ --tui-color-rexall-night-grey: oklch(42.18% 0.0031 48.66); /* Be Well */ --tui-color-rexall-pansy-purple: oklch(79.17% 0.0759 344.13); /* Be Well */ --tui-color-rexall-peachy-orange: oklch(92.38% 0.0385 63.533); /* Be Well promo */ --tui-color-rexall-pinky-red: oklch(96.91% 0.0151 17.418); /* Be Well */ --tui-color-rexall-plum-purple: oklch(59.35% 0.1561 347.67); /* Poolside Blue — teal anchor */ --tui-color-rexall-poolside-blue: oklch(68.76% 0.1147 188.23); /* Rexall */ --tui-color-rexall-rain-blue: oklch(87.81% 0.0553 193.35); /* Be Well promo */ --tui-color-rexall-rosy-red: oklch(69.56% 0.183 23.103); /* Rexall */ --tui-color-rexall-ruby-red: oklch(57.73% 0.2098 23.23); /* Rexall */ --tui-color-rexall-sage-green: oklch(88.81% 0.0662 132.17); /* Be Well */ --tui-color-rexall-seaside-blue: oklch(49.86% 0.0891 182.42); /* Rexall AODA */ --tui-color-rexall-shoreline-blue: oklch(63.95% 0.1102 188.54); /* Be Well */ --tui-color-rexall-silver-grey: oklch(66.37% 0.0049 0.0752); /* Be Well */ --tui-color-rexall-sky-blue: oklch(84.85% 0.0638 193.53); /* Rexall */ --tui-color-rexall-slate-grey: oklch(53.82% 0 0); --tui-color-rexall-steel: oklch(52.12% 0.0301 259.03); --tui-color-rexall-steel-100: oklch(95.8% 0.0077 249.5); --tui-color-rexall-steel-200: oklch(91% 0.0173 249.5); --tui-color-rexall-steel-300: oklch(86% 0.0277 249.5); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-steel-400: var(--tui-color-rexall-calming-blue-haze); --tui-color-rexall-steel-500: oklch(71.5% 0.0348 249.5); --tui-color-rexall-steel-600: oklch(63.5% 0.0315 249.5); --tui-color-rexall-steel-700: oklch(54.5% 0.0276 249.5); --tui-color-rexall-steel-800: oklch(45.5% 0.0237 249.5); --tui-color-rexall-steel-900: oklch(36.5% 0.0196 249.5); --tui-color-rexall-steel-1000: oklch(27% 0.0152 249.5); /* Sunshine Yellow — yellow anchor */ --tui-color-rexall-sunshine-yellow: oklch(86.72% 0.1773 90.85); /* Be Well promo */ --tui-color-rexall-taupe-red: oklch(75.68% 0.0781 13.998); /* Rexall */ --tui-color-rexall-tea-green: oklch(95.59% 0.0563 131.52); /* Be Well */ --tui-color-rexall-teal-blue: oklch(68.53% 0.0897 185.9); /* Terracotta Orange — orange anchor */ --tui-color-rexall-terracotta-orange: oklch(65.65% 0.1764 48.889); /* Tulip Pink — pink anchor */ --tui-color-rexall-tulip-pink: oklch(67.04% 0.1842 5.0399); /* Be Well promo */ --tui-color-rexall-vanilla-yellow: oklch(95.6% 0.072 105.12); /* Be Well */ --tui-color-rexall-venice-blue: oklch(40.54% 0.0851 236.88); /* Be Well */ --tui-color-rexall-washed-blue: oklch(78.7% 0.0619 185.5); /* Well Green — green anchor */ --tui-color-rexall-well-green: oklch(72.73% 0.1698 134.03); /* Digestive */ --tui-color-rexall-well-green-deep: oklch(50.28% 0.1219 142.99); --tui-color-surface-background: var(--tui-color-white); --tui-color-surface-background-brand: var(--tui-color-rexall-steel); /* A page or section tinted with the brand. Plain surface unless a brand sets a tint. */ --tui-color-surface-background-brand-subtle: var(--tui-color-surface-background); --tui-color-surface-background-neutral-subtle: var(--tui-color-neutral-100); --tui-color-tag-background-accent-green: var(--tui-color-green-100); --tui-color-tag-background-accent-magenta: var(--tui-color-magenta-100); --tui-color-tag-background-accent-neutral: var(--tui-color-neutral-100); --tui-color-tag-background-accent-orange: var(--tui-color-orange-100); --tui-color-tag-background-accent-pink: var(--tui-color-pink-100); --tui-color-tag-background-accent-steel: var(--tui-color-rexall-steel-100); --tui-color-tag-background-accent-teal: var(--tui-color-teal-100); --tui-color-tag-background-accent-yellow: var(--tui-color-yellow-100); --tui-color-tag-text-accent-green: var(--tui-color-green-800); --tui-color-tag-text-accent-magenta: var(--tui-color-magenta-800); --tui-color-tag-text-accent-neutral: var(--tui-color-neutral-800); --tui-color-tag-text-accent-orange: var(--tui-color-orange-800); --tui-color-tag-text-accent-pink: var(--tui-color-pink-800); --tui-color-tag-text-accent-steel: var(--tui-color-rexall-steel-800); --tui-color-tag-text-accent-teal: var(--tui-color-teal-800); --tui-color-tag-text-accent-yellow: var(--tui-color-yellow-800); --tui-color-teal-100: oklch(95.8% 0.0229 188.2); --tui-color-teal-200: oklch(91% 0.0422 188.2); --tui-color-teal-300: oklch(86% 0.0602 188.2); --tui-color-teal-400: oklch(79.5% 0.0818 188.2); /* Poolside Blue — teal anchor */ --tui-color-teal-500: var(--tui-color-rexall-poolside-blue); --tui-color-teal-600: oklch(63.5% 0.1071 188.2); --tui-color-teal-700: oklch(54.5% 0.0941 188.2); --tui-color-teal-800: oklch(45.5% 0.079 188.2); --tui-color-teal-900: oklch(36.5% 0.0634 188.2); --tui-color-teal-1000: oklch(27% 0.0469 188.2); --tui-color-text: var(--tui-color-neutral-900); --tui-color-text-brand: var(--tui-color-teal-800); --tui-color-text-brand-hovered: var(--tui-color-teal-900); --tui-color-text-brand-pressed: var(--tui-color-teal-900); --tui-color-text-danger: var(--tui-color-red-700); --tui-color-text-danger-hovered: var(--tui-color-red-800); --tui-color-text-danger-pressed: var(--tui-color-red-800); --tui-color-text-disabled: var(--tui-color-neutral-600); --tui-color-text-information: var(--tui-color-rexall-steel-700); --tui-color-text-inverse: var(--tui-color-white); --tui-color-text-neutral: var(--tui-color-neutral-900); --tui-color-text-neutral-hovered: var(--tui-color-neutral-800); --tui-color-text-neutral-pressed: var(--tui-color-neutral-1000); --tui-color-text-neutral-subtle: var(--tui-color-neutral-800); --tui-color-text-success: var(--tui-color-green-700); --tui-color-text-warning: var(--tui-color-yellow-700); --tui-color-transparent: oklch(0% 0 0 / 0); --tui-color-white: oklch(100% 0 0); --tui-color-yellow-100: oklch(95.8% 0.0354 90.8); --tui-color-yellow-200: oklch(91% 0.1029 90.8); /* Sunshine Yellow — yellow anchor */ --tui-color-yellow-300: var(--tui-color-rexall-sunshine-yellow); --tui-color-yellow-400: oklch(79.5% 0.1624 88.3); --tui-color-yellow-500: oklch(71.5% 0.1463 85.7); --tui-color-yellow-600: oklch(63.5% 0.1305 83.1); --tui-color-yellow-700: oklch(54.5% 0.1126 80.6); --tui-color-yellow-800: oklch(45.5% 0.0948 78); --tui-color-yellow-900: oklch(36.5% 0.0768 75.4); --tui-color-yellow-1000: oklch(27% 0.0575 72.8); --tui-elevation-shadow-overflow: 0px 0px 8px 0px oklch(27% 0 0 / 0.16), 0px 0px 1px 0px oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-perimeter: oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-spread: oklch(27% 0 0 / 0.16); --tui-elevation-shadow-overlay: 0px 8px 12px 0px oklch(27% 0 0 / 0.15), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-shadow-raised: 0px 1px 1px 0px oklch(27% 0 0 / 0.25), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-surface: var(--tui-color-transparent); --tui-elevation-surface-container: var(--tui-color-neutral-A100); --tui-elevation-surface-container-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-container-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay: var(--tui-color-transparent); --tui-elevation-surface-overlay-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-raised: var(--tui-color-transparent); --tui-elevation-surface-raised-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-raised-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-sunken: var(--tui-color-neutral-A100); --tui-font-family-mono: "Source Code Pro", ui-monospace, "Consolas", "Menlo", monospace; --tui-font-family-sans: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --tui-font-leading-050: 16px; --tui-font-leading-075: 20px; --tui-font-leading-100: 24px; --tui-font-leading-200: 28px; --tui-font-leading-300: 28px; --tui-font-leading-400: 32px; --tui-font-leading-500: 40px; --tui-font-leading-600: 48px; --tui-font-leading-700: 56px; --tui-font-leading-800: 68px; --tui-font-leading-900: 96px; --tui-font-leading-1000: 116px; --tui-font-size-050: 12px; --tui-font-size-075: 14px; --tui-font-size-100: 16px; --tui-font-size-200: 20px; --tui-font-size-300: 24px; --tui-font-size-400: 28px; --tui-font-size-500: 32px; --tui-font-size-600: 40px; --tui-font-size-700: 48px; --tui-font-size-800: 56px; --tui-font-size-900: 80px; --tui-font-size-1000: 96px; --tui-font-tracking-default: 0rem; --tui-font-weight-bold: 700; --tui-font-weight-medium: 500; --tui-font-weight-regular: 400; --tui-font-weight-semibold: 600; --tui-layer-0: 0; --tui-layer-10: 10; --tui-layer-20: 20; --tui-layer-30: 30; --tui-layer-40: 40; --tui-layer-50: 50; --tui-layer-60: 60; --tui-layer-base: var(--tui-layer-0); --tui-layer-modal: var(--tui-layer-50); --tui-layer-navigation: var(--tui-layer-10); --tui-layer-notification: var(--tui-layer-60); --tui-layer-overlay: var(--tui-layer-40); --tui-layer-popover: var(--tui-layer-30); --tui-layer-sticky: var(--tui-layer-20); --tui-motion-action-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-action-pressed: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-blanket-enter: var(--tui-motion-duration-long) 0ms var(--tui-motion-easing-inout-bold); --tui-motion-blanket-exit: var(--tui-motion-duration-medium) 0ms var(--tui-motion-easing-in-practical); --tui-motion-control-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-selected: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-toggle: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-curve-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6); --tui-motion-curve-inout-bold: cubic-bezier(0.4, 0, 0, 1); --tui-motion-curve-out-bold: cubic-bezier(0, 0.4, 0, 1); --tui-motion-curve-out-practical: cubic-bezier(0.4, 1, 0.6, 1); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-curve-spring: cubic-bezier(0.363, 1.102, 0.089, 1.043); --tui-motion-duration-0: 0ms; --tui-motion-duration-050: 50ms; --tui-motion-duration-100: 100ms; --tui-motion-duration-150: 150ms; --tui-motion-duration-200: 200ms; --tui-motion-duration-250: 250ms; --tui-motion-duration-400: 400ms; --tui-motion-duration-600: 600ms; --tui-motion-duration-instant: var(--tui-motion-duration-0); --tui-motion-duration-long: var(--tui-motion-duration-250); --tui-motion-duration-medium: var(--tui-motion-duration-200); --tui-motion-duration-short: var(--tui-motion-duration-150); --tui-motion-duration-xlong: var(--tui-motion-duration-400); --tui-motion-duration-xshort: var(--tui-motion-duration-100); --tui-motion-duration-xxlong: var(--tui-motion-duration-600); --tui-motion-duration-xxshort: var(--tui-motion-duration-050); --tui-motion-easing-in-practical: var(--tui-motion-curve-in-practical); --tui-motion-easing-inout-bold: var(--tui-motion-curve-inout-bold); --tui-motion-easing-out-bold: var(--tui-motion-curve-out-bold); --tui-motion-easing-out-practical: var(--tui-motion-curve-out-practical); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-easing-spring: var(--tui-motion-curve-spring); /* Corners of a small action (Button sm). */ --tui-shape-action-round: var(--tui-size-radius-lg); /* Corners of a medium action (Button md). */ --tui-shape-action-rounder: var(--tui-size-radius-xl); /* Corners of a large action (Button lg). The roundest action, not always a pill. */ --tui-shape-action-roundest: var(--tui-size-radius-2xl); /* Corners of a box that holds content, such as a card. Follows the surface corners unless a brand sets its own. */ --tui-shape-container-rounder: var(--tui-shape-surface-rounder); --tui-shape-rounder: var(--tui-size-radius-lg); --tui-shape-surface-rounder: var(--tui-size-radius-2xl); --tui-size-border-hairline: var(--tui-size-border-sm); --tui-size-border-md: 2px; --tui-size-border-narrow: var(--tui-size-border-md); --tui-size-border-sm: 1px; --tui-size-icon-lg: var(--tui-space-300); --tui-size-icon-md: var(--tui-space-250); --tui-size-icon-sm: var(--tui-space-200); --tui-size-icon-xs: var(--tui-space-100); --tui-size-radius-2xl: 16px; --tui-size-radius-3xl: 20px; --tui-size-radius-4xl: 24px; --tui-size-radius-full: 9999px; --tui-size-radius-lg: 8px; --tui-size-radius-md: 6px; --tui-size-radius-none: 0px; --tui-size-radius-sm: 4px; --tui-size-radius-xl: 12px; --tui-size-radius-xs: 2px; --tui-space-0: 0px; --tui-space-025: 2px; --tui-space-050: 4px; --tui-space-075: 6px; --tui-space-100: 8px; --tui-space-125: 10px; --tui-space-150: 12px; --tui-space-200: 16px; --tui-space-250: 20px; --tui-space-300: 24px; --tui-space-400: 32px; --tui-space-500: 40px; --tui-space-600: 48px; --tui-space-700: 56px; --tui-space-800: 64px; --tui-space-900: 72px; --tui-space-1000: 80px; --tui-space-1100: 88px; --tui-space-1200: 96px; --tui-space-1300: 104px; --tui-space-1400: 112px; --tui-space-1500: 120px; --tui-space-inline: var(--tui-space-100); --tui-space-inline-dense: var(--tui-space-050); --tui-space-inline-loose: var(--tui-space-150); --tui-space-inline-looser: var(--tui-space-250); --tui-space-inset: var(--tui-space-200); --tui-space-inset-dense: var(--tui-space-100); --tui-space-inset-loose: var(--tui-space-250); --tui-space-inset-looser: var(--tui-space-400); --tui-space-inset-squish: 12px 24px; --tui-space-inset-squish-dense: 8px 24px; --tui-space-inset-squish-loose: 16px 24px; --tui-space-inset-stretch: 8px 16px; --tui-space-inset-stretch-loosest: 16px 16px; --tui-space-negative-025: -2px; --tui-space-negative-050: -4px; --tui-space-negative-075: -6px; --tui-space-negative-100: -8px; --tui-space-negative-150: -12px; --tui-space-negative-200: -16px; --tui-space-negative-250: -20px; --tui-space-negative-300: -24px; --tui-space-negative-400: -32px; --tui-space-stack: var(--tui-space-200); --tui-space-stack-dense: var(--tui-space-100); --tui-space-stack-denser: var(--tui-space-050); --tui-space-stack-loose: var(--tui-space-300); --tui-space-stack-looser: var(--tui-space-400); --tui-space-stack-loosest: var(--tui-space-600); --tui-typography-action-label-lg: var(--tui-typography-action-label-lg-font-weight) var(--tui-typography-action-label-lg-font-size)/var(--tui-typography-action-label-lg-line-height) var(--tui-typography-action-label-lg-font-family); --tui-typography-action-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-action-label-lg-font-size: var(--tui-font-size-100); --tui-typography-action-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-lg-letter-spacing: 0px; --tui-typography-action-label-lg-line-height: 1.5; --tui-typography-action-label-md: var(--tui-typography-action-label-md-font-weight) var(--tui-typography-action-label-md-font-size)/var(--tui-typography-action-label-md-line-height) var(--tui-typography-action-label-md-font-family); --tui-typography-action-label-md-font-family: var(--tui-font-family-sans); --tui-typography-action-label-md-font-size: var(--tui-font-size-075); --tui-typography-action-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-md-letter-spacing: 0px; --tui-typography-action-label-md-line-height: 1.4286; --tui-typography-action-label-xl: var(--tui-typography-action-label-xl-font-weight) var(--tui-typography-action-label-xl-font-size)/var(--tui-typography-action-label-xl-line-height) var(--tui-typography-action-label-xl-font-family); --tui-typography-action-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-action-label-xl-font-size: var(--tui-font-size-200); --tui-typography-action-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-xl-letter-spacing: 0px; --tui-typography-action-label-xl-line-height: 1.4; --tui-typography-body-lg: var(--tui-typography-body-lg-font-weight) var(--tui-typography-body-lg-font-size)/var(--tui-typography-body-lg-line-height) var(--tui-typography-body-lg-font-family); --tui-typography-body-lg-font-family: var(--tui-font-family-sans); --tui-typography-body-lg-font-size: var(--tui-font-size-200); --tui-typography-body-lg-font-weight: var(--tui-font-weight-regular); --tui-typography-body-lg-letter-spacing: 0px; --tui-typography-body-lg-line-height: 1.4; --tui-typography-body-md: var(--tui-typography-body-md-font-weight) var(--tui-typography-body-md-font-size)/var(--tui-typography-body-md-line-height) var(--tui-typography-body-md-font-family); --tui-typography-body-md-font-family: var(--tui-font-family-sans); --tui-typography-body-md-font-size: var(--tui-font-size-100); --tui-typography-body-md-font-weight: var(--tui-font-weight-regular); --tui-typography-body-md-letter-spacing: 0px; --tui-typography-body-md-line-height: 1.5; --tui-typography-body-sm: var(--tui-typography-body-sm-font-weight) var(--tui-typography-body-sm-font-size)/var(--tui-typography-body-sm-line-height) var(--tui-typography-body-sm-font-family); --tui-typography-body-sm-font-family: var(--tui-font-family-sans); --tui-typography-body-sm-font-size: var(--tui-font-size-075); --tui-typography-body-sm-font-weight: var(--tui-font-weight-regular); --tui-typography-body-sm-letter-spacing: 0px; --tui-typography-body-sm-line-height: 1.4286; --tui-typography-body-xs: var(--tui-typography-body-xs-font-weight) var(--tui-typography-body-xs-font-size)/var(--tui-typography-body-xs-line-height) var(--tui-typography-body-xs-font-family); --tui-typography-body-xs-font-family: var(--tui-font-family-sans); --tui-typography-body-xs-font-size: var(--tui-font-size-050); --tui-typography-body-xs-font-weight: var(--tui-font-weight-regular); --tui-typography-body-xs-letter-spacing: 0px; --tui-typography-body-xs-line-height: 1.3333; --tui-typography-code-md: var(--tui-typography-code-md-font-weight) var(--tui-typography-code-md-font-size)/var(--tui-typography-code-md-line-height) var(--tui-typography-code-md-font-family); --tui-typography-code-md-font-family: var(--tui-font-family-mono); --tui-typography-code-md-font-size: var(--tui-font-size-075); --tui-typography-code-md-font-weight: var(--tui-font-weight-regular); --tui-typography-code-md-letter-spacing: 0px; --tui-typography-code-md-line-height: 1.4286; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md: var(--tui-typography-container-heading-md-font-weight) var(--tui-typography-container-heading-md-font-size)/var(--tui-typography-container-heading-md-line-height) var(--tui-typography-container-heading-md-font-family); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-family: var(--tui-font-family-sans); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-size: var(--tui-font-size-200); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-weight: var(--tui-font-weight-bold); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-letter-spacing: 0px; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-line-height: 1.4; --tui-typography-display-lg: var(--tui-typography-display-lg-font-weight) var(--tui-typography-display-lg-font-size)/var(--tui-typography-display-lg-line-height) var(--tui-typography-display-lg-font-family); --tui-typography-display-lg-font-family: var(--tui-font-family-sans); --tui-typography-display-lg-font-size: var(--tui-font-size-900); --tui-typography-display-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-display-lg-letter-spacing: -0.8px; --tui-typography-display-lg-line-height: 1.2; --tui-typography-display-md: var(--tui-typography-display-md-font-weight) var(--tui-typography-display-md-font-size)/var(--tui-typography-display-md-line-height) var(--tui-typography-display-md-font-family); --tui-typography-display-md-font-family: var(--tui-font-family-sans); --tui-typography-display-md-font-size: var(--tui-font-size-800); --tui-typography-display-md-font-weight: var(--tui-font-weight-bold); --tui-typography-display-md-letter-spacing: -0.56px; --tui-typography-display-md-line-height: 1.2143; --tui-typography-display-xl: var(--tui-typography-display-xl-font-weight) var(--tui-typography-display-xl-font-size)/var(--tui-typography-display-xl-line-height) var(--tui-typography-display-xl-font-family); --tui-typography-display-xl-font-family: var(--tui-font-family-sans); --tui-typography-display-xl-font-size: var(--tui-font-size-1000); --tui-typography-display-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-display-xl-letter-spacing: -0.96px; --tui-typography-display-xl-line-height: 1.2083; --tui-typography-heading-lg: var(--tui-typography-heading-lg-font-weight) var(--tui-typography-heading-lg-font-size)/var(--tui-typography-heading-lg-line-height) var(--tui-typography-heading-lg-font-family); --tui-typography-heading-lg-font-family: var(--tui-font-family-sans); --tui-typography-heading-lg-font-size: var(--tui-font-size-400); --tui-typography-heading-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-lg-letter-spacing: -0.28px; --tui-typography-heading-lg-line-height: 1.1429; --tui-typography-heading-md: var(--tui-typography-heading-md-font-weight) var(--tui-typography-heading-md-font-size)/var(--tui-typography-heading-md-line-height) var(--tui-typography-heading-md-font-family); --tui-typography-heading-md-font-family: var(--tui-font-family-sans); --tui-typography-heading-md-font-size: var(--tui-font-size-300); --tui-typography-heading-md-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-md-letter-spacing: 0px; --tui-typography-heading-md-line-height: 1.1667; --tui-typography-heading-sm: var(--tui-typography-heading-sm-font-weight) var(--tui-typography-heading-sm-font-size)/var(--tui-typography-heading-sm-line-height) var(--tui-typography-heading-sm-font-family); --tui-typography-heading-sm-font-family: var(--tui-font-family-sans); --tui-typography-heading-sm-font-size: var(--tui-font-size-200); --tui-typography-heading-sm-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-sm-letter-spacing: 0px; --tui-typography-heading-sm-line-height: 1.4; --tui-typography-heading-xl: var(--tui-typography-heading-xl-font-weight) var(--tui-typography-heading-xl-font-size)/var(--tui-typography-heading-xl-line-height) var(--tui-typography-heading-xl-font-family); --tui-typography-heading-xl-font-family: var(--tui-font-family-sans); --tui-typography-heading-xl-font-size: var(--tui-font-size-500); --tui-typography-heading-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-xl-letter-spacing: -0.32px; --tui-typography-heading-xl-line-height: 1.25; --tui-typography-label-lg: var(--tui-typography-label-lg-font-weight) var(--tui-typography-label-lg-font-size)/var(--tui-typography-label-lg-line-height) var(--tui-typography-label-lg-font-family); --tui-typography-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-label-lg-font-size: var(--tui-font-size-100); --tui-typography-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-lg-letter-spacing: 0px; --tui-typography-label-lg-line-height: 1.5; --tui-typography-label-md: var(--tui-typography-label-md-font-weight) var(--tui-typography-label-md-font-size)/var(--tui-typography-label-md-line-height) var(--tui-typography-label-md-font-family); --tui-typography-label-md-font-family: var(--tui-font-family-sans); --tui-typography-label-md-font-size: var(--tui-font-size-075); --tui-typography-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-md-letter-spacing: 0px; --tui-typography-label-md-line-height: 1.4286; --tui-typography-label-xl: var(--tui-typography-label-xl-font-weight) var(--tui-typography-label-xl-font-size)/var(--tui-typography-label-xl-line-height) var(--tui-typography-label-xl-font-family); --tui-typography-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-label-xl-font-size: var(--tui-font-size-200); --tui-typography-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-xl-letter-spacing: 0px; --tui-typography-label-xl-line-height: 1.4; } } @layer tokens { :root[data-sub-theme="skin"] { --tui-color-background-accent-green: var(--tui-color-green-500); --tui-color-background-accent-green-bold: var(--tui-color-green-700); --tui-color-background-accent-green-subtle: var(--tui-color-green-500); --tui-color-background-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-background-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-background-accent-steel-subtle: var(--tui-color-rexall-steel-400); --tui-color-background-accent-teal: var(--tui-color-teal-500); --tui-color-background-accent-teal-bold: var(--tui-color-teal-700); --tui-color-background-accent-teal-subtle: var(--tui-color-teal-500); --tui-color-background-brand: var(--tui-color-teal-500); --tui-color-background-brand-bold: var(--tui-color-teal-700); --tui-color-background-brand-bold-hovered: var(--tui-color-teal-800); --tui-color-background-brand-bold-pressed: var(--tui-color-teal-900); --tui-color-background-brand-subtle: var(--tui-color-teal-100); --tui-color-background-brand-subtle-hovered: var(--tui-color-teal-200); --tui-color-background-brand-subtle-pressed: var(--tui-color-teal-300); --tui-color-background-danger: var(--tui-color-red-700); --tui-color-background-danger-bold: var(--tui-color-red-700); --tui-color-background-danger-hovered: var(--tui-color-red-800); --tui-color-background-danger-pressed: var(--tui-color-red-900); --tui-color-background-danger-subtle: var(--tui-color-red-100); --tui-color-background-danger-subtle-hovered: var(--tui-color-red-200); --tui-color-background-danger-subtle-pressed: var(--tui-color-red-300); --tui-color-background-disabled: var(--tui-color-neutral-100); --tui-color-background-hovered: var(--tui-color-neutral-100); --tui-color-background-information: var(--tui-color-rexall-steel-500); --tui-color-background-information-bold: var(--tui-color-rexall-steel-700); --tui-color-background-information-subtle: var(--tui-color-rexall-steel-100); --tui-color-background-inverse: var(--tui-color-neutral-900); --tui-color-background-inverse-hovered: var(--tui-color-neutral-1000); --tui-color-background-inverse-pressed: var(--tui-color-neutral-800); --tui-color-background-neutral: var(--tui-color-neutral-400); --tui-color-background-neutral-bold: var(--tui-color-neutral-700); --tui-color-background-neutral-hovered: var(--tui-color-neutral-300); --tui-color-background-neutral-pressed: var(--tui-color-neutral-500); --tui-color-background-neutral-subtle: var(--tui-color-neutral-200); --tui-color-background-neutral-subtle-hovered: var(--tui-color-neutral-100); --tui-color-background-neutral-subtle-pressed: var(--tui-color-neutral-300); --tui-color-background-pressed: var(--tui-color-neutral-200); --tui-color-background-selected: var(--tui-color-teal-100); --tui-color-background-success: var(--tui-color-green-500); --tui-color-background-success-bold: var(--tui-color-green-700); --tui-color-background-success-subtle: var(--tui-color-green-100); --tui-color-background-warning: var(--tui-color-yellow-300); --tui-color-background-warning-bold: var(--tui-color-yellow-300); --tui-color-background-warning-subtle: var(--tui-color-yellow-100); --tui-color-black: oklch(0% 0 0); --tui-color-blanket-background: var(--tui-color-neutral-900); --tui-color-border: var(--tui-color-neutral-300); --tui-color-border-accent-green: var(--tui-color-green-500); --tui-color-border-accent-green-bold: var(--tui-color-green-700); --tui-color-border-accent-green-subtle: var(--tui-color-green-300); --tui-color-border-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-border-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-border-accent-steel-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-accent-teal: var(--tui-color-teal-500); --tui-color-border-accent-teal-bold: var(--tui-color-teal-700); --tui-color-border-accent-teal-subtle: var(--tui-color-teal-300); --tui-color-border-brand: var(--tui-color-teal-700); --tui-color-border-brand-bold: var(--tui-color-teal-700); --tui-color-border-brand-hovered: var(--tui-color-teal-800); --tui-color-border-brand-pressed: var(--tui-color-teal-900); --tui-color-border-brand-subtle: var(--tui-color-teal-300); --tui-color-border-danger: var(--tui-color-red-600); --tui-color-border-danger-bold: var(--tui-color-red-700); --tui-color-border-danger-hovered: var(--tui-color-red-700); --tui-color-border-danger-pressed: var(--tui-color-red-800); --tui-color-border-danger-subtle: var(--tui-color-red-300); --tui-color-border-disabled: var(--tui-color-neutral-200); --tui-color-border-focus: var(--tui-color-neutral-1000); --tui-color-border-information: var(--tui-color-rexall-steel-600); --tui-color-border-information-bold: var(--tui-color-rexall-steel-700); --tui-color-border-information-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-inverse-focus: var(--tui-color-white); --tui-color-border-neutral: var(--tui-color-neutral-300); --tui-color-border-neutral-bold: var(--tui-color-neutral-600); --tui-color-border-neutral-bold-hovered: var(--tui-color-neutral-700); --tui-color-border-neutral-bold-pressed: var(--tui-color-neutral-800); --tui-color-border-neutral-hovered: var(--tui-color-neutral-200); --tui-color-border-neutral-pressed: var(--tui-color-neutral-400); --tui-color-border-neutral-subtle: var(--tui-color-neutral-300); --tui-color-border-neutral-subtlest: var(--tui-color-neutral-200); --tui-color-border-selected: var(--tui-color-teal-700); --tui-color-border-success: var(--tui-color-green-700); --tui-color-border-success-bold: var(--tui-color-green-700); --tui-color-border-success-subtle: var(--tui-color-green-300); --tui-color-border-warning: var(--tui-color-yellow-600); --tui-color-border-warning-bold: var(--tui-color-yellow-700); --tui-color-border-warning-subtle: var(--tui-color-yellow-300); --tui-color-container-background: var(--tui-color-white); --tui-color-container-background-accent-green: var(--tui-color-background-accent-green); --tui-color-container-background-accent-green-bold: var(--tui-color-background-accent-green-bold); --tui-color-container-background-accent-green-subtle: var(--tui-color-background-accent-green-subtle); --tui-color-container-background-accent-steel: var(--tui-color-background-accent-steel); --tui-color-container-background-accent-steel-bold: var(--tui-color-background-accent-steel-bold); --tui-color-container-background-accent-steel-subtle: var(--tui-color-background-accent-steel-subtle); --tui-color-container-background-accent-teal: var(--tui-color-background-accent-teal); --tui-color-container-background-accent-teal-bold: var(--tui-color-background-accent-teal-bold); --tui-color-container-background-accent-teal-subtle: var(--tui-color-background-accent-teal-subtle); --tui-color-container-background-brand: var(--tui-color-background-brand); --tui-color-container-background-brand-bold: var(--tui-color-background-brand-bold); --tui-color-container-background-brand-subtle: var(--tui-color-background-brand-subtle); --tui-color-container-background-danger: var(--tui-color-background-danger); --tui-color-container-background-danger-bold: var(--tui-color-background-danger-bold); --tui-color-container-background-danger-subtle: var(--tui-color-background-danger-subtle); --tui-color-container-background-information: var(--tui-color-background-information); --tui-color-container-background-information-bold: var(--tui-color-background-information-bold); --tui-color-container-background-information-subtle: var(--tui-color-background-information-subtle); --tui-color-container-background-neutral: var(--tui-color-background-neutral); --tui-color-container-background-neutral-bold: var(--tui-color-background-inverse); --tui-color-container-background-neutral-subtle: var(--tui-color-surface-background-neutral-subtle); --tui-color-container-background-success: var(--tui-color-background-success); --tui-color-container-background-success-bold: var(--tui-color-background-success-bold); --tui-color-container-background-success-subtle: var(--tui-color-background-success-subtle); --tui-color-container-background-warning: var(--tui-color-background-warning); --tui-color-container-background-warning-bold: var(--tui-color-background-warning-bold); --tui-color-container-background-warning-subtle: var(--tui-color-background-warning-subtle); --tui-color-container-border: var(--tui-color-neutral-300); --tui-color-container-border-accent-green: var(--tui-color-border-accent-green); --tui-color-container-border-accent-green-bold: var(--tui-color-border-accent-green-bold); --tui-color-container-border-accent-green-subtle: var(--tui-color-border-accent-green-subtle); --tui-color-container-border-accent-steel: var(--tui-color-border-accent-steel); --tui-color-container-border-accent-steel-bold: var(--tui-color-border-accent-steel-bold); --tui-color-container-border-accent-steel-subtle: var(--tui-color-border-accent-steel-subtle); --tui-color-container-border-accent-teal: var(--tui-color-border-accent-teal); --tui-color-container-border-accent-teal-bold: var(--tui-color-border-accent-teal-bold); --tui-color-container-border-accent-teal-subtle: var(--tui-color-border-accent-teal-subtle); --tui-color-container-border-brand: var(--tui-color-border-brand); --tui-color-container-border-brand-bold: var(--tui-color-border-brand-bold); --tui-color-container-border-brand-subtle: var(--tui-color-border-brand-subtle); --tui-color-container-border-danger: var(--tui-color-border-danger); --tui-color-container-border-danger-bold: var(--tui-color-border-danger-bold); --tui-color-container-border-danger-subtle: var(--tui-color-border-danger-subtle); --tui-color-container-border-information: var(--tui-color-border-information); --tui-color-container-border-information-bold: var(--tui-color-border-information-bold); --tui-color-container-border-information-subtle: var(--tui-color-border-information-subtle); --tui-color-container-border-neutral: var(--tui-color-border-neutral); --tui-color-container-border-neutral-bold: var(--tui-color-border-neutral-bold); --tui-color-container-border-neutral-subtle: var(--tui-color-border-neutral-subtle); --tui-color-container-border-success: var(--tui-color-border-success); --tui-color-container-border-success-bold: var(--tui-color-border-success-bold); --tui-color-container-border-success-subtle: var(--tui-color-border-success-subtle); --tui-color-container-border-warning: var(--tui-color-border-warning); --tui-color-container-border-warning-bold: var(--tui-color-border-warning-bold); --tui-color-container-border-warning-subtle: var(--tui-color-border-warning-subtle); /* Text inside a box that holds content, such as a card. */ --tui-color-container-text: var(--tui-color-text); /* Secondary text inside a box that holds content. */ --tui-color-container-text-neutral-subtle: var(--tui-color-text-neutral-subtle); --tui-color-green-100: oklch(95.8% 0.0339 134); --tui-color-green-200: oklch(91% 0.0654 134); --tui-color-green-300: oklch(86% 0.0956 134); --tui-color-green-400: oklch(79.5% 0.1328 134); --tui-color-green-500: var(--tui-color-rexall-well-green); --tui-color-green-600: oklch(63.5% 0.1512 134); --tui-color-green-700: oklch(54.5% 0.1328 134); --tui-color-green-800: oklch(45.5% 0.1139 134); --tui-color-green-900: oklch(36.5% 0.0944 134); --tui-color-green-1000: oklch(27% 0.0731 134); --tui-color-icon: var(--tui-color-neutral-900); --tui-color-icon-brand: var(--tui-color-teal-700); --tui-color-icon-danger: var(--tui-color-red-700); --tui-color-icon-disabled: var(--tui-color-neutral-600); --tui-color-icon-information: var(--tui-color-rexall-steel-700); --tui-color-icon-inverse: var(--tui-color-white); --tui-color-icon-neutral-subtle: var(--tui-color-neutral-700); --tui-color-icon-success: var(--tui-color-green-700); --tui-color-icon-warning: var(--tui-color-yellow-700); --tui-color-input-background: var(--tui-color-white); --tui-color-input-background-disabled: var(--tui-color-neutral-100); --tui-color-input-border: var(--tui-color-neutral-600); --tui-color-link-text: var(--tui-color-teal-700); --tui-color-link-text-hovered: var(--tui-color-teal-800); --tui-color-link-text-inverse: var(--tui-color-text-inverse); --tui-color-link-text-inverse-hovered: var(--tui-color-text-inverse); --tui-color-link-text-inverse-pressed: var(--tui-color-text-inverse); --tui-color-link-text-inverse-visited: var(--tui-color-text-inverse); --tui-color-link-text-neutral: var(--tui-color-text-neutral); --tui-color-link-text-neutral-hovered: var(--tui-color-text-neutral-hovered); --tui-color-link-text-neutral-pressed: var(--tui-color-text-neutral-pressed); --tui-color-link-text-neutral-visited: var(--tui-color-text-neutral); --tui-color-link-text-pressed: var(--tui-color-teal-800); --tui-color-link-text-visited: var(--tui-color-magenta-700); --tui-color-magenta-100: oklch(95.8% 0.0241 351.2); --tui-color-magenta-200: oklch(91% 0.0541 351.2); --tui-color-magenta-300: oklch(86% 0.0816 351.2); --tui-color-magenta-400: oklch(79.5% 0.1047 351.2); --tui-color-magenta-500: oklch(71.5% 0.13 351.2); --tui-color-magenta-600: oklch(63.5% 0.153 351.2); --tui-color-magenta-700: var(--tui-color-rexall-berry-purple); --tui-color-magenta-800: oklch(45.5% 0.1676 351.2); --tui-color-magenta-900: oklch(36.5% 0.1389 351.2); --tui-color-magenta-1000: oklch(27% 0.1075 351.2); --tui-color-neutral-100: oklch(95.8% 0 0); --tui-color-neutral-200: oklch(91% 0 0); --tui-color-neutral-300: oklch(86% 0 0); --tui-color-neutral-400: oklch(79.5% 0 0); --tui-color-neutral-500: oklch(71.5% 0 0); --tui-color-neutral-600: oklch(63.5% 0 0); --tui-color-neutral-700: oklch(54.5% 0 0); --tui-color-neutral-800: oklch(45.5% 0 0); --tui-color-neutral-900: var(--tui-color-rexall-charcoal-grey); --tui-color-neutral-1000: oklch(27% 0 0); --tui-color-neutral-A100: oklch(10.78% 0 0 / 0.056); --tui-color-neutral-A200: oklch(7.66% 0 0 / 0.118); --tui-color-neutral-A300: oklch(6.76% 0 0 / 0.182); --tui-color-neutral-A400: oklch(6.59% 0 0 / 0.264); --tui-color-neutral-A500: oklch(5.18% 0 0 / 0.362); --tui-color-neutral-A600: oklch(1.98% 0 0 / 0.457); --tui-color-neutral-A700: oklch(0% 0 0 / 0.561); --tui-color-neutral-A800: oklch(3.14% 0 0 / 0.661); --tui-color-neutral-A900: oklch(4.4% 0 0 / 0.797); --tui-color-neutral-A1000: oklch(3.14% 0 0 / 0.85); --tui-color-orange-100: oklch(95.8% 0.023 48.9); --tui-color-orange-200: oklch(91% 0.0514 48.9); --tui-color-orange-300: oklch(86% 0.0834 48.9); --tui-color-orange-400: oklch(79.5% 0.1188 48.9); --tui-color-orange-500: oklch(71.5% 0.1528 48.9); --tui-color-orange-600: var(--tui-color-rexall-terracotta-orange); --tui-color-orange-700: oklch(54.5% 0.1463 48.9); --tui-color-orange-800: oklch(45.5% 0.1222 48.9); --tui-color-orange-900: oklch(36.5% 0.098 48.9); --tui-color-orange-1000: oklch(27% 0.0725 48.9); --tui-color-pink-100: oklch(95.8% 0.0216 5); --tui-color-pink-200: oklch(91% 0.0485 5); --tui-color-pink-300: oklch(86% 0.0792 5); --tui-color-pink-400: oklch(79.5% 0.1241 5); --tui-color-pink-500: oklch(71.5% 0.1644 5); --tui-color-pink-600: var(--tui-color-rexall-tulip-pink); --tui-color-pink-700: oklch(54.5% 0.1544 5); --tui-color-pink-800: oklch(45.5% 0.1324 5); --tui-color-pink-900: oklch(36.5% 0.1098 5); --tui-color-pink-1000: oklch(27% 0.085 5); --tui-color-red-100: oklch(95.8% 0.0206 23.7); --tui-color-red-200: oklch(91% 0.0462 23.7); --tui-color-red-300: oklch(86% 0.0754 23.7); --tui-color-red-400: oklch(79.5% 0.1177 23.7); --tui-color-red-500: oklch(71.5% 0.1783 23.7); --tui-color-red-600: var(--tui-color-rexall-ladybug-red); --tui-color-red-700: oklch(54.5% 0.2142 23.7); --tui-color-red-800: oklch(45.5% 0.1837 23.7); --tui-color-red-900: oklch(36.5% 0.1475 23.7); --tui-color-red-1000: oklch(27% 0.1091 23.7); /* Be Well */ --tui-color-rexall-apricot-orange: oklch(71.4% 0.1525 56.134); /* Skin Health */ --tui-color-rexall-ash: oklch(90% 0.0027 106.45); /* Rexall */ --tui-color-rexall-banana-yellow: oklch(95.33% 0.0757 95.318); /* Berry Purple — magenta anchor */ --tui-color-rexall-berry-purple: oklch(51.17% 0.1852 351.18); /* Rexall */ --tui-color-rexall-blush-pink: oklch(58.59% 0.1586 4.6101); /* Be Well promo */ --tui-color-rexall-blush-red: oklch(86.8% 0.055 21.054); /* Be Well promo */ --tui-color-rexall-burgundy-red: oklch(45.44% 0.1821 28.716); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-calming-blue-haze: oklch(80.84% 0.0387 249.54); /* Charcoal Grey — neutral anchor */ --tui-color-rexall-charcoal-grey: oklch(32.5% 0 0); /* Rexall */ --tui-color-rexall-cloud-grey: oklch(84.52% 0 0); /* Be Well promo */ --tui-color-rexall-cream-yellow: oklch(99.23% 0.0159 98.986); /* Be Well promo */ --tui-color-rexall-daisy-yellow: oklch(92.84% 0.1204 106.48); /* Rexall AODA */ --tui-color-rexall-deep-ocean: oklch(42.34% 0.0723 194.8); /* Be Well promo */ --tui-color-rexall-dusty-red: oklch(50.13% 0.1755 23.713); /* Be Well */ --tui-color-rexall-evergreen: oklch(51.19% 0.0835 138.17); /* Rexall */ --tui-color-rexall-fog-grey: oklch(97.91% 0 0); /* Be Well */ --tui-color-rexall-forest-green: oklch(45.31% 0.073 146.02); /* Be Well */ --tui-color-rexall-garden-green: oklch(54.77% 0.0953 138.22); /* Be Well */ --tui-color-rexall-granite-grey: oklch(53.49% 0.005 17.313); /* Rexall */ --tui-color-rexall-grapefruit: oklch(95.01% 0.0848 98.329); /* Rexall */ --tui-color-rexall-grass-green: oklch(78.93% 0.1268 133.59); /* Be Well */ --tui-color-rexall-grey-blue: oklch(59.99% 0.0929 185.62); /* Be Well promo */ --tui-color-rexall-highlighter-yellow: oklch(92.14% 0.1824 105.41); /* Digestive */ --tui-color-rexall-immunity-orange: oklch(71.08% 0.1395 51.737); /* Ladybug Red — red anchor */ --tui-color-rexall-ladybug-red: oklch(60.41% 0.2338 23.742); /* Rexall AODA */ --tui-color-rexall-lakeside-blue: oklch(52.74% 0.0872 187.63); /* Be Well */ --tui-color-rexall-lavender-purple: oklch(89.47% 0.0375 342.55); /* Rexall */ --tui-color-rexall-lemon-yellow: oklch(88.28% 0.1811 94.46); /* Rexall */ --tui-color-rexall-light-blush-pink: oklch(85.56% 0.0673 10.506); /* Rexall */ --tui-color-rexall-light-drizzle: oklch(91.04% 0.0336 191.96); /* Be Well promo */ --tui-color-rexall-light-red: oklch(94.46% 0.0142 12.025); /* Be Well */ --tui-color-rexall-lime-green: oklch(75.39% 0.152 134.81); /* Be Well promo */ --tui-color-rexall-lipstick-red: oklch(62.76% 0.2141 23.004); /* Be Well */ --tui-color-rexall-melon-orange: oklch(85.06% 0.0788 62.059); /* Rexall */ --tui-color-rexall-mist-blue: oklch(95.8% 0.0169 192.36); /* Be Well */ --tui-color-rexall-moss-green: oklch(64.94% 0.1505 133.89); /* Be Well */ --tui-color-rexall-night-grey: oklch(42.18% 0.0031 48.66); /* Be Well */ --tui-color-rexall-pansy-purple: oklch(79.17% 0.0759 344.13); /* Be Well */ --tui-color-rexall-peachy-orange: oklch(92.38% 0.0385 63.533); /* Be Well promo */ --tui-color-rexall-pinky-red: oklch(96.91% 0.0151 17.418); /* Be Well */ --tui-color-rexall-plum-purple: oklch(59.35% 0.1561 347.67); /* Poolside Blue — teal anchor */ --tui-color-rexall-poolside-blue: oklch(68.76% 0.1147 188.23); /* Rexall */ --tui-color-rexall-rain-blue: oklch(87.81% 0.0553 193.35); /* Be Well promo */ --tui-color-rexall-rosy-red: oklch(69.56% 0.183 23.103); /* Rexall */ --tui-color-rexall-ruby-red: oklch(57.73% 0.2098 23.23); /* Rexall */ --tui-color-rexall-sage-green: oklch(88.81% 0.0662 132.17); /* Be Well */ --tui-color-rexall-seaside-blue: oklch(49.86% 0.0891 182.42); /* Rexall AODA */ --tui-color-rexall-shoreline-blue: oklch(63.95% 0.1102 188.54); /* Be Well */ --tui-color-rexall-silver-grey: oklch(66.37% 0.0049 0.0752); /* Be Well */ --tui-color-rexall-sky-blue: oklch(84.85% 0.0638 193.53); /* Rexall */ --tui-color-rexall-slate-grey: oklch(53.82% 0 0); --tui-color-rexall-steel: oklch(52.12% 0.0301 259.03); --tui-color-rexall-steel-100: oklch(95.8% 0.0077 249.5); --tui-color-rexall-steel-200: oklch(91% 0.0173 249.5); --tui-color-rexall-steel-300: oklch(86% 0.0277 249.5); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-steel-400: var(--tui-color-rexall-calming-blue-haze); --tui-color-rexall-steel-500: oklch(71.5% 0.0348 249.5); --tui-color-rexall-steel-600: oklch(63.5% 0.0315 249.5); --tui-color-rexall-steel-700: oklch(54.5% 0.0276 249.5); --tui-color-rexall-steel-800: oklch(45.5% 0.0237 249.5); --tui-color-rexall-steel-900: oklch(36.5% 0.0196 249.5); --tui-color-rexall-steel-1000: oklch(27% 0.0152 249.5); /* Sunshine Yellow — yellow anchor */ --tui-color-rexall-sunshine-yellow: oklch(86.72% 0.1773 90.85); /* Be Well promo */ --tui-color-rexall-taupe-red: oklch(75.68% 0.0781 13.998); /* Rexall */ --tui-color-rexall-tea-green: oklch(95.59% 0.0563 131.52); /* Be Well */ --tui-color-rexall-teal-blue: oklch(68.53% 0.0897 185.9); /* Terracotta Orange — orange anchor */ --tui-color-rexall-terracotta-orange: oklch(65.65% 0.1764 48.889); /* Tulip Pink — pink anchor */ --tui-color-rexall-tulip-pink: oklch(67.04% 0.1842 5.0399); /* Be Well promo */ --tui-color-rexall-vanilla-yellow: oklch(95.6% 0.072 105.12); /* Be Well */ --tui-color-rexall-venice-blue: oklch(40.54% 0.0851 236.88); /* Be Well */ --tui-color-rexall-washed-blue: oklch(78.7% 0.0619 185.5); /* Well Green — green anchor */ --tui-color-rexall-well-green: oklch(72.73% 0.1698 134.03); /* Digestive */ --tui-color-rexall-well-green-deep: oklch(50.28% 0.1219 142.99); --tui-color-surface-background: var(--tui-color-white); --tui-color-surface-background-brand: var(--tui-color-pink-200); /* A page or section tinted with the brand. Plain surface unless a brand sets a tint. */ --tui-color-surface-background-brand-subtle: var(--tui-color-surface-background); --tui-color-surface-background-neutral-subtle: var(--tui-color-neutral-100); --tui-color-tag-background-accent-green: var(--tui-color-green-100); --tui-color-tag-background-accent-magenta: var(--tui-color-magenta-100); --tui-color-tag-background-accent-neutral: var(--tui-color-neutral-100); --tui-color-tag-background-accent-orange: var(--tui-color-orange-100); --tui-color-tag-background-accent-pink: var(--tui-color-pink-100); --tui-color-tag-background-accent-steel: var(--tui-color-rexall-steel-100); --tui-color-tag-background-accent-teal: var(--tui-color-teal-100); --tui-color-tag-background-accent-yellow: var(--tui-color-yellow-100); --tui-color-tag-text-accent-green: var(--tui-color-green-800); --tui-color-tag-text-accent-magenta: var(--tui-color-magenta-800); --tui-color-tag-text-accent-neutral: var(--tui-color-neutral-800); --tui-color-tag-text-accent-orange: var(--tui-color-orange-800); --tui-color-tag-text-accent-pink: var(--tui-color-pink-800); --tui-color-tag-text-accent-steel: var(--tui-color-rexall-steel-800); --tui-color-tag-text-accent-teal: var(--tui-color-teal-800); --tui-color-tag-text-accent-yellow: var(--tui-color-yellow-800); --tui-color-teal-100: oklch(95.8% 0.0229 188.2); --tui-color-teal-200: oklch(91% 0.0422 188.2); --tui-color-teal-300: oklch(86% 0.0602 188.2); --tui-color-teal-400: oklch(79.5% 0.0818 188.2); /* Poolside Blue — teal anchor */ --tui-color-teal-500: var(--tui-color-rexall-poolside-blue); --tui-color-teal-600: oklch(63.5% 0.1071 188.2); --tui-color-teal-700: oklch(54.5% 0.0941 188.2); --tui-color-teal-800: oklch(45.5% 0.079 188.2); --tui-color-teal-900: oklch(36.5% 0.0634 188.2); --tui-color-teal-1000: oklch(27% 0.0469 188.2); --tui-color-text: var(--tui-color-neutral-900); --tui-color-text-brand: var(--tui-color-teal-800); --tui-color-text-brand-hovered: var(--tui-color-teal-900); --tui-color-text-brand-pressed: var(--tui-color-teal-900); --tui-color-text-danger: var(--tui-color-red-700); --tui-color-text-danger-hovered: var(--tui-color-red-800); --tui-color-text-danger-pressed: var(--tui-color-red-800); --tui-color-text-disabled: var(--tui-color-neutral-600); --tui-color-text-information: var(--tui-color-rexall-steel-700); --tui-color-text-inverse: var(--tui-color-white); --tui-color-text-neutral: var(--tui-color-neutral-900); --tui-color-text-neutral-hovered: var(--tui-color-neutral-800); --tui-color-text-neutral-pressed: var(--tui-color-neutral-1000); --tui-color-text-neutral-subtle: var(--tui-color-neutral-800); --tui-color-text-success: var(--tui-color-green-700); --tui-color-text-warning: var(--tui-color-yellow-700); --tui-color-transparent: oklch(0% 0 0 / 0); --tui-color-white: oklch(100% 0 0); --tui-color-yellow-100: oklch(95.8% 0.0354 90.8); --tui-color-yellow-200: oklch(91% 0.1029 90.8); /* Sunshine Yellow — yellow anchor */ --tui-color-yellow-300: var(--tui-color-rexall-sunshine-yellow); --tui-color-yellow-400: oklch(79.5% 0.1624 88.3); --tui-color-yellow-500: oklch(71.5% 0.1463 85.7); --tui-color-yellow-600: oklch(63.5% 0.1305 83.1); --tui-color-yellow-700: oklch(54.5% 0.1126 80.6); --tui-color-yellow-800: oklch(45.5% 0.0948 78); --tui-color-yellow-900: oklch(36.5% 0.0768 75.4); --tui-color-yellow-1000: oklch(27% 0.0575 72.8); --tui-elevation-shadow-overflow: 0px 0px 8px 0px oklch(27% 0 0 / 0.16), 0px 0px 1px 0px oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-perimeter: oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-spread: oklch(27% 0 0 / 0.16); --tui-elevation-shadow-overlay: 0px 8px 12px 0px oklch(27% 0 0 / 0.15), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-shadow-raised: 0px 1px 1px 0px oklch(27% 0 0 / 0.25), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-surface: var(--tui-color-transparent); --tui-elevation-surface-container: var(--tui-color-neutral-A100); --tui-elevation-surface-container-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-container-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay: var(--tui-color-transparent); --tui-elevation-surface-overlay-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-raised: var(--tui-color-transparent); --tui-elevation-surface-raised-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-raised-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-sunken: var(--tui-color-neutral-A100); --tui-font-family-mono: "Source Code Pro", ui-monospace, "Consolas", "Menlo", monospace; --tui-font-family-sans: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --tui-font-leading-050: 16px; --tui-font-leading-075: 20px; --tui-font-leading-100: 24px; --tui-font-leading-200: 28px; --tui-font-leading-300: 28px; --tui-font-leading-400: 32px; --tui-font-leading-500: 40px; --tui-font-leading-600: 48px; --tui-font-leading-700: 56px; --tui-font-leading-800: 68px; --tui-font-leading-900: 96px; --tui-font-leading-1000: 116px; --tui-font-size-050: 12px; --tui-font-size-075: 14px; --tui-font-size-100: 16px; --tui-font-size-200: 20px; --tui-font-size-300: 24px; --tui-font-size-400: 28px; --tui-font-size-500: 32px; --tui-font-size-600: 40px; --tui-font-size-700: 48px; --tui-font-size-800: 56px; --tui-font-size-900: 80px; --tui-font-size-1000: 96px; --tui-font-tracking-default: 0rem; --tui-font-weight-bold: 700; --tui-font-weight-medium: 500; --tui-font-weight-regular: 400; --tui-font-weight-semibold: 600; --tui-layer-0: 0; --tui-layer-10: 10; --tui-layer-20: 20; --tui-layer-30: 30; --tui-layer-40: 40; --tui-layer-50: 50; --tui-layer-60: 60; --tui-layer-base: var(--tui-layer-0); --tui-layer-modal: var(--tui-layer-50); --tui-layer-navigation: var(--tui-layer-10); --tui-layer-notification: var(--tui-layer-60); --tui-layer-overlay: var(--tui-layer-40); --tui-layer-popover: var(--tui-layer-30); --tui-layer-sticky: var(--tui-layer-20); --tui-motion-action-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-action-pressed: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-blanket-enter: var(--tui-motion-duration-long) 0ms var(--tui-motion-easing-inout-bold); --tui-motion-blanket-exit: var(--tui-motion-duration-medium) 0ms var(--tui-motion-easing-in-practical); --tui-motion-control-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-selected: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-toggle: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-curve-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6); --tui-motion-curve-inout-bold: cubic-bezier(0.4, 0, 0, 1); --tui-motion-curve-out-bold: cubic-bezier(0, 0.4, 0, 1); --tui-motion-curve-out-practical: cubic-bezier(0.4, 1, 0.6, 1); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-curve-spring: cubic-bezier(0.363, 1.102, 0.089, 1.043); --tui-motion-duration-0: 0ms; --tui-motion-duration-050: 50ms; --tui-motion-duration-100: 100ms; --tui-motion-duration-150: 150ms; --tui-motion-duration-200: 200ms; --tui-motion-duration-250: 250ms; --tui-motion-duration-400: 400ms; --tui-motion-duration-600: 600ms; --tui-motion-duration-instant: var(--tui-motion-duration-0); --tui-motion-duration-long: var(--tui-motion-duration-250); --tui-motion-duration-medium: var(--tui-motion-duration-200); --tui-motion-duration-short: var(--tui-motion-duration-150); --tui-motion-duration-xlong: var(--tui-motion-duration-400); --tui-motion-duration-xshort: var(--tui-motion-duration-100); --tui-motion-duration-xxlong: var(--tui-motion-duration-600); --tui-motion-duration-xxshort: var(--tui-motion-duration-050); --tui-motion-easing-in-practical: var(--tui-motion-curve-in-practical); --tui-motion-easing-inout-bold: var(--tui-motion-curve-inout-bold); --tui-motion-easing-out-bold: var(--tui-motion-curve-out-bold); --tui-motion-easing-out-practical: var(--tui-motion-curve-out-practical); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-easing-spring: var(--tui-motion-curve-spring); /* Corners of a small action (Button sm). */ --tui-shape-action-round: var(--tui-size-radius-lg); /* Corners of a medium action (Button md). */ --tui-shape-action-rounder: var(--tui-size-radius-xl); /* Corners of a large action (Button lg). The roundest action, not always a pill. */ --tui-shape-action-roundest: var(--tui-size-radius-2xl); /* Corners of a box that holds content, such as a card. Follows the surface corners unless a brand sets its own. */ --tui-shape-container-rounder: var(--tui-shape-surface-rounder); --tui-shape-rounder: var(--tui-size-radius-lg); --tui-shape-surface-rounder: var(--tui-size-radius-2xl); --tui-size-border-hairline: var(--tui-size-border-sm); --tui-size-border-md: 2px; --tui-size-border-narrow: var(--tui-size-border-md); --tui-size-border-sm: 1px; --tui-size-icon-lg: var(--tui-space-300); --tui-size-icon-md: var(--tui-space-250); --tui-size-icon-sm: var(--tui-space-200); --tui-size-icon-xs: var(--tui-space-100); --tui-size-radius-2xl: 16px; --tui-size-radius-3xl: 20px; --tui-size-radius-4xl: 24px; --tui-size-radius-full: 9999px; --tui-size-radius-lg: 8px; --tui-size-radius-md: 6px; --tui-size-radius-none: 0px; --tui-size-radius-sm: 4px; --tui-size-radius-xl: 12px; --tui-size-radius-xs: 2px; --tui-space-0: 0px; --tui-space-025: 2px; --tui-space-050: 4px; --tui-space-075: 6px; --tui-space-100: 8px; --tui-space-125: 10px; --tui-space-150: 12px; --tui-space-200: 16px; --tui-space-250: 20px; --tui-space-300: 24px; --tui-space-400: 32px; --tui-space-500: 40px; --tui-space-600: 48px; --tui-space-700: 56px; --tui-space-800: 64px; --tui-space-900: 72px; --tui-space-1000: 80px; --tui-space-1100: 88px; --tui-space-1200: 96px; --tui-space-1300: 104px; --tui-space-1400: 112px; --tui-space-1500: 120px; --tui-space-inline: var(--tui-space-100); --tui-space-inline-dense: var(--tui-space-050); --tui-space-inline-loose: var(--tui-space-150); --tui-space-inline-looser: var(--tui-space-250); --tui-space-inset: var(--tui-space-200); --tui-space-inset-dense: var(--tui-space-100); --tui-space-inset-loose: var(--tui-space-250); --tui-space-inset-looser: var(--tui-space-400); --tui-space-inset-squish: 12px 24px; --tui-space-inset-squish-dense: 8px 24px; --tui-space-inset-squish-loose: 16px 24px; --tui-space-inset-stretch: 8px 16px; --tui-space-inset-stretch-loosest: 16px 16px; --tui-space-negative-025: -2px; --tui-space-negative-050: -4px; --tui-space-negative-075: -6px; --tui-space-negative-100: -8px; --tui-space-negative-150: -12px; --tui-space-negative-200: -16px; --tui-space-negative-250: -20px; --tui-space-negative-300: -24px; --tui-space-negative-400: -32px; --tui-space-stack: var(--tui-space-200); --tui-space-stack-dense: var(--tui-space-100); --tui-space-stack-denser: var(--tui-space-050); --tui-space-stack-loose: var(--tui-space-300); --tui-space-stack-looser: var(--tui-space-400); --tui-space-stack-loosest: var(--tui-space-600); --tui-typography-action-label-lg: var(--tui-typography-action-label-lg-font-weight) var(--tui-typography-action-label-lg-font-size)/var(--tui-typography-action-label-lg-line-height) var(--tui-typography-action-label-lg-font-family); --tui-typography-action-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-action-label-lg-font-size: var(--tui-font-size-100); --tui-typography-action-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-lg-letter-spacing: 0px; --tui-typography-action-label-lg-line-height: 1.5; --tui-typography-action-label-md: var(--tui-typography-action-label-md-font-weight) var(--tui-typography-action-label-md-font-size)/var(--tui-typography-action-label-md-line-height) var(--tui-typography-action-label-md-font-family); --tui-typography-action-label-md-font-family: var(--tui-font-family-sans); --tui-typography-action-label-md-font-size: var(--tui-font-size-075); --tui-typography-action-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-md-letter-spacing: 0px; --tui-typography-action-label-md-line-height: 1.4286; --tui-typography-action-label-xl: var(--tui-typography-action-label-xl-font-weight) var(--tui-typography-action-label-xl-font-size)/var(--tui-typography-action-label-xl-line-height) var(--tui-typography-action-label-xl-font-family); --tui-typography-action-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-action-label-xl-font-size: var(--tui-font-size-200); --tui-typography-action-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-xl-letter-spacing: 0px; --tui-typography-action-label-xl-line-height: 1.4; --tui-typography-body-lg: var(--tui-typography-body-lg-font-weight) var(--tui-typography-body-lg-font-size)/var(--tui-typography-body-lg-line-height) var(--tui-typography-body-lg-font-family); --tui-typography-body-lg-font-family: var(--tui-font-family-sans); --tui-typography-body-lg-font-size: var(--tui-font-size-200); --tui-typography-body-lg-font-weight: var(--tui-font-weight-regular); --tui-typography-body-lg-letter-spacing: 0px; --tui-typography-body-lg-line-height: 1.4; --tui-typography-body-md: var(--tui-typography-body-md-font-weight) var(--tui-typography-body-md-font-size)/var(--tui-typography-body-md-line-height) var(--tui-typography-body-md-font-family); --tui-typography-body-md-font-family: var(--tui-font-family-sans); --tui-typography-body-md-font-size: var(--tui-font-size-100); --tui-typography-body-md-font-weight: var(--tui-font-weight-regular); --tui-typography-body-md-letter-spacing: 0px; --tui-typography-body-md-line-height: 1.5; --tui-typography-body-sm: var(--tui-typography-body-sm-font-weight) var(--tui-typography-body-sm-font-size)/var(--tui-typography-body-sm-line-height) var(--tui-typography-body-sm-font-family); --tui-typography-body-sm-font-family: var(--tui-font-family-sans); --tui-typography-body-sm-font-size: var(--tui-font-size-075); --tui-typography-body-sm-font-weight: var(--tui-font-weight-regular); --tui-typography-body-sm-letter-spacing: 0px; --tui-typography-body-sm-line-height: 1.4286; --tui-typography-body-xs: var(--tui-typography-body-xs-font-weight) var(--tui-typography-body-xs-font-size)/var(--tui-typography-body-xs-line-height) var(--tui-typography-body-xs-font-family); --tui-typography-body-xs-font-family: var(--tui-font-family-sans); --tui-typography-body-xs-font-size: var(--tui-font-size-050); --tui-typography-body-xs-font-weight: var(--tui-font-weight-regular); --tui-typography-body-xs-letter-spacing: 0px; --tui-typography-body-xs-line-height: 1.3333; --tui-typography-code-md: var(--tui-typography-code-md-font-weight) var(--tui-typography-code-md-font-size)/var(--tui-typography-code-md-line-height) var(--tui-typography-code-md-font-family); --tui-typography-code-md-font-family: var(--tui-font-family-mono); --tui-typography-code-md-font-size: var(--tui-font-size-075); --tui-typography-code-md-font-weight: var(--tui-font-weight-regular); --tui-typography-code-md-letter-spacing: 0px; --tui-typography-code-md-line-height: 1.4286; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md: var(--tui-typography-container-heading-md-font-weight) var(--tui-typography-container-heading-md-font-size)/var(--tui-typography-container-heading-md-line-height) var(--tui-typography-container-heading-md-font-family); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-family: var(--tui-font-family-sans); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-size: var(--tui-font-size-200); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-weight: var(--tui-font-weight-bold); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-letter-spacing: 0px; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-line-height: 1.4; --tui-typography-display-lg: var(--tui-typography-display-lg-font-weight) var(--tui-typography-display-lg-font-size)/var(--tui-typography-display-lg-line-height) var(--tui-typography-display-lg-font-family); --tui-typography-display-lg-font-family: var(--tui-font-family-sans); --tui-typography-display-lg-font-size: var(--tui-font-size-900); --tui-typography-display-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-display-lg-letter-spacing: -0.8px; --tui-typography-display-lg-line-height: 1.2; --tui-typography-display-md: var(--tui-typography-display-md-font-weight) var(--tui-typography-display-md-font-size)/var(--tui-typography-display-md-line-height) var(--tui-typography-display-md-font-family); --tui-typography-display-md-font-family: var(--tui-font-family-sans); --tui-typography-display-md-font-size: var(--tui-font-size-800); --tui-typography-display-md-font-weight: var(--tui-font-weight-bold); --tui-typography-display-md-letter-spacing: -0.56px; --tui-typography-display-md-line-height: 1.2143; --tui-typography-display-xl: var(--tui-typography-display-xl-font-weight) var(--tui-typography-display-xl-font-size)/var(--tui-typography-display-xl-line-height) var(--tui-typography-display-xl-font-family); --tui-typography-display-xl-font-family: var(--tui-font-family-sans); --tui-typography-display-xl-font-size: var(--tui-font-size-1000); --tui-typography-display-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-display-xl-letter-spacing: -0.96px; --tui-typography-display-xl-line-height: 1.2083; --tui-typography-heading-lg: var(--tui-typography-heading-lg-font-weight) var(--tui-typography-heading-lg-font-size)/var(--tui-typography-heading-lg-line-height) var(--tui-typography-heading-lg-font-family); --tui-typography-heading-lg-font-family: var(--tui-font-family-sans); --tui-typography-heading-lg-font-size: var(--tui-font-size-400); --tui-typography-heading-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-lg-letter-spacing: -0.28px; --tui-typography-heading-lg-line-height: 1.1429; --tui-typography-heading-md: var(--tui-typography-heading-md-font-weight) var(--tui-typography-heading-md-font-size)/var(--tui-typography-heading-md-line-height) var(--tui-typography-heading-md-font-family); --tui-typography-heading-md-font-family: var(--tui-font-family-sans); --tui-typography-heading-md-font-size: var(--tui-font-size-300); --tui-typography-heading-md-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-md-letter-spacing: 0px; --tui-typography-heading-md-line-height: 1.1667; --tui-typography-heading-sm: var(--tui-typography-heading-sm-font-weight) var(--tui-typography-heading-sm-font-size)/var(--tui-typography-heading-sm-line-height) var(--tui-typography-heading-sm-font-family); --tui-typography-heading-sm-font-family: var(--tui-font-family-sans); --tui-typography-heading-sm-font-size: var(--tui-font-size-200); --tui-typography-heading-sm-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-sm-letter-spacing: 0px; --tui-typography-heading-sm-line-height: 1.4; --tui-typography-heading-xl: var(--tui-typography-heading-xl-font-weight) var(--tui-typography-heading-xl-font-size)/var(--tui-typography-heading-xl-line-height) var(--tui-typography-heading-xl-font-family); --tui-typography-heading-xl-font-family: var(--tui-font-family-sans); --tui-typography-heading-xl-font-size: var(--tui-font-size-500); --tui-typography-heading-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-xl-letter-spacing: -0.32px; --tui-typography-heading-xl-line-height: 1.25; --tui-typography-label-lg: var(--tui-typography-label-lg-font-weight) var(--tui-typography-label-lg-font-size)/var(--tui-typography-label-lg-line-height) var(--tui-typography-label-lg-font-family); --tui-typography-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-label-lg-font-size: var(--tui-font-size-100); --tui-typography-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-lg-letter-spacing: 0px; --tui-typography-label-lg-line-height: 1.5; --tui-typography-label-md: var(--tui-typography-label-md-font-weight) var(--tui-typography-label-md-font-size)/var(--tui-typography-label-md-line-height) var(--tui-typography-label-md-font-family); --tui-typography-label-md-font-family: var(--tui-font-family-sans); --tui-typography-label-md-font-size: var(--tui-font-size-075); --tui-typography-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-md-letter-spacing: 0px; --tui-typography-label-md-line-height: 1.4286; --tui-typography-label-xl: var(--tui-typography-label-xl-font-weight) var(--tui-typography-label-xl-font-size)/var(--tui-typography-label-xl-line-height) var(--tui-typography-label-xl-font-family); --tui-typography-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-label-xl-font-size: var(--tui-font-size-200); --tui-typography-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-xl-letter-spacing: 0px; --tui-typography-label-xl-line-height: 1.4; } } @layer tokens { :root[data-sub-theme="digestive"] { --tui-color-background-accent-green: var(--tui-color-green-500); --tui-color-background-accent-green-bold: var(--tui-color-green-700); --tui-color-background-accent-green-subtle: var(--tui-color-green-100); --tui-color-background-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-background-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-background-accent-steel-subtle: var(--tui-color-rexall-steel-500); --tui-color-background-accent-teal: var(--tui-color-teal-500); --tui-color-background-accent-teal-bold: var(--tui-color-teal-700); --tui-color-background-accent-teal-subtle: var(--tui-color-teal-500); --tui-color-background-brand: var(--tui-color-teal-500); --tui-color-background-brand-bold: var(--tui-color-teal-700); --tui-color-background-brand-bold-hovered: var(--tui-color-teal-800); --tui-color-background-brand-bold-pressed: var(--tui-color-teal-900); --tui-color-background-brand-subtle: var(--tui-color-teal-100); --tui-color-background-brand-subtle-hovered: var(--tui-color-teal-200); --tui-color-background-brand-subtle-pressed: var(--tui-color-teal-300); --tui-color-background-danger: var(--tui-color-red-700); --tui-color-background-danger-bold: var(--tui-color-red-700); --tui-color-background-danger-hovered: var(--tui-color-red-800); --tui-color-background-danger-pressed: var(--tui-color-red-900); --tui-color-background-danger-subtle: var(--tui-color-red-100); --tui-color-background-danger-subtle-hovered: var(--tui-color-red-200); --tui-color-background-danger-subtle-pressed: var(--tui-color-red-300); --tui-color-background-disabled: var(--tui-color-neutral-100); --tui-color-background-hovered: var(--tui-color-neutral-100); --tui-color-background-information: var(--tui-color-rexall-steel-500); --tui-color-background-information-bold: var(--tui-color-rexall-steel-700); --tui-color-background-information-subtle: var(--tui-color-rexall-steel-100); --tui-color-background-inverse: var(--tui-color-neutral-900); --tui-color-background-inverse-hovered: var(--tui-color-neutral-1000); --tui-color-background-inverse-pressed: var(--tui-color-neutral-800); --tui-color-background-neutral: var(--tui-color-neutral-400); --tui-color-background-neutral-bold: var(--tui-color-neutral-700); --tui-color-background-neutral-hovered: var(--tui-color-neutral-300); --tui-color-background-neutral-pressed: var(--tui-color-neutral-500); --tui-color-background-neutral-subtle: var(--tui-color-neutral-200); --tui-color-background-neutral-subtle-hovered: var(--tui-color-neutral-100); --tui-color-background-neutral-subtle-pressed: var(--tui-color-neutral-300); --tui-color-background-pressed: var(--tui-color-neutral-200); --tui-color-background-selected: var(--tui-color-teal-100); --tui-color-background-success: var(--tui-color-green-500); --tui-color-background-success-bold: var(--tui-color-green-700); --tui-color-background-success-subtle: var(--tui-color-green-100); --tui-color-background-warning: var(--tui-color-yellow-300); --tui-color-background-warning-bold: var(--tui-color-yellow-300); --tui-color-background-warning-subtle: var(--tui-color-yellow-100); --tui-color-black: oklch(0% 0 0); --tui-color-blanket-background: var(--tui-color-neutral-900); --tui-color-border: var(--tui-color-neutral-300); --tui-color-border-accent-green: var(--tui-color-green-500); --tui-color-border-accent-green-bold: var(--tui-color-green-700); --tui-color-border-accent-green-subtle: var(--tui-color-green-300); --tui-color-border-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-border-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-border-accent-steel-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-accent-teal: var(--tui-color-teal-500); --tui-color-border-accent-teal-bold: var(--tui-color-teal-700); --tui-color-border-accent-teal-subtle: var(--tui-color-teal-300); --tui-color-border-brand: var(--tui-color-teal-700); --tui-color-border-brand-bold: var(--tui-color-teal-700); --tui-color-border-brand-hovered: var(--tui-color-teal-800); --tui-color-border-brand-pressed: var(--tui-color-teal-900); --tui-color-border-brand-subtle: var(--tui-color-teal-300); --tui-color-border-danger: var(--tui-color-red-600); --tui-color-border-danger-bold: var(--tui-color-red-700); --tui-color-border-danger-hovered: var(--tui-color-red-700); --tui-color-border-danger-pressed: var(--tui-color-red-800); --tui-color-border-danger-subtle: var(--tui-color-red-300); --tui-color-border-disabled: var(--tui-color-neutral-200); --tui-color-border-focus: var(--tui-color-neutral-1000); --tui-color-border-information: var(--tui-color-rexall-steel-600); --tui-color-border-information-bold: var(--tui-color-rexall-steel-700); --tui-color-border-information-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-inverse-focus: var(--tui-color-white); --tui-color-border-neutral: var(--tui-color-neutral-300); --tui-color-border-neutral-bold: var(--tui-color-neutral-600); --tui-color-border-neutral-bold-hovered: var(--tui-color-neutral-700); --tui-color-border-neutral-bold-pressed: var(--tui-color-neutral-800); --tui-color-border-neutral-hovered: var(--tui-color-neutral-200); --tui-color-border-neutral-pressed: var(--tui-color-neutral-400); --tui-color-border-neutral-subtle: var(--tui-color-neutral-300); --tui-color-border-neutral-subtlest: var(--tui-color-neutral-200); --tui-color-border-selected: var(--tui-color-teal-700); --tui-color-border-success: var(--tui-color-green-700); --tui-color-border-success-bold: var(--tui-color-green-700); --tui-color-border-success-subtle: var(--tui-color-green-300); --tui-color-border-warning: var(--tui-color-yellow-600); --tui-color-border-warning-bold: var(--tui-color-yellow-700); --tui-color-border-warning-subtle: var(--tui-color-yellow-300); --tui-color-container-background: var(--tui-color-white); --tui-color-container-background-accent-green: var(--tui-color-background-accent-green); --tui-color-container-background-accent-green-bold: var(--tui-color-background-accent-green-bold); --tui-color-container-background-accent-green-subtle: var(--tui-color-background-accent-green-subtle); --tui-color-container-background-accent-steel: var(--tui-color-background-accent-steel); --tui-color-container-background-accent-steel-bold: var(--tui-color-background-accent-steel-bold); --tui-color-container-background-accent-steel-subtle: var(--tui-color-background-accent-steel-subtle); --tui-color-container-background-accent-teal: var(--tui-color-background-accent-teal); --tui-color-container-background-accent-teal-bold: var(--tui-color-background-accent-teal-bold); --tui-color-container-background-accent-teal-subtle: var(--tui-color-background-accent-teal-subtle); --tui-color-container-background-brand: var(--tui-color-background-brand); --tui-color-container-background-brand-bold: var(--tui-color-background-brand-bold); --tui-color-container-background-brand-subtle: var(--tui-color-background-brand-subtle); --tui-color-container-background-danger: var(--tui-color-background-danger); --tui-color-container-background-danger-bold: var(--tui-color-background-danger-bold); --tui-color-container-background-danger-subtle: var(--tui-color-background-danger-subtle); --tui-color-container-background-information: var(--tui-color-background-information); --tui-color-container-background-information-bold: var(--tui-color-background-information-bold); --tui-color-container-background-information-subtle: var(--tui-color-background-information-subtle); --tui-color-container-background-neutral: var(--tui-color-background-neutral); --tui-color-container-background-neutral-bold: var(--tui-color-background-inverse); --tui-color-container-background-neutral-subtle: var(--tui-color-surface-background-neutral-subtle); --tui-color-container-background-success: var(--tui-color-background-success); --tui-color-container-background-success-bold: var(--tui-color-background-success-bold); --tui-color-container-background-success-subtle: var(--tui-color-background-success-subtle); --tui-color-container-background-warning: var(--tui-color-background-warning); --tui-color-container-background-warning-bold: var(--tui-color-background-warning-bold); --tui-color-container-background-warning-subtle: var(--tui-color-background-warning-subtle); --tui-color-container-border: var(--tui-color-neutral-300); --tui-color-container-border-accent-green: var(--tui-color-border-accent-green); --tui-color-container-border-accent-green-bold: var(--tui-color-border-accent-green-bold); --tui-color-container-border-accent-green-subtle: var(--tui-color-border-accent-green-subtle); --tui-color-container-border-accent-steel: var(--tui-color-border-accent-steel); --tui-color-container-border-accent-steel-bold: var(--tui-color-border-accent-steel-bold); --tui-color-container-border-accent-steel-subtle: var(--tui-color-border-accent-steel-subtle); --tui-color-container-border-accent-teal: var(--tui-color-border-accent-teal); --tui-color-container-border-accent-teal-bold: var(--tui-color-border-accent-teal-bold); --tui-color-container-border-accent-teal-subtle: var(--tui-color-border-accent-teal-subtle); --tui-color-container-border-brand: var(--tui-color-border-brand); --tui-color-container-border-brand-bold: var(--tui-color-border-brand-bold); --tui-color-container-border-brand-subtle: var(--tui-color-border-brand-subtle); --tui-color-container-border-danger: var(--tui-color-border-danger); --tui-color-container-border-danger-bold: var(--tui-color-border-danger-bold); --tui-color-container-border-danger-subtle: var(--tui-color-border-danger-subtle); --tui-color-container-border-information: var(--tui-color-border-information); --tui-color-container-border-information-bold: var(--tui-color-border-information-bold); --tui-color-container-border-information-subtle: var(--tui-color-border-information-subtle); --tui-color-container-border-neutral: var(--tui-color-border-neutral); --tui-color-container-border-neutral-bold: var(--tui-color-border-neutral-bold); --tui-color-container-border-neutral-subtle: var(--tui-color-border-neutral-subtle); --tui-color-container-border-success: var(--tui-color-border-success); --tui-color-container-border-success-bold: var(--tui-color-border-success-bold); --tui-color-container-border-success-subtle: var(--tui-color-border-success-subtle); --tui-color-container-border-warning: var(--tui-color-border-warning); --tui-color-container-border-warning-bold: var(--tui-color-border-warning-bold); --tui-color-container-border-warning-subtle: var(--tui-color-border-warning-subtle); /* Text inside a box that holds content, such as a card. */ --tui-color-container-text: var(--tui-color-text); /* Secondary text inside a box that holds content. */ --tui-color-container-text-neutral-subtle: var(--tui-color-text-neutral-subtle); --tui-color-green-100: oklch(95.8% 0.0339 134); --tui-color-green-200: oklch(91% 0.0654 134); --tui-color-green-300: oklch(86% 0.0956 134); --tui-color-green-400: oklch(79.5% 0.1328 134); --tui-color-green-500: var(--tui-color-rexall-well-green); --tui-color-green-600: oklch(63.5% 0.1512 134); --tui-color-green-700: oklch(54.5% 0.1328 134); --tui-color-green-800: oklch(45.5% 0.1139 134); --tui-color-green-900: oklch(36.5% 0.0944 134); --tui-color-green-1000: oklch(27% 0.0731 134); --tui-color-icon: var(--tui-color-neutral-900); --tui-color-icon-brand: var(--tui-color-teal-700); --tui-color-icon-danger: var(--tui-color-red-700); --tui-color-icon-disabled: var(--tui-color-neutral-600); --tui-color-icon-information: var(--tui-color-rexall-steel-700); --tui-color-icon-inverse: var(--tui-color-white); --tui-color-icon-neutral-subtle: var(--tui-color-neutral-700); --tui-color-icon-success: var(--tui-color-green-700); --tui-color-icon-warning: var(--tui-color-yellow-700); --tui-color-input-background: var(--tui-color-white); --tui-color-input-background-disabled: var(--tui-color-neutral-100); --tui-color-input-border: var(--tui-color-neutral-600); --tui-color-link-text: var(--tui-color-teal-700); --tui-color-link-text-hovered: var(--tui-color-teal-800); --tui-color-link-text-inverse: var(--tui-color-text-inverse); --tui-color-link-text-inverse-hovered: var(--tui-color-text-inverse); --tui-color-link-text-inverse-pressed: var(--tui-color-text-inverse); --tui-color-link-text-inverse-visited: var(--tui-color-text-inverse); --tui-color-link-text-neutral: var(--tui-color-text-neutral); --tui-color-link-text-neutral-hovered: var(--tui-color-text-neutral-hovered); --tui-color-link-text-neutral-pressed: var(--tui-color-text-neutral-pressed); --tui-color-link-text-neutral-visited: var(--tui-color-text-neutral); --tui-color-link-text-pressed: var(--tui-color-teal-800); --tui-color-link-text-visited: var(--tui-color-magenta-700); --tui-color-magenta-100: oklch(95.8% 0.0241 351.2); --tui-color-magenta-200: oklch(91% 0.0541 351.2); --tui-color-magenta-300: oklch(86% 0.0816 351.2); --tui-color-magenta-400: oklch(79.5% 0.1047 351.2); --tui-color-magenta-500: oklch(71.5% 0.13 351.2); --tui-color-magenta-600: oklch(63.5% 0.153 351.2); --tui-color-magenta-700: var(--tui-color-rexall-berry-purple); --tui-color-magenta-800: oklch(45.5% 0.1676 351.2); --tui-color-magenta-900: oklch(36.5% 0.1389 351.2); --tui-color-magenta-1000: oklch(27% 0.1075 351.2); --tui-color-neutral-100: oklch(95.8% 0 0); --tui-color-neutral-200: oklch(91% 0 0); --tui-color-neutral-300: oklch(86% 0 0); --tui-color-neutral-400: oklch(79.5% 0 0); --tui-color-neutral-500: oklch(71.5% 0 0); --tui-color-neutral-600: oklch(63.5% 0 0); --tui-color-neutral-700: oklch(54.5% 0 0); --tui-color-neutral-800: oklch(45.5% 0 0); --tui-color-neutral-900: var(--tui-color-rexall-charcoal-grey); --tui-color-neutral-1000: oklch(27% 0 0); --tui-color-neutral-A100: oklch(10.78% 0 0 / 0.056); --tui-color-neutral-A200: oklch(7.66% 0 0 / 0.118); --tui-color-neutral-A300: oklch(6.76% 0 0 / 0.182); --tui-color-neutral-A400: oklch(6.59% 0 0 / 0.264); --tui-color-neutral-A500: oklch(5.18% 0 0 / 0.362); --tui-color-neutral-A600: oklch(1.98% 0 0 / 0.457); --tui-color-neutral-A700: oklch(0% 0 0 / 0.561); --tui-color-neutral-A800: oklch(3.14% 0 0 / 0.661); --tui-color-neutral-A900: oklch(4.4% 0 0 / 0.797); --tui-color-neutral-A1000: oklch(3.14% 0 0 / 0.85); --tui-color-orange-100: oklch(95.8% 0.023 48.9); --tui-color-orange-200: oklch(91% 0.0514 48.9); --tui-color-orange-300: oklch(86% 0.0834 48.9); --tui-color-orange-400: oklch(79.5% 0.1188 48.9); --tui-color-orange-500: oklch(71.5% 0.1528 48.9); --tui-color-orange-600: var(--tui-color-rexall-terracotta-orange); --tui-color-orange-700: oklch(54.5% 0.1463 48.9); --tui-color-orange-800: oklch(45.5% 0.1222 48.9); --tui-color-orange-900: oklch(36.5% 0.098 48.9); --tui-color-orange-1000: oklch(27% 0.0725 48.9); --tui-color-pink-100: oklch(95.8% 0.0216 5); --tui-color-pink-200: oklch(91% 0.0485 5); --tui-color-pink-300: oklch(86% 0.0792 5); --tui-color-pink-400: oklch(79.5% 0.1241 5); --tui-color-pink-500: oklch(71.5% 0.1644 5); --tui-color-pink-600: var(--tui-color-rexall-tulip-pink); --tui-color-pink-700: oklch(54.5% 0.1544 5); --tui-color-pink-800: oklch(45.5% 0.1324 5); --tui-color-pink-900: oklch(36.5% 0.1098 5); --tui-color-pink-1000: oklch(27% 0.085 5); --tui-color-red-100: oklch(95.8% 0.0206 23.7); --tui-color-red-200: oklch(91% 0.0462 23.7); --tui-color-red-300: oklch(86% 0.0754 23.7); --tui-color-red-400: oklch(79.5% 0.1177 23.7); --tui-color-red-500: oklch(71.5% 0.1783 23.7); --tui-color-red-600: var(--tui-color-rexall-ladybug-red); --tui-color-red-700: oklch(54.5% 0.2142 23.7); --tui-color-red-800: oklch(45.5% 0.1837 23.7); --tui-color-red-900: oklch(36.5% 0.1475 23.7); --tui-color-red-1000: oklch(27% 0.1091 23.7); /* Be Well */ --tui-color-rexall-apricot-orange: oklch(71.4% 0.1525 56.134); /* Skin Health */ --tui-color-rexall-ash: oklch(90% 0.0027 106.45); /* Rexall */ --tui-color-rexall-banana-yellow: oklch(95.33% 0.0757 95.318); /* Berry Purple — magenta anchor */ --tui-color-rexall-berry-purple: oklch(51.17% 0.1852 351.18); /* Rexall */ --tui-color-rexall-blush-pink: oklch(58.59% 0.1586 4.6101); /* Be Well promo */ --tui-color-rexall-blush-red: oklch(86.8% 0.055 21.054); /* Be Well promo */ --tui-color-rexall-burgundy-red: oklch(45.44% 0.1821 28.716); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-calming-blue-haze: oklch(80.84% 0.0387 249.54); /* Charcoal Grey — neutral anchor */ --tui-color-rexall-charcoal-grey: oklch(32.5% 0 0); /* Rexall */ --tui-color-rexall-cloud-grey: oklch(84.52% 0 0); /* Be Well promo */ --tui-color-rexall-cream-yellow: oklch(99.23% 0.0159 98.986); /* Be Well promo */ --tui-color-rexall-daisy-yellow: oklch(92.84% 0.1204 106.48); /* Rexall AODA */ --tui-color-rexall-deep-ocean: oklch(42.34% 0.0723 194.8); /* Be Well promo */ --tui-color-rexall-dusty-red: oklch(50.13% 0.1755 23.713); /* Be Well */ --tui-color-rexall-evergreen: oklch(51.19% 0.0835 138.17); /* Rexall */ --tui-color-rexall-fog-grey: oklch(97.91% 0 0); /* Be Well */ --tui-color-rexall-forest-green: oklch(45.31% 0.073 146.02); /* Be Well */ --tui-color-rexall-garden-green: oklch(54.77% 0.0953 138.22); /* Be Well */ --tui-color-rexall-granite-grey: oklch(53.49% 0.005 17.313); /* Rexall */ --tui-color-rexall-grapefruit: oklch(95.01% 0.0848 98.329); /* Rexall */ --tui-color-rexall-grass-green: oklch(78.93% 0.1268 133.59); /* Be Well */ --tui-color-rexall-grey-blue: oklch(59.99% 0.0929 185.62); /* Be Well promo */ --tui-color-rexall-highlighter-yellow: oklch(92.14% 0.1824 105.41); /* Digestive */ --tui-color-rexall-immunity-orange: oklch(71.08% 0.1395 51.737); /* Ladybug Red — red anchor */ --tui-color-rexall-ladybug-red: oklch(60.41% 0.2338 23.742); /* Rexall AODA */ --tui-color-rexall-lakeside-blue: oklch(52.74% 0.0872 187.63); /* Be Well */ --tui-color-rexall-lavender-purple: oklch(89.47% 0.0375 342.55); /* Rexall */ --tui-color-rexall-lemon-yellow: oklch(88.28% 0.1811 94.46); /* Rexall */ --tui-color-rexall-light-blush-pink: oklch(85.56% 0.0673 10.506); /* Rexall */ --tui-color-rexall-light-drizzle: oklch(91.04% 0.0336 191.96); /* Be Well promo */ --tui-color-rexall-light-red: oklch(94.46% 0.0142 12.025); /* Be Well */ --tui-color-rexall-lime-green: oklch(75.39% 0.152 134.81); /* Be Well promo */ --tui-color-rexall-lipstick-red: oklch(62.76% 0.2141 23.004); /* Be Well */ --tui-color-rexall-melon-orange: oklch(85.06% 0.0788 62.059); /* Rexall */ --tui-color-rexall-mist-blue: oklch(95.8% 0.0169 192.36); /* Be Well */ --tui-color-rexall-moss-green: oklch(64.94% 0.1505 133.89); /* Be Well */ --tui-color-rexall-night-grey: oklch(42.18% 0.0031 48.66); /* Be Well */ --tui-color-rexall-pansy-purple: oklch(79.17% 0.0759 344.13); /* Be Well */ --tui-color-rexall-peachy-orange: oklch(92.38% 0.0385 63.533); /* Be Well promo */ --tui-color-rexall-pinky-red: oklch(96.91% 0.0151 17.418); /* Be Well */ --tui-color-rexall-plum-purple: oklch(59.35% 0.1561 347.67); /* Poolside Blue — teal anchor */ --tui-color-rexall-poolside-blue: oklch(68.76% 0.1147 188.23); /* Rexall */ --tui-color-rexall-rain-blue: oklch(87.81% 0.0553 193.35); /* Be Well promo */ --tui-color-rexall-rosy-red: oklch(69.56% 0.183 23.103); /* Rexall */ --tui-color-rexall-ruby-red: oklch(57.73% 0.2098 23.23); /* Rexall */ --tui-color-rexall-sage-green: oklch(88.81% 0.0662 132.17); /* Be Well */ --tui-color-rexall-seaside-blue: oklch(49.86% 0.0891 182.42); /* Rexall AODA */ --tui-color-rexall-shoreline-blue: oklch(63.95% 0.1102 188.54); /* Be Well */ --tui-color-rexall-silver-grey: oklch(66.37% 0.0049 0.0752); /* Be Well */ --tui-color-rexall-sky-blue: oklch(84.85% 0.0638 193.53); /* Rexall */ --tui-color-rexall-slate-grey: oklch(53.82% 0 0); --tui-color-rexall-steel: oklch(52.12% 0.0301 259.03); --tui-color-rexall-steel-100: oklch(95.8% 0.0077 249.5); --tui-color-rexall-steel-200: oklch(91% 0.0173 249.5); --tui-color-rexall-steel-300: oklch(86% 0.0277 249.5); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-steel-400: var(--tui-color-rexall-calming-blue-haze); --tui-color-rexall-steel-500: oklch(71.5% 0.0348 249.5); --tui-color-rexall-steel-600: oklch(63.5% 0.0315 249.5); --tui-color-rexall-steel-700: oklch(54.5% 0.0276 249.5); --tui-color-rexall-steel-800: oklch(45.5% 0.0237 249.5); --tui-color-rexall-steel-900: oklch(36.5% 0.0196 249.5); --tui-color-rexall-steel-1000: oklch(27% 0.0152 249.5); /* Sunshine Yellow — yellow anchor */ --tui-color-rexall-sunshine-yellow: oklch(86.72% 0.1773 90.85); /* Be Well promo */ --tui-color-rexall-taupe-red: oklch(75.68% 0.0781 13.998); /* Rexall */ --tui-color-rexall-tea-green: oklch(95.59% 0.0563 131.52); /* Be Well */ --tui-color-rexall-teal-blue: oklch(68.53% 0.0897 185.9); /* Terracotta Orange — orange anchor */ --tui-color-rexall-terracotta-orange: oklch(65.65% 0.1764 48.889); /* Tulip Pink — pink anchor */ --tui-color-rexall-tulip-pink: oklch(67.04% 0.1842 5.0399); /* Be Well promo */ --tui-color-rexall-vanilla-yellow: oklch(95.6% 0.072 105.12); /* Be Well */ --tui-color-rexall-venice-blue: oklch(40.54% 0.0851 236.88); /* Be Well */ --tui-color-rexall-washed-blue: oklch(78.7% 0.0619 185.5); /* Well Green — green anchor */ --tui-color-rexall-well-green: oklch(72.73% 0.1698 134.03); /* Digestive */ --tui-color-rexall-well-green-deep: oklch(50.28% 0.1219 142.99); --tui-color-surface-background: var(--tui-color-white); --tui-color-surface-background-brand: var(--tui-color-rexall-shoreline-blue); /* A page or section tinted with the brand. Plain surface unless a brand sets a tint. */ --tui-color-surface-background-brand-subtle: var(--tui-color-surface-background); --tui-color-surface-background-neutral-subtle: var(--tui-color-neutral-100); --tui-color-tag-background-accent-green: var(--tui-color-green-100); --tui-color-tag-background-accent-magenta: var(--tui-color-magenta-100); --tui-color-tag-background-accent-neutral: var(--tui-color-neutral-100); --tui-color-tag-background-accent-orange: var(--tui-color-orange-100); --tui-color-tag-background-accent-pink: var(--tui-color-pink-100); --tui-color-tag-background-accent-steel: var(--tui-color-rexall-steel-100); --tui-color-tag-background-accent-teal: var(--tui-color-teal-100); --tui-color-tag-background-accent-yellow: var(--tui-color-yellow-100); --tui-color-tag-text-accent-green: var(--tui-color-green-800); --tui-color-tag-text-accent-magenta: var(--tui-color-magenta-800); --tui-color-tag-text-accent-neutral: var(--tui-color-neutral-800); --tui-color-tag-text-accent-orange: var(--tui-color-orange-800); --tui-color-tag-text-accent-pink: var(--tui-color-pink-800); --tui-color-tag-text-accent-steel: var(--tui-color-rexall-steel-800); --tui-color-tag-text-accent-teal: var(--tui-color-teal-800); --tui-color-tag-text-accent-yellow: var(--tui-color-yellow-800); --tui-color-teal-100: oklch(95.8% 0.0229 188.2); --tui-color-teal-200: oklch(91% 0.0422 188.2); --tui-color-teal-300: oklch(86% 0.0602 188.2); --tui-color-teal-400: oklch(79.5% 0.0818 188.2); /* Poolside Blue — teal anchor */ --tui-color-teal-500: var(--tui-color-rexall-poolside-blue); --tui-color-teal-600: oklch(63.5% 0.1071 188.2); --tui-color-teal-700: oklch(54.5% 0.0941 188.2); --tui-color-teal-800: oklch(45.5% 0.079 188.2); --tui-color-teal-900: oklch(36.5% 0.0634 188.2); --tui-color-teal-1000: oklch(27% 0.0469 188.2); --tui-color-text: var(--tui-color-neutral-900); --tui-color-text-brand: var(--tui-color-teal-800); --tui-color-text-brand-hovered: var(--tui-color-teal-900); --tui-color-text-brand-pressed: var(--tui-color-teal-900); --tui-color-text-danger: var(--tui-color-red-700); --tui-color-text-danger-hovered: var(--tui-color-red-800); --tui-color-text-danger-pressed: var(--tui-color-red-800); --tui-color-text-disabled: var(--tui-color-neutral-600); --tui-color-text-information: var(--tui-color-rexall-steel-700); --tui-color-text-inverse: var(--tui-color-white); --tui-color-text-neutral: var(--tui-color-neutral-900); --tui-color-text-neutral-hovered: var(--tui-color-neutral-800); --tui-color-text-neutral-pressed: var(--tui-color-neutral-1000); --tui-color-text-neutral-subtle: var(--tui-color-neutral-800); --tui-color-text-success: var(--tui-color-green-700); --tui-color-text-warning: var(--tui-color-yellow-700); --tui-color-transparent: oklch(0% 0 0 / 0); --tui-color-white: oklch(100% 0 0); --tui-color-yellow-100: oklch(95.8% 0.0354 90.8); --tui-color-yellow-200: oklch(91% 0.1029 90.8); /* Sunshine Yellow — yellow anchor */ --tui-color-yellow-300: var(--tui-color-rexall-sunshine-yellow); --tui-color-yellow-400: oklch(79.5% 0.1624 88.3); --tui-color-yellow-500: oklch(71.5% 0.1463 85.7); --tui-color-yellow-600: oklch(63.5% 0.1305 83.1); --tui-color-yellow-700: oklch(54.5% 0.1126 80.6); --tui-color-yellow-800: oklch(45.5% 0.0948 78); --tui-color-yellow-900: oklch(36.5% 0.0768 75.4); --tui-color-yellow-1000: oklch(27% 0.0575 72.8); --tui-elevation-shadow-overflow: 0px 0px 8px 0px oklch(27% 0 0 / 0.16), 0px 0px 1px 0px oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-perimeter: oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-spread: oklch(27% 0 0 / 0.16); --tui-elevation-shadow-overlay: 0px 8px 12px 0px oklch(27% 0 0 / 0.15), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-shadow-raised: 0px 1px 1px 0px oklch(27% 0 0 / 0.25), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-surface: var(--tui-color-transparent); --tui-elevation-surface-container: var(--tui-color-neutral-A100); --tui-elevation-surface-container-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-container-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay: var(--tui-color-transparent); --tui-elevation-surface-overlay-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-raised: var(--tui-color-transparent); --tui-elevation-surface-raised-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-raised-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-sunken: var(--tui-color-neutral-A100); --tui-font-family-mono: "Source Code Pro", ui-monospace, "Consolas", "Menlo", monospace; --tui-font-family-sans: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --tui-font-leading-050: 16px; --tui-font-leading-075: 20px; --tui-font-leading-100: 24px; --tui-font-leading-200: 28px; --tui-font-leading-300: 28px; --tui-font-leading-400: 32px; --tui-font-leading-500: 40px; --tui-font-leading-600: 48px; --tui-font-leading-700: 56px; --tui-font-leading-800: 68px; --tui-font-leading-900: 96px; --tui-font-leading-1000: 116px; --tui-font-size-050: 12px; --tui-font-size-075: 14px; --tui-font-size-100: 16px; --tui-font-size-200: 20px; --tui-font-size-300: 24px; --tui-font-size-400: 28px; --tui-font-size-500: 32px; --tui-font-size-600: 40px; --tui-font-size-700: 48px; --tui-font-size-800: 56px; --tui-font-size-900: 80px; --tui-font-size-1000: 96px; --tui-font-tracking-default: 0rem; --tui-font-weight-bold: 700; --tui-font-weight-medium: 500; --tui-font-weight-regular: 400; --tui-font-weight-semibold: 600; --tui-layer-0: 0; --tui-layer-10: 10; --tui-layer-20: 20; --tui-layer-30: 30; --tui-layer-40: 40; --tui-layer-50: 50; --tui-layer-60: 60; --tui-layer-base: var(--tui-layer-0); --tui-layer-modal: var(--tui-layer-50); --tui-layer-navigation: var(--tui-layer-10); --tui-layer-notification: var(--tui-layer-60); --tui-layer-overlay: var(--tui-layer-40); --tui-layer-popover: var(--tui-layer-30); --tui-layer-sticky: var(--tui-layer-20); --tui-motion-action-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-action-pressed: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-blanket-enter: var(--tui-motion-duration-long) 0ms var(--tui-motion-easing-inout-bold); --tui-motion-blanket-exit: var(--tui-motion-duration-medium) 0ms var(--tui-motion-easing-in-practical); --tui-motion-control-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-selected: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-toggle: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-curve-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6); --tui-motion-curve-inout-bold: cubic-bezier(0.4, 0, 0, 1); --tui-motion-curve-out-bold: cubic-bezier(0, 0.4, 0, 1); --tui-motion-curve-out-practical: cubic-bezier(0.4, 1, 0.6, 1); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-curve-spring: cubic-bezier(0.363, 1.102, 0.089, 1.043); --tui-motion-duration-0: 0ms; --tui-motion-duration-050: 50ms; --tui-motion-duration-100: 100ms; --tui-motion-duration-150: 150ms; --tui-motion-duration-200: 200ms; --tui-motion-duration-250: 250ms; --tui-motion-duration-400: 400ms; --tui-motion-duration-600: 600ms; --tui-motion-duration-instant: var(--tui-motion-duration-0); --tui-motion-duration-long: var(--tui-motion-duration-250); --tui-motion-duration-medium: var(--tui-motion-duration-200); --tui-motion-duration-short: var(--tui-motion-duration-150); --tui-motion-duration-xlong: var(--tui-motion-duration-400); --tui-motion-duration-xshort: var(--tui-motion-duration-100); --tui-motion-duration-xxlong: var(--tui-motion-duration-600); --tui-motion-duration-xxshort: var(--tui-motion-duration-050); --tui-motion-easing-in-practical: var(--tui-motion-curve-in-practical); --tui-motion-easing-inout-bold: var(--tui-motion-curve-inout-bold); --tui-motion-easing-out-bold: var(--tui-motion-curve-out-bold); --tui-motion-easing-out-practical: var(--tui-motion-curve-out-practical); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-easing-spring: var(--tui-motion-curve-spring); /* Corners of a small action (Button sm). */ --tui-shape-action-round: var(--tui-size-radius-lg); /* Corners of a medium action (Button md). */ --tui-shape-action-rounder: var(--tui-size-radius-xl); /* Corners of a large action (Button lg). The roundest action, not always a pill. */ --tui-shape-action-roundest: var(--tui-size-radius-2xl); /* Corners of a box that holds content, such as a card. Follows the surface corners unless a brand sets its own. */ --tui-shape-container-rounder: var(--tui-shape-surface-rounder); --tui-shape-rounder: var(--tui-size-radius-lg); --tui-shape-surface-rounder: var(--tui-size-radius-2xl); --tui-size-border-hairline: var(--tui-size-border-sm); --tui-size-border-md: 2px; --tui-size-border-narrow: var(--tui-size-border-md); --tui-size-border-sm: 1px; --tui-size-icon-lg: var(--tui-space-300); --tui-size-icon-md: var(--tui-space-250); --tui-size-icon-sm: var(--tui-space-200); --tui-size-icon-xs: var(--tui-space-100); --tui-size-radius-2xl: 16px; --tui-size-radius-3xl: 20px; --tui-size-radius-4xl: 24px; --tui-size-radius-full: 9999px; --tui-size-radius-lg: 8px; --tui-size-radius-md: 6px; --tui-size-radius-none: 0px; --tui-size-radius-sm: 4px; --tui-size-radius-xl: 12px; --tui-size-radius-xs: 2px; --tui-space-0: 0px; --tui-space-025: 2px; --tui-space-050: 4px; --tui-space-075: 6px; --tui-space-100: 8px; --tui-space-125: 10px; --tui-space-150: 12px; --tui-space-200: 16px; --tui-space-250: 20px; --tui-space-300: 24px; --tui-space-400: 32px; --tui-space-500: 40px; --tui-space-600: 48px; --tui-space-700: 56px; --tui-space-800: 64px; --tui-space-900: 72px; --tui-space-1000: 80px; --tui-space-1100: 88px; --tui-space-1200: 96px; --tui-space-1300: 104px; --tui-space-1400: 112px; --tui-space-1500: 120px; --tui-space-inline: var(--tui-space-100); --tui-space-inline-dense: var(--tui-space-050); --tui-space-inline-loose: var(--tui-space-150); --tui-space-inline-looser: var(--tui-space-250); --tui-space-inset: var(--tui-space-200); --tui-space-inset-dense: var(--tui-space-100); --tui-space-inset-loose: var(--tui-space-250); --tui-space-inset-looser: var(--tui-space-400); --tui-space-inset-squish: 12px 24px; --tui-space-inset-squish-dense: 8px 24px; --tui-space-inset-squish-loose: 16px 24px; --tui-space-inset-stretch: 8px 16px; --tui-space-inset-stretch-loosest: 16px 16px; --tui-space-negative-025: -2px; --tui-space-negative-050: -4px; --tui-space-negative-075: -6px; --tui-space-negative-100: -8px; --tui-space-negative-150: -12px; --tui-space-negative-200: -16px; --tui-space-negative-250: -20px; --tui-space-negative-300: -24px; --tui-space-negative-400: -32px; --tui-space-stack: var(--tui-space-200); --tui-space-stack-dense: var(--tui-space-100); --tui-space-stack-denser: var(--tui-space-050); --tui-space-stack-loose: var(--tui-space-300); --tui-space-stack-looser: var(--tui-space-400); --tui-space-stack-loosest: var(--tui-space-600); --tui-typography-action-label-lg: var(--tui-typography-action-label-lg-font-weight) var(--tui-typography-action-label-lg-font-size)/var(--tui-typography-action-label-lg-line-height) var(--tui-typography-action-label-lg-font-family); --tui-typography-action-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-action-label-lg-font-size: var(--tui-font-size-100); --tui-typography-action-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-lg-letter-spacing: 0px; --tui-typography-action-label-lg-line-height: 1.5; --tui-typography-action-label-md: var(--tui-typography-action-label-md-font-weight) var(--tui-typography-action-label-md-font-size)/var(--tui-typography-action-label-md-line-height) var(--tui-typography-action-label-md-font-family); --tui-typography-action-label-md-font-family: var(--tui-font-family-sans); --tui-typography-action-label-md-font-size: var(--tui-font-size-075); --tui-typography-action-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-md-letter-spacing: 0px; --tui-typography-action-label-md-line-height: 1.4286; --tui-typography-action-label-xl: var(--tui-typography-action-label-xl-font-weight) var(--tui-typography-action-label-xl-font-size)/var(--tui-typography-action-label-xl-line-height) var(--tui-typography-action-label-xl-font-family); --tui-typography-action-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-action-label-xl-font-size: var(--tui-font-size-200); --tui-typography-action-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-xl-letter-spacing: 0px; --tui-typography-action-label-xl-line-height: 1.4; --tui-typography-body-lg: var(--tui-typography-body-lg-font-weight) var(--tui-typography-body-lg-font-size)/var(--tui-typography-body-lg-line-height) var(--tui-typography-body-lg-font-family); --tui-typography-body-lg-font-family: var(--tui-font-family-sans); --tui-typography-body-lg-font-size: var(--tui-font-size-200); --tui-typography-body-lg-font-weight: var(--tui-font-weight-regular); --tui-typography-body-lg-letter-spacing: 0px; --tui-typography-body-lg-line-height: 1.4; --tui-typography-body-md: var(--tui-typography-body-md-font-weight) var(--tui-typography-body-md-font-size)/var(--tui-typography-body-md-line-height) var(--tui-typography-body-md-font-family); --tui-typography-body-md-font-family: var(--tui-font-family-sans); --tui-typography-body-md-font-size: var(--tui-font-size-100); --tui-typography-body-md-font-weight: var(--tui-font-weight-regular); --tui-typography-body-md-letter-spacing: 0px; --tui-typography-body-md-line-height: 1.5; --tui-typography-body-sm: var(--tui-typography-body-sm-font-weight) var(--tui-typography-body-sm-font-size)/var(--tui-typography-body-sm-line-height) var(--tui-typography-body-sm-font-family); --tui-typography-body-sm-font-family: var(--tui-font-family-sans); --tui-typography-body-sm-font-size: var(--tui-font-size-075); --tui-typography-body-sm-font-weight: var(--tui-font-weight-regular); --tui-typography-body-sm-letter-spacing: 0px; --tui-typography-body-sm-line-height: 1.4286; --tui-typography-body-xs: var(--tui-typography-body-xs-font-weight) var(--tui-typography-body-xs-font-size)/var(--tui-typography-body-xs-line-height) var(--tui-typography-body-xs-font-family); --tui-typography-body-xs-font-family: var(--tui-font-family-sans); --tui-typography-body-xs-font-size: var(--tui-font-size-050); --tui-typography-body-xs-font-weight: var(--tui-font-weight-regular); --tui-typography-body-xs-letter-spacing: 0px; --tui-typography-body-xs-line-height: 1.3333; --tui-typography-code-md: var(--tui-typography-code-md-font-weight) var(--tui-typography-code-md-font-size)/var(--tui-typography-code-md-line-height) var(--tui-typography-code-md-font-family); --tui-typography-code-md-font-family: var(--tui-font-family-mono); --tui-typography-code-md-font-size: var(--tui-font-size-075); --tui-typography-code-md-font-weight: var(--tui-font-weight-regular); --tui-typography-code-md-letter-spacing: 0px; --tui-typography-code-md-line-height: 1.4286; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md: var(--tui-typography-container-heading-md-font-weight) var(--tui-typography-container-heading-md-font-size)/var(--tui-typography-container-heading-md-line-height) var(--tui-typography-container-heading-md-font-family); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-family: var(--tui-font-family-sans); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-size: var(--tui-font-size-200); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-weight: var(--tui-font-weight-bold); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-letter-spacing: 0px; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-line-height: 1.4; --tui-typography-display-lg: var(--tui-typography-display-lg-font-weight) var(--tui-typography-display-lg-font-size)/var(--tui-typography-display-lg-line-height) var(--tui-typography-display-lg-font-family); --tui-typography-display-lg-font-family: var(--tui-font-family-sans); --tui-typography-display-lg-font-size: var(--tui-font-size-900); --tui-typography-display-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-display-lg-letter-spacing: -0.8px; --tui-typography-display-lg-line-height: 1.2; --tui-typography-display-md: var(--tui-typography-display-md-font-weight) var(--tui-typography-display-md-font-size)/var(--tui-typography-display-md-line-height) var(--tui-typography-display-md-font-family); --tui-typography-display-md-font-family: var(--tui-font-family-sans); --tui-typography-display-md-font-size: var(--tui-font-size-800); --tui-typography-display-md-font-weight: var(--tui-font-weight-bold); --tui-typography-display-md-letter-spacing: -0.56px; --tui-typography-display-md-line-height: 1.2143; --tui-typography-display-xl: var(--tui-typography-display-xl-font-weight) var(--tui-typography-display-xl-font-size)/var(--tui-typography-display-xl-line-height) var(--tui-typography-display-xl-font-family); --tui-typography-display-xl-font-family: var(--tui-font-family-sans); --tui-typography-display-xl-font-size: var(--tui-font-size-1000); --tui-typography-display-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-display-xl-letter-spacing: -0.96px; --tui-typography-display-xl-line-height: 1.2083; --tui-typography-heading-lg: var(--tui-typography-heading-lg-font-weight) var(--tui-typography-heading-lg-font-size)/var(--tui-typography-heading-lg-line-height) var(--tui-typography-heading-lg-font-family); --tui-typography-heading-lg-font-family: var(--tui-font-family-sans); --tui-typography-heading-lg-font-size: var(--tui-font-size-400); --tui-typography-heading-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-lg-letter-spacing: -0.28px; --tui-typography-heading-lg-line-height: 1.1429; --tui-typography-heading-md: var(--tui-typography-heading-md-font-weight) var(--tui-typography-heading-md-font-size)/var(--tui-typography-heading-md-line-height) var(--tui-typography-heading-md-font-family); --tui-typography-heading-md-font-family: var(--tui-font-family-sans); --tui-typography-heading-md-font-size: var(--tui-font-size-300); --tui-typography-heading-md-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-md-letter-spacing: 0px; --tui-typography-heading-md-line-height: 1.1667; --tui-typography-heading-sm: var(--tui-typography-heading-sm-font-weight) var(--tui-typography-heading-sm-font-size)/var(--tui-typography-heading-sm-line-height) var(--tui-typography-heading-sm-font-family); --tui-typography-heading-sm-font-family: var(--tui-font-family-sans); --tui-typography-heading-sm-font-size: var(--tui-font-size-200); --tui-typography-heading-sm-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-sm-letter-spacing: 0px; --tui-typography-heading-sm-line-height: 1.4; --tui-typography-heading-xl: var(--tui-typography-heading-xl-font-weight) var(--tui-typography-heading-xl-font-size)/var(--tui-typography-heading-xl-line-height) var(--tui-typography-heading-xl-font-family); --tui-typography-heading-xl-font-family: var(--tui-font-family-sans); --tui-typography-heading-xl-font-size: var(--tui-font-size-500); --tui-typography-heading-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-xl-letter-spacing: -0.32px; --tui-typography-heading-xl-line-height: 1.25; --tui-typography-label-lg: var(--tui-typography-label-lg-font-weight) var(--tui-typography-label-lg-font-size)/var(--tui-typography-label-lg-line-height) var(--tui-typography-label-lg-font-family); --tui-typography-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-label-lg-font-size: var(--tui-font-size-100); --tui-typography-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-lg-letter-spacing: 0px; --tui-typography-label-lg-line-height: 1.5; --tui-typography-label-md: var(--tui-typography-label-md-font-weight) var(--tui-typography-label-md-font-size)/var(--tui-typography-label-md-line-height) var(--tui-typography-label-md-font-family); --tui-typography-label-md-font-family: var(--tui-font-family-sans); --tui-typography-label-md-font-size: var(--tui-font-size-075); --tui-typography-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-md-letter-spacing: 0px; --tui-typography-label-md-line-height: 1.4286; --tui-typography-label-xl: var(--tui-typography-label-xl-font-weight) var(--tui-typography-label-xl-font-size)/var(--tui-typography-label-xl-line-height) var(--tui-typography-label-xl-font-family); --tui-typography-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-label-xl-font-size: var(--tui-font-size-200); --tui-typography-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-xl-letter-spacing: 0px; --tui-typography-label-xl-line-height: 1.4; } } @layer tokens { :root[data-sub-theme="bewell"] { --tui-color-background-accent-green: var(--tui-color-green-500); --tui-color-background-accent-green-bold: var(--tui-color-green-700); --tui-color-background-accent-green-subtle: var(--tui-color-green-100); --tui-color-background-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-background-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-background-accent-steel-subtle: var(--tui-color-rexall-steel-500); --tui-color-background-accent-teal: var(--tui-color-teal-500); --tui-color-background-accent-teal-bold: var(--tui-color-teal-700); --tui-color-background-accent-teal-subtle: var(--tui-color-teal-100); --tui-color-background-brand: var(--tui-color-teal-500); --tui-color-background-brand-bold: var(--tui-color-teal-700); --tui-color-background-brand-bold-hovered: var(--tui-color-teal-800); --tui-color-background-brand-bold-pressed: var(--tui-color-teal-900); --tui-color-background-brand-subtle: var(--tui-color-green-100); --tui-color-background-brand-subtle-hovered: var(--tui-color-green-200); --tui-color-background-brand-subtle-pressed: var(--tui-color-green-300); --tui-color-background-danger: var(--tui-color-red-700); --tui-color-background-danger-bold: var(--tui-color-red-700); --tui-color-background-danger-hovered: var(--tui-color-red-800); --tui-color-background-danger-pressed: var(--tui-color-red-900); --tui-color-background-danger-subtle: var(--tui-color-red-100); --tui-color-background-danger-subtle-hovered: var(--tui-color-red-200); --tui-color-background-danger-subtle-pressed: var(--tui-color-red-300); --tui-color-background-disabled: var(--tui-color-neutral-100); --tui-color-background-hovered: var(--tui-color-neutral-100); --tui-color-background-information: var(--tui-color-rexall-steel-500); --tui-color-background-information-bold: var(--tui-color-rexall-steel-700); --tui-color-background-information-subtle: var(--tui-color-rexall-steel-100); --tui-color-background-inverse: var(--tui-color-neutral-900); --tui-color-background-inverse-hovered: var(--tui-color-neutral-1000); --tui-color-background-inverse-pressed: var(--tui-color-neutral-800); --tui-color-background-neutral: var(--tui-color-neutral-400); --tui-color-background-neutral-bold: var(--tui-color-neutral-700); --tui-color-background-neutral-hovered: var(--tui-color-neutral-300); --tui-color-background-neutral-pressed: var(--tui-color-neutral-500); --tui-color-background-neutral-subtle: var(--tui-color-neutral-200); --tui-color-background-neutral-subtle-hovered: var(--tui-color-neutral-100); --tui-color-background-neutral-subtle-pressed: var(--tui-color-neutral-300); --tui-color-background-pressed: var(--tui-color-neutral-200); --tui-color-background-selected: var(--tui-color-teal-100); --tui-color-background-success: var(--tui-color-green-500); --tui-color-background-success-bold: var(--tui-color-green-700); --tui-color-background-success-subtle: var(--tui-color-green-100); --tui-color-background-warning: var(--tui-color-yellow-300); --tui-color-background-warning-bold: var(--tui-color-yellow-300); --tui-color-background-warning-subtle: var(--tui-color-yellow-100); --tui-color-black: oklch(0% 0 0); --tui-color-blanket-background: var(--tui-color-neutral-900); --tui-color-border: var(--tui-color-neutral-300); --tui-color-border-accent-green: var(--tui-color-green-500); --tui-color-border-accent-green-bold: var(--tui-color-green-700); --tui-color-border-accent-green-subtle: var(--tui-color-green-300); --tui-color-border-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-border-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-border-accent-steel-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-accent-teal: var(--tui-color-teal-500); --tui-color-border-accent-teal-bold: var(--tui-color-teal-700); --tui-color-border-accent-teal-subtle: var(--tui-color-teal-300); --tui-color-border-brand: var(--tui-color-teal-700); --tui-color-border-brand-bold: var(--tui-color-teal-700); --tui-color-border-brand-hovered: var(--tui-color-teal-800); --tui-color-border-brand-pressed: var(--tui-color-teal-900); --tui-color-border-brand-subtle: var(--tui-color-teal-300); --tui-color-border-danger: var(--tui-color-red-600); --tui-color-border-danger-bold: var(--tui-color-red-700); --tui-color-border-danger-hovered: var(--tui-color-red-700); --tui-color-border-danger-pressed: var(--tui-color-red-800); --tui-color-border-danger-subtle: var(--tui-color-red-300); --tui-color-border-disabled: var(--tui-color-neutral-200); --tui-color-border-focus: var(--tui-color-neutral-1000); --tui-color-border-information: var(--tui-color-rexall-steel-600); --tui-color-border-information-bold: var(--tui-color-rexall-steel-700); --tui-color-border-information-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-inverse-focus: var(--tui-color-white); --tui-color-border-neutral: var(--tui-color-neutral-300); --tui-color-border-neutral-bold: var(--tui-color-neutral-600); --tui-color-border-neutral-bold-hovered: var(--tui-color-neutral-700); --tui-color-border-neutral-bold-pressed: var(--tui-color-neutral-800); --tui-color-border-neutral-hovered: var(--tui-color-neutral-200); --tui-color-border-neutral-pressed: var(--tui-color-neutral-400); --tui-color-border-neutral-subtle: var(--tui-color-neutral-300); --tui-color-border-neutral-subtlest: var(--tui-color-neutral-200); --tui-color-border-selected: var(--tui-color-teal-700); --tui-color-border-success: var(--tui-color-green-700); --tui-color-border-success-bold: var(--tui-color-green-700); --tui-color-border-success-subtle: var(--tui-color-green-300); --tui-color-border-warning: var(--tui-color-yellow-600); --tui-color-border-warning-bold: var(--tui-color-yellow-700); --tui-color-border-warning-subtle: var(--tui-color-yellow-300); --tui-color-container-background: var(--tui-color-white); --tui-color-container-background-accent-green: var(--tui-color-background-accent-green); --tui-color-container-background-accent-green-bold: var(--tui-color-background-accent-green-bold); --tui-color-container-background-accent-green-subtle: var(--tui-color-background-accent-green-subtle); --tui-color-container-background-accent-steel: var(--tui-color-background-accent-steel); --tui-color-container-background-accent-steel-bold: var(--tui-color-background-accent-steel-bold); --tui-color-container-background-accent-steel-subtle: var(--tui-color-background-accent-steel-subtle); --tui-color-container-background-accent-teal: var(--tui-color-background-accent-teal); --tui-color-container-background-accent-teal-bold: var(--tui-color-background-accent-teal-bold); --tui-color-container-background-accent-teal-subtle: var(--tui-color-background-accent-teal-subtle); --tui-color-container-background-brand: var(--tui-color-background-brand); --tui-color-container-background-brand-bold: var(--tui-color-background-brand-bold); --tui-color-container-background-brand-subtle: var(--tui-color-background-brand-subtle); --tui-color-container-background-danger: var(--tui-color-background-danger); --tui-color-container-background-danger-bold: var(--tui-color-background-danger-bold); --tui-color-container-background-danger-subtle: var(--tui-color-background-danger-subtle); --tui-color-container-background-information: var(--tui-color-background-information); --tui-color-container-background-information-bold: var(--tui-color-background-information-bold); --tui-color-container-background-information-subtle: var(--tui-color-background-information-subtle); --tui-color-container-background-neutral: var(--tui-color-background-neutral); --tui-color-container-background-neutral-bold: var(--tui-color-background-inverse); --tui-color-container-background-neutral-subtle: var(--tui-color-surface-background-neutral-subtle); --tui-color-container-background-success: var(--tui-color-background-success); --tui-color-container-background-success-bold: var(--tui-color-background-success-bold); --tui-color-container-background-success-subtle: var(--tui-color-background-success-subtle); --tui-color-container-background-warning: var(--tui-color-background-warning); --tui-color-container-background-warning-bold: var(--tui-color-background-warning-bold); --tui-color-container-background-warning-subtle: var(--tui-color-background-warning-subtle); --tui-color-container-border: var(--tui-color-neutral-300); --tui-color-container-border-accent-green: var(--tui-color-border-accent-green); --tui-color-container-border-accent-green-bold: var(--tui-color-border-accent-green-bold); --tui-color-container-border-accent-green-subtle: var(--tui-color-border-accent-green-subtle); --tui-color-container-border-accent-steel: var(--tui-color-border-accent-steel); --tui-color-container-border-accent-steel-bold: var(--tui-color-border-accent-steel-bold); --tui-color-container-border-accent-steel-subtle: var(--tui-color-border-accent-steel-subtle); --tui-color-container-border-accent-teal: var(--tui-color-border-accent-teal); --tui-color-container-border-accent-teal-bold: var(--tui-color-border-accent-teal-bold); --tui-color-container-border-accent-teal-subtle: var(--tui-color-border-accent-teal-subtle); --tui-color-container-border-brand: var(--tui-color-border-brand); --tui-color-container-border-brand-bold: var(--tui-color-border-brand-bold); --tui-color-container-border-brand-subtle: var(--tui-color-border-brand-subtle); --tui-color-container-border-danger: var(--tui-color-border-danger); --tui-color-container-border-danger-bold: var(--tui-color-border-danger-bold); --tui-color-container-border-danger-subtle: var(--tui-color-border-danger-subtle); --tui-color-container-border-information: var(--tui-color-border-information); --tui-color-container-border-information-bold: var(--tui-color-border-information-bold); --tui-color-container-border-information-subtle: var(--tui-color-border-information-subtle); --tui-color-container-border-neutral: var(--tui-color-border-neutral); --tui-color-container-border-neutral-bold: var(--tui-color-border-neutral-bold); --tui-color-container-border-neutral-subtle: var(--tui-color-border-neutral-subtle); --tui-color-container-border-success: var(--tui-color-border-success); --tui-color-container-border-success-bold: var(--tui-color-border-success-bold); --tui-color-container-border-success-subtle: var(--tui-color-border-success-subtle); --tui-color-container-border-warning: var(--tui-color-border-warning); --tui-color-container-border-warning-bold: var(--tui-color-border-warning-bold); --tui-color-container-border-warning-subtle: var(--tui-color-border-warning-subtle); /* Text inside a box that holds content, such as a card. */ --tui-color-container-text: var(--tui-color-text); /* Secondary text inside a box that holds content. */ --tui-color-container-text-neutral-subtle: var(--tui-color-text-neutral-subtle); --tui-color-green-100: oklch(95.8% 0.0339 134); --tui-color-green-200: oklch(91% 0.0654 134); --tui-color-green-300: oklch(86% 0.0956 134); --tui-color-green-400: oklch(79.5% 0.1328 134); --tui-color-green-500: var(--tui-color-rexall-well-green); --tui-color-green-600: oklch(63.5% 0.1512 134); --tui-color-green-700: oklch(54.5% 0.1328 134); --tui-color-green-800: oklch(45.5% 0.1139 134); --tui-color-green-900: oklch(36.5% 0.0944 134); --tui-color-green-1000: oklch(27% 0.0731 134); --tui-color-icon: var(--tui-color-neutral-900); --tui-color-icon-brand: var(--tui-color-teal-700); --tui-color-icon-danger: var(--tui-color-red-700); --tui-color-icon-disabled: var(--tui-color-neutral-600); --tui-color-icon-information: var(--tui-color-rexall-steel-700); --tui-color-icon-inverse: var(--tui-color-white); --tui-color-icon-neutral-subtle: var(--tui-color-neutral-700); --tui-color-icon-success: var(--tui-color-green-700); --tui-color-icon-warning: var(--tui-color-yellow-700); --tui-color-input-background: var(--tui-color-white); --tui-color-input-background-disabled: var(--tui-color-neutral-100); --tui-color-input-border: var(--tui-color-neutral-600); --tui-color-link-text: var(--tui-color-teal-700); --tui-color-link-text-hovered: var(--tui-color-teal-800); --tui-color-link-text-inverse: var(--tui-color-text-inverse); --tui-color-link-text-inverse-hovered: var(--tui-color-text-inverse); --tui-color-link-text-inverse-pressed: var(--tui-color-text-inverse); --tui-color-link-text-inverse-visited: var(--tui-color-text-inverse); --tui-color-link-text-neutral: var(--tui-color-text-neutral); --tui-color-link-text-neutral-hovered: var(--tui-color-text-neutral-hovered); --tui-color-link-text-neutral-pressed: var(--tui-color-text-neutral-pressed); --tui-color-link-text-neutral-visited: var(--tui-color-text-neutral); --tui-color-link-text-pressed: var(--tui-color-teal-800); --tui-color-link-text-visited: var(--tui-color-magenta-700); --tui-color-magenta-100: oklch(95.8% 0.0241 351.2); --tui-color-magenta-200: oklch(91% 0.0541 351.2); --tui-color-magenta-300: oklch(86% 0.0816 351.2); --tui-color-magenta-400: oklch(79.5% 0.1047 351.2); --tui-color-magenta-500: oklch(71.5% 0.13 351.2); --tui-color-magenta-600: oklch(63.5% 0.153 351.2); --tui-color-magenta-700: var(--tui-color-rexall-berry-purple); --tui-color-magenta-800: oklch(45.5% 0.1676 351.2); --tui-color-magenta-900: oklch(36.5% 0.1389 351.2); --tui-color-magenta-1000: oklch(27% 0.1075 351.2); --tui-color-neutral-100: oklch(95.8% 0 0); --tui-color-neutral-200: oklch(91% 0 0); --tui-color-neutral-300: oklch(86% 0 0); --tui-color-neutral-400: oklch(79.5% 0 0); --tui-color-neutral-500: oklch(71.5% 0 0); --tui-color-neutral-600: oklch(63.5% 0 0); --tui-color-neutral-700: oklch(54.5% 0 0); --tui-color-neutral-800: oklch(45.5% 0 0); --tui-color-neutral-900: var(--tui-color-rexall-charcoal-grey); --tui-color-neutral-1000: oklch(27% 0 0); --tui-color-neutral-A100: oklch(10.78% 0 0 / 0.056); --tui-color-neutral-A200: oklch(7.66% 0 0 / 0.118); --tui-color-neutral-A300: oklch(6.76% 0 0 / 0.182); --tui-color-neutral-A400: oklch(6.59% 0 0 / 0.264); --tui-color-neutral-A500: oklch(5.18% 0 0 / 0.362); --tui-color-neutral-A600: oklch(1.98% 0 0 / 0.457); --tui-color-neutral-A700: oklch(0% 0 0 / 0.561); --tui-color-neutral-A800: oklch(3.14% 0 0 / 0.661); --tui-color-neutral-A900: oklch(4.4% 0 0 / 0.797); --tui-color-neutral-A1000: oklch(3.14% 0 0 / 0.85); --tui-color-orange-100: oklch(95.8% 0.023 48.9); --tui-color-orange-200: oklch(91% 0.0514 48.9); --tui-color-orange-300: oklch(86% 0.0834 48.9); --tui-color-orange-400: oklch(79.5% 0.1188 48.9); --tui-color-orange-500: oklch(71.5% 0.1528 48.9); --tui-color-orange-600: var(--tui-color-rexall-terracotta-orange); --tui-color-orange-700: oklch(54.5% 0.1463 48.9); --tui-color-orange-800: oklch(45.5% 0.1222 48.9); --tui-color-orange-900: oklch(36.5% 0.098 48.9); --tui-color-orange-1000: oklch(27% 0.0725 48.9); --tui-color-pink-100: oklch(95.8% 0.0216 5); --tui-color-pink-200: oklch(91% 0.0485 5); --tui-color-pink-300: oklch(86% 0.0792 5); --tui-color-pink-400: oklch(79.5% 0.1241 5); --tui-color-pink-500: oklch(71.5% 0.1644 5); --tui-color-pink-600: var(--tui-color-rexall-tulip-pink); --tui-color-pink-700: oklch(54.5% 0.1544 5); --tui-color-pink-800: oklch(45.5% 0.1324 5); --tui-color-pink-900: oklch(36.5% 0.1098 5); --tui-color-pink-1000: oklch(27% 0.085 5); --tui-color-red-100: oklch(95.8% 0.0206 23.7); --tui-color-red-200: oklch(91% 0.0462 23.7); --tui-color-red-300: oklch(86% 0.0754 23.7); --tui-color-red-400: oklch(79.5% 0.1177 23.7); --tui-color-red-500: oklch(71.5% 0.1783 23.7); --tui-color-red-600: var(--tui-color-rexall-ladybug-red); --tui-color-red-700: oklch(54.5% 0.2142 23.7); --tui-color-red-800: oklch(45.5% 0.1837 23.7); --tui-color-red-900: oklch(36.5% 0.1475 23.7); --tui-color-red-1000: oklch(27% 0.1091 23.7); /* Be Well */ --tui-color-rexall-apricot-orange: oklch(71.4% 0.1525 56.134); /* Skin Health */ --tui-color-rexall-ash: oklch(90% 0.0027 106.45); /* Rexall */ --tui-color-rexall-banana-yellow: oklch(95.33% 0.0757 95.318); /* Berry Purple — magenta anchor */ --tui-color-rexall-berry-purple: oklch(51.17% 0.1852 351.18); /* Rexall */ --tui-color-rexall-blush-pink: oklch(58.59% 0.1586 4.6101); /* Be Well promo */ --tui-color-rexall-blush-red: oklch(86.8% 0.055 21.054); /* Be Well promo */ --tui-color-rexall-burgundy-red: oklch(45.44% 0.1821 28.716); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-calming-blue-haze: oklch(80.84% 0.0387 249.54); /* Charcoal Grey — neutral anchor */ --tui-color-rexall-charcoal-grey: oklch(32.5% 0 0); /* Rexall */ --tui-color-rexall-cloud-grey: oklch(84.52% 0 0); /* Be Well promo */ --tui-color-rexall-cream-yellow: oklch(99.23% 0.0159 98.986); /* Be Well promo */ --tui-color-rexall-daisy-yellow: oklch(92.84% 0.1204 106.48); /* Rexall AODA */ --tui-color-rexall-deep-ocean: oklch(42.34% 0.0723 194.8); /* Be Well promo */ --tui-color-rexall-dusty-red: oklch(50.13% 0.1755 23.713); /* Be Well */ --tui-color-rexall-evergreen: oklch(51.19% 0.0835 138.17); /* Rexall */ --tui-color-rexall-fog-grey: oklch(97.91% 0 0); /* Be Well */ --tui-color-rexall-forest-green: oklch(45.31% 0.073 146.02); /* Be Well */ --tui-color-rexall-garden-green: oklch(54.77% 0.0953 138.22); /* Be Well */ --tui-color-rexall-granite-grey: oklch(53.49% 0.005 17.313); /* Rexall */ --tui-color-rexall-grapefruit: oklch(95.01% 0.0848 98.329); /* Rexall */ --tui-color-rexall-grass-green: oklch(78.93% 0.1268 133.59); /* Be Well */ --tui-color-rexall-grey-blue: oklch(59.99% 0.0929 185.62); /* Be Well promo */ --tui-color-rexall-highlighter-yellow: oklch(92.14% 0.1824 105.41); /* Digestive */ --tui-color-rexall-immunity-orange: oklch(71.08% 0.1395 51.737); /* Ladybug Red — red anchor */ --tui-color-rexall-ladybug-red: oklch(60.41% 0.2338 23.742); /* Rexall AODA */ --tui-color-rexall-lakeside-blue: oklch(52.74% 0.0872 187.63); /* Be Well */ --tui-color-rexall-lavender-purple: oklch(89.47% 0.0375 342.55); /* Rexall */ --tui-color-rexall-lemon-yellow: oklch(88.28% 0.1811 94.46); /* Rexall */ --tui-color-rexall-light-blush-pink: oklch(85.56% 0.0673 10.506); /* Rexall */ --tui-color-rexall-light-drizzle: oklch(91.04% 0.0336 191.96); /* Be Well promo */ --tui-color-rexall-light-red: oklch(94.46% 0.0142 12.025); /* Be Well */ --tui-color-rexall-lime-green: oklch(75.39% 0.152 134.81); /* Be Well promo */ --tui-color-rexall-lipstick-red: oklch(62.76% 0.2141 23.004); /* Be Well */ --tui-color-rexall-melon-orange: oklch(85.06% 0.0788 62.059); /* Rexall */ --tui-color-rexall-mist-blue: oklch(95.8% 0.0169 192.36); /* Be Well */ --tui-color-rexall-moss-green: oklch(64.94% 0.1505 133.89); /* Be Well */ --tui-color-rexall-night-grey: oklch(42.18% 0.0031 48.66); /* Be Well */ --tui-color-rexall-pansy-purple: oklch(79.17% 0.0759 344.13); /* Be Well */ --tui-color-rexall-peachy-orange: oklch(92.38% 0.0385 63.533); /* Be Well promo */ --tui-color-rexall-pinky-red: oklch(96.91% 0.0151 17.418); /* Be Well */ --tui-color-rexall-plum-purple: oklch(59.35% 0.1561 347.67); /* Poolside Blue — teal anchor */ --tui-color-rexall-poolside-blue: oklch(68.76% 0.1147 188.23); /* Rexall */ --tui-color-rexall-rain-blue: oklch(87.81% 0.0553 193.35); /* Be Well promo */ --tui-color-rexall-rosy-red: oklch(69.56% 0.183 23.103); /* Rexall */ --tui-color-rexall-ruby-red: oklch(57.73% 0.2098 23.23); /* Rexall */ --tui-color-rexall-sage-green: oklch(88.81% 0.0662 132.17); /* Be Well */ --tui-color-rexall-seaside-blue: oklch(49.86% 0.0891 182.42); /* Rexall AODA */ --tui-color-rexall-shoreline-blue: oklch(63.95% 0.1102 188.54); /* Be Well */ --tui-color-rexall-silver-grey: oklch(66.37% 0.0049 0.0752); /* Be Well */ --tui-color-rexall-sky-blue: oklch(84.85% 0.0638 193.53); /* Rexall */ --tui-color-rexall-slate-grey: oklch(53.82% 0 0); --tui-color-rexall-steel: oklch(52.12% 0.0301 259.03); --tui-color-rexall-steel-100: oklch(95.8% 0.0077 249.5); --tui-color-rexall-steel-200: oklch(91% 0.0173 249.5); --tui-color-rexall-steel-300: oklch(86% 0.0277 249.5); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-steel-400: var(--tui-color-rexall-calming-blue-haze); --tui-color-rexall-steel-500: oklch(71.5% 0.0348 249.5); --tui-color-rexall-steel-600: oklch(63.5% 0.0315 249.5); --tui-color-rexall-steel-700: oklch(54.5% 0.0276 249.5); --tui-color-rexall-steel-800: oklch(45.5% 0.0237 249.5); --tui-color-rexall-steel-900: oklch(36.5% 0.0196 249.5); --tui-color-rexall-steel-1000: oklch(27% 0.0152 249.5); /* Sunshine Yellow — yellow anchor */ --tui-color-rexall-sunshine-yellow: oklch(86.72% 0.1773 90.85); /* Be Well promo */ --tui-color-rexall-taupe-red: oklch(75.68% 0.0781 13.998); /* Rexall */ --tui-color-rexall-tea-green: oklch(95.59% 0.0563 131.52); /* Be Well */ --tui-color-rexall-teal-blue: oklch(68.53% 0.0897 185.9); /* Terracotta Orange — orange anchor */ --tui-color-rexall-terracotta-orange: oklch(65.65% 0.1764 48.889); /* Tulip Pink — pink anchor */ --tui-color-rexall-tulip-pink: oklch(67.04% 0.1842 5.0399); /* Be Well promo */ --tui-color-rexall-vanilla-yellow: oklch(95.6% 0.072 105.12); /* Be Well */ --tui-color-rexall-venice-blue: oklch(40.54% 0.0851 236.88); /* Be Well */ --tui-color-rexall-washed-blue: oklch(78.7% 0.0619 185.5); /* Well Green — green anchor */ --tui-color-rexall-well-green: oklch(72.73% 0.1698 134.03); /* Digestive */ --tui-color-rexall-well-green-deep: oklch(50.28% 0.1219 142.99); --tui-color-surface-background: var(--tui-color-white); --tui-color-surface-background-brand: var(--tui-color-green-400); /* A page or section tinted with the brand. Plain surface unless a brand sets a tint. */ --tui-color-surface-background-brand-subtle: var(--tui-color-surface-background); --tui-color-surface-background-neutral-subtle: var(--tui-color-neutral-100); --tui-color-tag-background-accent-green: var(--tui-color-green-100); --tui-color-tag-background-accent-magenta: var(--tui-color-magenta-100); --tui-color-tag-background-accent-neutral: var(--tui-color-neutral-100); --tui-color-tag-background-accent-orange: var(--tui-color-orange-100); --tui-color-tag-background-accent-pink: var(--tui-color-pink-100); --tui-color-tag-background-accent-steel: var(--tui-color-rexall-steel-100); --tui-color-tag-background-accent-teal: var(--tui-color-teal-100); --tui-color-tag-background-accent-yellow: var(--tui-color-yellow-100); --tui-color-tag-text-accent-green: var(--tui-color-green-800); --tui-color-tag-text-accent-magenta: var(--tui-color-magenta-800); --tui-color-tag-text-accent-neutral: var(--tui-color-neutral-800); --tui-color-tag-text-accent-orange: var(--tui-color-orange-800); --tui-color-tag-text-accent-pink: var(--tui-color-pink-800); --tui-color-tag-text-accent-steel: var(--tui-color-rexall-steel-800); --tui-color-tag-text-accent-teal: var(--tui-color-teal-800); --tui-color-tag-text-accent-yellow: var(--tui-color-yellow-800); --tui-color-teal-100: oklch(95.8% 0.0229 188.2); --tui-color-teal-200: oklch(91% 0.0422 188.2); --tui-color-teal-300: oklch(86% 0.0602 188.2); --tui-color-teal-400: oklch(79.5% 0.0818 188.2); /* Poolside Blue — teal anchor */ --tui-color-teal-500: var(--tui-color-rexall-poolside-blue); --tui-color-teal-600: oklch(63.5% 0.1071 188.2); --tui-color-teal-700: oklch(54.5% 0.0941 188.2); --tui-color-teal-800: oklch(45.5% 0.079 188.2); --tui-color-teal-900: oklch(36.5% 0.0634 188.2); --tui-color-teal-1000: oklch(27% 0.0469 188.2); --tui-color-text: var(--tui-color-neutral-900); --tui-color-text-brand: var(--tui-color-teal-800); --tui-color-text-brand-hovered: var(--tui-color-teal-900); --tui-color-text-brand-pressed: var(--tui-color-teal-900); --tui-color-text-danger: var(--tui-color-red-700); --tui-color-text-danger-hovered: var(--tui-color-red-800); --tui-color-text-danger-pressed: var(--tui-color-red-800); --tui-color-text-disabled: var(--tui-color-neutral-600); --tui-color-text-information: var(--tui-color-rexall-steel-700); --tui-color-text-inverse: var(--tui-color-white); --tui-color-text-neutral: var(--tui-color-neutral-900); --tui-color-text-neutral-hovered: var(--tui-color-neutral-800); --tui-color-text-neutral-pressed: var(--tui-color-neutral-1000); --tui-color-text-neutral-subtle: var(--tui-color-neutral-800); --tui-color-text-success: var(--tui-color-green-700); --tui-color-text-warning: var(--tui-color-yellow-700); --tui-color-transparent: oklch(0% 0 0 / 0); --tui-color-white: oklch(100% 0 0); --tui-color-yellow-100: oklch(95.8% 0.0354 90.8); --tui-color-yellow-200: oklch(91% 0.1029 90.8); /* Sunshine Yellow — yellow anchor */ --tui-color-yellow-300: var(--tui-color-rexall-sunshine-yellow); --tui-color-yellow-400: oklch(79.5% 0.1624 88.3); --tui-color-yellow-500: oklch(71.5% 0.1463 85.7); --tui-color-yellow-600: oklch(63.5% 0.1305 83.1); --tui-color-yellow-700: oklch(54.5% 0.1126 80.6); --tui-color-yellow-800: oklch(45.5% 0.0948 78); --tui-color-yellow-900: oklch(36.5% 0.0768 75.4); --tui-color-yellow-1000: oklch(27% 0.0575 72.8); --tui-elevation-shadow-overflow: 0px 0px 8px 0px oklch(27% 0 0 / 0.16), 0px 0px 1px 0px oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-perimeter: oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-spread: oklch(27% 0 0 / 0.16); --tui-elevation-shadow-overlay: 0px 8px 12px 0px oklch(27% 0 0 / 0.15), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-shadow-raised: 0px 1px 1px 0px oklch(27% 0 0 / 0.25), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-surface: var(--tui-color-transparent); --tui-elevation-surface-container: var(--tui-color-neutral-A100); --tui-elevation-surface-container-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-container-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay: var(--tui-color-transparent); --tui-elevation-surface-overlay-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-raised: var(--tui-color-transparent); --tui-elevation-surface-raised-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-raised-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-sunken: var(--tui-color-neutral-A100); --tui-font-family-mono: "Source Code Pro", ui-monospace, "Consolas", "Menlo", monospace; --tui-font-family-sans: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --tui-font-leading-050: 16px; --tui-font-leading-075: 20px; --tui-font-leading-100: 24px; --tui-font-leading-200: 28px; --tui-font-leading-300: 28px; --tui-font-leading-400: 32px; --tui-font-leading-500: 40px; --tui-font-leading-600: 48px; --tui-font-leading-700: 56px; --tui-font-leading-800: 68px; --tui-font-leading-900: 96px; --tui-font-leading-1000: 116px; --tui-font-size-050: 12px; --tui-font-size-075: 14px; --tui-font-size-100: 16px; --tui-font-size-200: 20px; --tui-font-size-300: 24px; --tui-font-size-400: 28px; --tui-font-size-500: 32px; --tui-font-size-600: 40px; --tui-font-size-700: 48px; --tui-font-size-800: 56px; --tui-font-size-900: 80px; --tui-font-size-1000: 96px; --tui-font-tracking-default: 0rem; --tui-font-weight-bold: 700; --tui-font-weight-medium: 500; --tui-font-weight-regular: 400; --tui-font-weight-semibold: 600; --tui-layer-0: 0; --tui-layer-10: 10; --tui-layer-20: 20; --tui-layer-30: 30; --tui-layer-40: 40; --tui-layer-50: 50; --tui-layer-60: 60; --tui-layer-base: var(--tui-layer-0); --tui-layer-modal: var(--tui-layer-50); --tui-layer-navigation: var(--tui-layer-10); --tui-layer-notification: var(--tui-layer-60); --tui-layer-overlay: var(--tui-layer-40); --tui-layer-popover: var(--tui-layer-30); --tui-layer-sticky: var(--tui-layer-20); --tui-motion-action-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-action-pressed: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-blanket-enter: var(--tui-motion-duration-long) 0ms var(--tui-motion-easing-inout-bold); --tui-motion-blanket-exit: var(--tui-motion-duration-medium) 0ms var(--tui-motion-easing-in-practical); --tui-motion-control-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-selected: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-toggle: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-curve-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6); --tui-motion-curve-inout-bold: cubic-bezier(0.4, 0, 0, 1); --tui-motion-curve-out-bold: cubic-bezier(0, 0.4, 0, 1); --tui-motion-curve-out-practical: cubic-bezier(0.4, 1, 0.6, 1); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-curve-spring: cubic-bezier(0.363, 1.102, 0.089, 1.043); --tui-motion-duration-0: 0ms; --tui-motion-duration-050: 50ms; --tui-motion-duration-100: 100ms; --tui-motion-duration-150: 150ms; --tui-motion-duration-200: 200ms; --tui-motion-duration-250: 250ms; --tui-motion-duration-400: 400ms; --tui-motion-duration-600: 600ms; --tui-motion-duration-instant: var(--tui-motion-duration-0); --tui-motion-duration-long: var(--tui-motion-duration-250); --tui-motion-duration-medium: var(--tui-motion-duration-200); --tui-motion-duration-short: var(--tui-motion-duration-150); --tui-motion-duration-xlong: var(--tui-motion-duration-400); --tui-motion-duration-xshort: var(--tui-motion-duration-100); --tui-motion-duration-xxlong: var(--tui-motion-duration-600); --tui-motion-duration-xxshort: var(--tui-motion-duration-050); --tui-motion-easing-in-practical: var(--tui-motion-curve-in-practical); --tui-motion-easing-inout-bold: var(--tui-motion-curve-inout-bold); --tui-motion-easing-out-bold: var(--tui-motion-curve-out-bold); --tui-motion-easing-out-practical: var(--tui-motion-curve-out-practical); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-easing-spring: var(--tui-motion-curve-spring); /* Corners of a small action (Button sm). */ --tui-shape-action-round: var(--tui-size-radius-lg); /* Corners of a medium action (Button md). */ --tui-shape-action-rounder: var(--tui-size-radius-xl); /* Corners of a large action (Button lg). The roundest action, not always a pill. */ --tui-shape-action-roundest: var(--tui-size-radius-2xl); /* Corners of a box that holds content, such as a card. Follows the surface corners unless a brand sets its own. */ --tui-shape-container-rounder: var(--tui-shape-surface-rounder); --tui-shape-rounder: var(--tui-size-radius-lg); --tui-shape-surface-rounder: var(--tui-size-radius-2xl); --tui-size-border-hairline: var(--tui-size-border-sm); --tui-size-border-md: 2px; --tui-size-border-narrow: var(--tui-size-border-md); --tui-size-border-sm: 1px; --tui-size-icon-lg: var(--tui-space-300); --tui-size-icon-md: var(--tui-space-250); --tui-size-icon-sm: var(--tui-space-200); --tui-size-icon-xs: var(--tui-space-100); --tui-size-radius-2xl: 16px; --tui-size-radius-3xl: 20px; --tui-size-radius-4xl: 24px; --tui-size-radius-full: 9999px; --tui-size-radius-lg: 8px; --tui-size-radius-md: 6px; --tui-size-radius-none: 0px; --tui-size-radius-sm: 4px; --tui-size-radius-xl: 12px; --tui-size-radius-xs: 2px; --tui-space-0: 0px; --tui-space-025: 2px; --tui-space-050: 4px; --tui-space-075: 6px; --tui-space-100: 8px; --tui-space-125: 10px; --tui-space-150: 12px; --tui-space-200: 16px; --tui-space-250: 20px; --tui-space-300: 24px; --tui-space-400: 32px; --tui-space-500: 40px; --tui-space-600: 48px; --tui-space-700: 56px; --tui-space-800: 64px; --tui-space-900: 72px; --tui-space-1000: 80px; --tui-space-1100: 88px; --tui-space-1200: 96px; --tui-space-1300: 104px; --tui-space-1400: 112px; --tui-space-1500: 120px; --tui-space-inline: var(--tui-space-100); --tui-space-inline-dense: var(--tui-space-050); --tui-space-inline-loose: var(--tui-space-150); --tui-space-inline-looser: var(--tui-space-250); --tui-space-inset: var(--tui-space-200); --tui-space-inset-dense: var(--tui-space-100); --tui-space-inset-loose: var(--tui-space-250); --tui-space-inset-looser: var(--tui-space-400); --tui-space-inset-squish: 12px 24px; --tui-space-inset-squish-dense: 8px 24px; --tui-space-inset-squish-loose: 16px 24px; --tui-space-inset-stretch: 8px 16px; --tui-space-inset-stretch-loosest: 16px 16px; --tui-space-negative-025: -2px; --tui-space-negative-050: -4px; --tui-space-negative-075: -6px; --tui-space-negative-100: -8px; --tui-space-negative-150: -12px; --tui-space-negative-200: -16px; --tui-space-negative-250: -20px; --tui-space-negative-300: -24px; --tui-space-negative-400: -32px; --tui-space-stack: var(--tui-space-200); --tui-space-stack-dense: var(--tui-space-100); --tui-space-stack-denser: var(--tui-space-050); --tui-space-stack-loose: var(--tui-space-300); --tui-space-stack-looser: var(--tui-space-400); --tui-space-stack-loosest: var(--tui-space-600); --tui-typography-action-label-lg: var(--tui-typography-action-label-lg-font-weight) var(--tui-typography-action-label-lg-font-size)/var(--tui-typography-action-label-lg-line-height) var(--tui-typography-action-label-lg-font-family); --tui-typography-action-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-action-label-lg-font-size: var(--tui-font-size-100); --tui-typography-action-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-lg-letter-spacing: 0px; --tui-typography-action-label-lg-line-height: 1.5; --tui-typography-action-label-md: var(--tui-typography-action-label-md-font-weight) var(--tui-typography-action-label-md-font-size)/var(--tui-typography-action-label-md-line-height) var(--tui-typography-action-label-md-font-family); --tui-typography-action-label-md-font-family: var(--tui-font-family-sans); --tui-typography-action-label-md-font-size: var(--tui-font-size-075); --tui-typography-action-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-md-letter-spacing: 0px; --tui-typography-action-label-md-line-height: 1.4286; --tui-typography-action-label-xl: var(--tui-typography-action-label-xl-font-weight) var(--tui-typography-action-label-xl-font-size)/var(--tui-typography-action-label-xl-line-height) var(--tui-typography-action-label-xl-font-family); --tui-typography-action-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-action-label-xl-font-size: var(--tui-font-size-200); --tui-typography-action-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-xl-letter-spacing: 0px; --tui-typography-action-label-xl-line-height: 1.4; --tui-typography-body-lg: var(--tui-typography-body-lg-font-weight) var(--tui-typography-body-lg-font-size)/var(--tui-typography-body-lg-line-height) var(--tui-typography-body-lg-font-family); --tui-typography-body-lg-font-family: var(--tui-font-family-sans); --tui-typography-body-lg-font-size: var(--tui-font-size-200); --tui-typography-body-lg-font-weight: var(--tui-font-weight-regular); --tui-typography-body-lg-letter-spacing: 0px; --tui-typography-body-lg-line-height: 1.4; --tui-typography-body-md: var(--tui-typography-body-md-font-weight) var(--tui-typography-body-md-font-size)/var(--tui-typography-body-md-line-height) var(--tui-typography-body-md-font-family); --tui-typography-body-md-font-family: var(--tui-font-family-sans); --tui-typography-body-md-font-size: var(--tui-font-size-100); --tui-typography-body-md-font-weight: var(--tui-font-weight-regular); --tui-typography-body-md-letter-spacing: 0px; --tui-typography-body-md-line-height: 1.5; --tui-typography-body-sm: var(--tui-typography-body-sm-font-weight) var(--tui-typography-body-sm-font-size)/var(--tui-typography-body-sm-line-height) var(--tui-typography-body-sm-font-family); --tui-typography-body-sm-font-family: var(--tui-font-family-sans); --tui-typography-body-sm-font-size: var(--tui-font-size-075); --tui-typography-body-sm-font-weight: var(--tui-font-weight-regular); --tui-typography-body-sm-letter-spacing: 0px; --tui-typography-body-sm-line-height: 1.4286; --tui-typography-body-xs: var(--tui-typography-body-xs-font-weight) var(--tui-typography-body-xs-font-size)/var(--tui-typography-body-xs-line-height) var(--tui-typography-body-xs-font-family); --tui-typography-body-xs-font-family: var(--tui-font-family-sans); --tui-typography-body-xs-font-size: var(--tui-font-size-050); --tui-typography-body-xs-font-weight: var(--tui-font-weight-regular); --tui-typography-body-xs-letter-spacing: 0px; --tui-typography-body-xs-line-height: 1.3333; --tui-typography-code-md: var(--tui-typography-code-md-font-weight) var(--tui-typography-code-md-font-size)/var(--tui-typography-code-md-line-height) var(--tui-typography-code-md-font-family); --tui-typography-code-md-font-family: var(--tui-font-family-mono); --tui-typography-code-md-font-size: var(--tui-font-size-075); --tui-typography-code-md-font-weight: var(--tui-font-weight-regular); --tui-typography-code-md-letter-spacing: 0px; --tui-typography-code-md-line-height: 1.4286; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md: var(--tui-typography-container-heading-md-font-weight) var(--tui-typography-container-heading-md-font-size)/var(--tui-typography-container-heading-md-line-height) var(--tui-typography-container-heading-md-font-family); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-family: var(--tui-font-family-sans); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-size: var(--tui-font-size-200); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-weight: var(--tui-font-weight-bold); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-letter-spacing: 0px; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-line-height: 1.4; --tui-typography-display-lg: var(--tui-typography-display-lg-font-weight) var(--tui-typography-display-lg-font-size)/var(--tui-typography-display-lg-line-height) var(--tui-typography-display-lg-font-family); --tui-typography-display-lg-font-family: var(--tui-font-family-sans); --tui-typography-display-lg-font-size: var(--tui-font-size-900); --tui-typography-display-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-display-lg-letter-spacing: -0.8px; --tui-typography-display-lg-line-height: 1.2; --tui-typography-display-md: var(--tui-typography-display-md-font-weight) var(--tui-typography-display-md-font-size)/var(--tui-typography-display-md-line-height) var(--tui-typography-display-md-font-family); --tui-typography-display-md-font-family: var(--tui-font-family-sans); --tui-typography-display-md-font-size: var(--tui-font-size-800); --tui-typography-display-md-font-weight: var(--tui-font-weight-bold); --tui-typography-display-md-letter-spacing: -0.56px; --tui-typography-display-md-line-height: 1.2143; --tui-typography-display-xl: var(--tui-typography-display-xl-font-weight) var(--tui-typography-display-xl-font-size)/var(--tui-typography-display-xl-line-height) var(--tui-typography-display-xl-font-family); --tui-typography-display-xl-font-family: var(--tui-font-family-sans); --tui-typography-display-xl-font-size: var(--tui-font-size-1000); --tui-typography-display-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-display-xl-letter-spacing: -0.96px; --tui-typography-display-xl-line-height: 1.2083; --tui-typography-heading-lg: var(--tui-typography-heading-lg-font-weight) var(--tui-typography-heading-lg-font-size)/var(--tui-typography-heading-lg-line-height) var(--tui-typography-heading-lg-font-family); --tui-typography-heading-lg-font-family: var(--tui-font-family-sans); --tui-typography-heading-lg-font-size: var(--tui-font-size-400); --tui-typography-heading-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-lg-letter-spacing: -0.28px; --tui-typography-heading-lg-line-height: 1.1429; --tui-typography-heading-md: var(--tui-typography-heading-md-font-weight) var(--tui-typography-heading-md-font-size)/var(--tui-typography-heading-md-line-height) var(--tui-typography-heading-md-font-family); --tui-typography-heading-md-font-family: var(--tui-font-family-sans); --tui-typography-heading-md-font-size: var(--tui-font-size-300); --tui-typography-heading-md-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-md-letter-spacing: 0px; --tui-typography-heading-md-line-height: 1.1667; --tui-typography-heading-sm: var(--tui-typography-heading-sm-font-weight) var(--tui-typography-heading-sm-font-size)/var(--tui-typography-heading-sm-line-height) var(--tui-typography-heading-sm-font-family); --tui-typography-heading-sm-font-family: var(--tui-font-family-sans); --tui-typography-heading-sm-font-size: var(--tui-font-size-200); --tui-typography-heading-sm-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-sm-letter-spacing: 0px; --tui-typography-heading-sm-line-height: 1.4; --tui-typography-heading-xl: var(--tui-typography-heading-xl-font-weight) var(--tui-typography-heading-xl-font-size)/var(--tui-typography-heading-xl-line-height) var(--tui-typography-heading-xl-font-family); --tui-typography-heading-xl-font-family: var(--tui-font-family-sans); --tui-typography-heading-xl-font-size: var(--tui-font-size-500); --tui-typography-heading-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-xl-letter-spacing: -0.32px; --tui-typography-heading-xl-line-height: 1.25; --tui-typography-label-lg: var(--tui-typography-label-lg-font-weight) var(--tui-typography-label-lg-font-size)/var(--tui-typography-label-lg-line-height) var(--tui-typography-label-lg-font-family); --tui-typography-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-label-lg-font-size: var(--tui-font-size-100); --tui-typography-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-lg-letter-spacing: 0px; --tui-typography-label-lg-line-height: 1.5; --tui-typography-label-md: var(--tui-typography-label-md-font-weight) var(--tui-typography-label-md-font-size)/var(--tui-typography-label-md-line-height) var(--tui-typography-label-md-font-family); --tui-typography-label-md-font-family: var(--tui-font-family-sans); --tui-typography-label-md-font-size: var(--tui-font-size-075); --tui-typography-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-md-letter-spacing: 0px; --tui-typography-label-md-line-height: 1.4286; --tui-typography-label-xl: var(--tui-typography-label-xl-font-weight) var(--tui-typography-label-xl-font-size)/var(--tui-typography-label-xl-line-height) var(--tui-typography-label-xl-font-family); --tui-typography-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-label-xl-font-size: var(--tui-font-size-200); --tui-typography-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-xl-letter-spacing: 0px; --tui-typography-label-xl-line-height: 1.4; } } @layer tokens { :root[data-sub-theme="beauty"] { --tui-color-background-accent-green: var(--tui-color-green-500); --tui-color-background-accent-green-bold: var(--tui-color-green-700); --tui-color-background-accent-green-subtle: var(--tui-color-green-500); --tui-color-background-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-background-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-background-accent-steel-subtle: var(--tui-color-rexall-steel-500); --tui-color-background-accent-teal: var(--tui-color-teal-500); --tui-color-background-accent-teal-bold: var(--tui-color-teal-700); --tui-color-background-accent-teal-subtle: var(--tui-color-teal-500); --tui-color-background-brand: var(--tui-color-teal-500); --tui-color-background-brand-bold: var(--tui-color-teal-700); --tui-color-background-brand-bold-hovered: var(--tui-color-teal-800); --tui-color-background-brand-bold-pressed: var(--tui-color-teal-900); --tui-color-background-brand-subtle: var(--tui-color-teal-100); --tui-color-background-brand-subtle-hovered: var(--tui-color-teal-200); --tui-color-background-brand-subtle-pressed: var(--tui-color-teal-300); --tui-color-background-danger: var(--tui-color-red-700); --tui-color-background-danger-bold: var(--tui-color-red-700); --tui-color-background-danger-hovered: var(--tui-color-red-800); --tui-color-background-danger-pressed: var(--tui-color-red-900); --tui-color-background-danger-subtle: var(--tui-color-red-100); --tui-color-background-danger-subtle-hovered: var(--tui-color-red-200); --tui-color-background-danger-subtle-pressed: var(--tui-color-red-300); --tui-color-background-disabled: var(--tui-color-neutral-100); --tui-color-background-hovered: var(--tui-color-neutral-100); --tui-color-background-information: var(--tui-color-rexall-steel-500); --tui-color-background-information-bold: var(--tui-color-rexall-steel-700); --tui-color-background-information-subtle: var(--tui-color-rexall-steel-100); --tui-color-background-inverse: var(--tui-color-neutral-900); --tui-color-background-inverse-hovered: var(--tui-color-neutral-1000); --tui-color-background-inverse-pressed: var(--tui-color-neutral-800); --tui-color-background-neutral: var(--tui-color-neutral-400); --tui-color-background-neutral-bold: var(--tui-color-neutral-700); --tui-color-background-neutral-hovered: var(--tui-color-neutral-300); --tui-color-background-neutral-pressed: var(--tui-color-neutral-500); --tui-color-background-neutral-subtle: var(--tui-color-neutral-200); --tui-color-background-neutral-subtle-hovered: var(--tui-color-neutral-100); --tui-color-background-neutral-subtle-pressed: var(--tui-color-neutral-300); --tui-color-background-pressed: var(--tui-color-neutral-200); --tui-color-background-selected: var(--tui-color-teal-100); --tui-color-background-success: var(--tui-color-green-500); --tui-color-background-success-bold: var(--tui-color-green-700); --tui-color-background-success-subtle: var(--tui-color-green-100); --tui-color-background-warning: var(--tui-color-yellow-300); --tui-color-background-warning-bold: var(--tui-color-yellow-300); --tui-color-background-warning-subtle: var(--tui-color-yellow-100); --tui-color-black: oklch(0% 0 0); --tui-color-blanket-background: var(--tui-color-neutral-900); --tui-color-border: var(--tui-color-neutral-300); --tui-color-border-accent-green: var(--tui-color-green-500); --tui-color-border-accent-green-bold: var(--tui-color-green-700); --tui-color-border-accent-green-subtle: var(--tui-color-green-300); --tui-color-border-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-border-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-border-accent-steel-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-accent-teal: var(--tui-color-teal-500); --tui-color-border-accent-teal-bold: var(--tui-color-teal-700); --tui-color-border-accent-teal-subtle: var(--tui-color-teal-300); --tui-color-border-brand: var(--tui-color-teal-700); --tui-color-border-brand-bold: var(--tui-color-teal-700); --tui-color-border-brand-hovered: var(--tui-color-teal-800); --tui-color-border-brand-pressed: var(--tui-color-teal-900); --tui-color-border-brand-subtle: var(--tui-color-teal-300); --tui-color-border-danger: var(--tui-color-red-600); --tui-color-border-danger-bold: var(--tui-color-red-700); --tui-color-border-danger-hovered: var(--tui-color-red-700); --tui-color-border-danger-pressed: var(--tui-color-red-800); --tui-color-border-danger-subtle: var(--tui-color-red-300); --tui-color-border-disabled: var(--tui-color-neutral-200); --tui-color-border-focus: var(--tui-color-neutral-1000); --tui-color-border-information: var(--tui-color-rexall-steel-600); --tui-color-border-information-bold: var(--tui-color-rexall-steel-700); --tui-color-border-information-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-inverse-focus: var(--tui-color-white); --tui-color-border-neutral: var(--tui-color-neutral-300); --tui-color-border-neutral-bold: var(--tui-color-neutral-600); --tui-color-border-neutral-bold-hovered: var(--tui-color-neutral-700); --tui-color-border-neutral-bold-pressed: var(--tui-color-neutral-800); --tui-color-border-neutral-hovered: var(--tui-color-neutral-200); --tui-color-border-neutral-pressed: var(--tui-color-neutral-400); --tui-color-border-neutral-subtle: var(--tui-color-neutral-300); --tui-color-border-neutral-subtlest: var(--tui-color-neutral-200); --tui-color-border-selected: var(--tui-color-teal-700); --tui-color-border-success: var(--tui-color-green-700); --tui-color-border-success-bold: var(--tui-color-green-700); --tui-color-border-success-subtle: var(--tui-color-green-300); --tui-color-border-warning: var(--tui-color-yellow-600); --tui-color-border-warning-bold: var(--tui-color-yellow-700); --tui-color-border-warning-subtle: var(--tui-color-yellow-300); --tui-color-container-background: var(--tui-color-white); --tui-color-container-background-accent-green: var(--tui-color-background-accent-green); --tui-color-container-background-accent-green-bold: var(--tui-color-background-accent-green-bold); --tui-color-container-background-accent-green-subtle: var(--tui-color-background-accent-green-subtle); --tui-color-container-background-accent-steel: var(--tui-color-background-accent-steel); --tui-color-container-background-accent-steel-bold: var(--tui-color-background-accent-steel-bold); --tui-color-container-background-accent-steel-subtle: var(--tui-color-background-accent-steel-subtle); --tui-color-container-background-accent-teal: var(--tui-color-background-accent-teal); --tui-color-container-background-accent-teal-bold: var(--tui-color-background-accent-teal-bold); --tui-color-container-background-accent-teal-subtle: var(--tui-color-background-accent-teal-subtle); --tui-color-container-background-brand: var(--tui-color-background-brand); --tui-color-container-background-brand-bold: var(--tui-color-background-brand-bold); --tui-color-container-background-brand-subtle: var(--tui-color-background-brand-subtle); --tui-color-container-background-danger: var(--tui-color-background-danger); --tui-color-container-background-danger-bold: var(--tui-color-background-danger-bold); --tui-color-container-background-danger-subtle: var(--tui-color-background-danger-subtle); --tui-color-container-background-information: var(--tui-color-background-information); --tui-color-container-background-information-bold: var(--tui-color-background-information-bold); --tui-color-container-background-information-subtle: var(--tui-color-background-information-subtle); --tui-color-container-background-neutral: var(--tui-color-background-neutral); --tui-color-container-background-neutral-bold: var(--tui-color-background-inverse); --tui-color-container-background-neutral-subtle: var(--tui-color-surface-background-neutral-subtle); --tui-color-container-background-success: var(--tui-color-background-success); --tui-color-container-background-success-bold: var(--tui-color-background-success-bold); --tui-color-container-background-success-subtle: var(--tui-color-background-success-subtle); --tui-color-container-background-warning: var(--tui-color-background-warning); --tui-color-container-background-warning-bold: var(--tui-color-background-warning-bold); --tui-color-container-background-warning-subtle: var(--tui-color-background-warning-subtle); --tui-color-container-border: var(--tui-color-neutral-300); --tui-color-container-border-accent-green: var(--tui-color-border-accent-green); --tui-color-container-border-accent-green-bold: var(--tui-color-border-accent-green-bold); --tui-color-container-border-accent-green-subtle: var(--tui-color-border-accent-green-subtle); --tui-color-container-border-accent-steel: var(--tui-color-border-accent-steel); --tui-color-container-border-accent-steel-bold: var(--tui-color-border-accent-steel-bold); --tui-color-container-border-accent-steel-subtle: var(--tui-color-border-accent-steel-subtle); --tui-color-container-border-accent-teal: var(--tui-color-border-accent-teal); --tui-color-container-border-accent-teal-bold: var(--tui-color-border-accent-teal-bold); --tui-color-container-border-accent-teal-subtle: var(--tui-color-border-accent-teal-subtle); --tui-color-container-border-brand: var(--tui-color-border-brand); --tui-color-container-border-brand-bold: var(--tui-color-border-brand-bold); --tui-color-container-border-brand-subtle: var(--tui-color-border-brand-subtle); --tui-color-container-border-danger: var(--tui-color-border-danger); --tui-color-container-border-danger-bold: var(--tui-color-border-danger-bold); --tui-color-container-border-danger-subtle: var(--tui-color-border-danger-subtle); --tui-color-container-border-information: var(--tui-color-border-information); --tui-color-container-border-information-bold: var(--tui-color-border-information-bold); --tui-color-container-border-information-subtle: var(--tui-color-border-information-subtle); --tui-color-container-border-neutral: var(--tui-color-border-neutral); --tui-color-container-border-neutral-bold: var(--tui-color-border-neutral-bold); --tui-color-container-border-neutral-subtle: var(--tui-color-border-neutral-subtle); --tui-color-container-border-success: var(--tui-color-border-success); --tui-color-container-border-success-bold: var(--tui-color-border-success-bold); --tui-color-container-border-success-subtle: var(--tui-color-border-success-subtle); --tui-color-container-border-warning: var(--tui-color-border-warning); --tui-color-container-border-warning-bold: var(--tui-color-border-warning-bold); --tui-color-container-border-warning-subtle: var(--tui-color-border-warning-subtle); /* Text inside a box that holds content, such as a card. */ --tui-color-container-text: var(--tui-color-text); /* Secondary text inside a box that holds content. */ --tui-color-container-text-neutral-subtle: var(--tui-color-text-neutral-subtle); --tui-color-green-100: oklch(95.8% 0.0339 134); --tui-color-green-200: oklch(91% 0.0654 134); --tui-color-green-300: oklch(86% 0.0956 134); --tui-color-green-400: oklch(79.5% 0.1328 134); --tui-color-green-500: var(--tui-color-rexall-well-green); --tui-color-green-600: oklch(63.5% 0.1512 134); --tui-color-green-700: oklch(54.5% 0.1328 134); --tui-color-green-800: oklch(45.5% 0.1139 134); --tui-color-green-900: oklch(36.5% 0.0944 134); --tui-color-green-1000: oklch(27% 0.0731 134); --tui-color-icon: var(--tui-color-neutral-900); --tui-color-icon-brand: var(--tui-color-teal-700); --tui-color-icon-danger: var(--tui-color-red-700); --tui-color-icon-disabled: var(--tui-color-neutral-600); --tui-color-icon-information: var(--tui-color-rexall-steel-700); --tui-color-icon-inverse: var(--tui-color-white); --tui-color-icon-neutral-subtle: var(--tui-color-neutral-700); --tui-color-icon-success: var(--tui-color-green-700); --tui-color-icon-warning: var(--tui-color-yellow-700); --tui-color-input-background: var(--tui-color-white); --tui-color-input-background-disabled: var(--tui-color-neutral-100); --tui-color-input-border: var(--tui-color-neutral-600); --tui-color-link-text: var(--tui-color-teal-700); --tui-color-link-text-hovered: var(--tui-color-teal-800); --tui-color-link-text-inverse: var(--tui-color-text-inverse); --tui-color-link-text-inverse-hovered: var(--tui-color-text-inverse); --tui-color-link-text-inverse-pressed: var(--tui-color-text-inverse); --tui-color-link-text-inverse-visited: var(--tui-color-text-inverse); --tui-color-link-text-neutral: var(--tui-color-text-neutral); --tui-color-link-text-neutral-hovered: var(--tui-color-text-neutral-hovered); --tui-color-link-text-neutral-pressed: var(--tui-color-text-neutral-pressed); --tui-color-link-text-neutral-visited: var(--tui-color-text-neutral); --tui-color-link-text-pressed: var(--tui-color-teal-800); --tui-color-link-text-visited: var(--tui-color-magenta-700); --tui-color-magenta-100: oklch(95.8% 0.0241 351.2); --tui-color-magenta-200: oklch(91% 0.0541 351.2); --tui-color-magenta-300: oklch(86% 0.0816 351.2); --tui-color-magenta-400: oklch(79.5% 0.1047 351.2); --tui-color-magenta-500: oklch(71.5% 0.13 351.2); --tui-color-magenta-600: oklch(63.5% 0.153 351.2); --tui-color-magenta-700: var(--tui-color-rexall-berry-purple); --tui-color-magenta-800: oklch(45.5% 0.1676 351.2); --tui-color-magenta-900: oklch(36.5% 0.1389 351.2); --tui-color-magenta-1000: oklch(27% 0.1075 351.2); --tui-color-neutral-100: oklch(95.8% 0 0); --tui-color-neutral-200: oklch(91% 0 0); --tui-color-neutral-300: oklch(86% 0 0); --tui-color-neutral-400: oklch(79.5% 0 0); --tui-color-neutral-500: oklch(71.5% 0 0); --tui-color-neutral-600: oklch(63.5% 0 0); --tui-color-neutral-700: oklch(54.5% 0 0); --tui-color-neutral-800: oklch(45.5% 0 0); --tui-color-neutral-900: var(--tui-color-rexall-charcoal-grey); --tui-color-neutral-1000: oklch(27% 0 0); --tui-color-neutral-A100: oklch(10.78% 0 0 / 0.056); --tui-color-neutral-A200: oklch(7.66% 0 0 / 0.118); --tui-color-neutral-A300: oklch(6.76% 0 0 / 0.182); --tui-color-neutral-A400: oklch(6.59% 0 0 / 0.264); --tui-color-neutral-A500: oklch(5.18% 0 0 / 0.362); --tui-color-neutral-A600: oklch(1.98% 0 0 / 0.457); --tui-color-neutral-A700: oklch(0% 0 0 / 0.561); --tui-color-neutral-A800: oklch(3.14% 0 0 / 0.661); --tui-color-neutral-A900: oklch(4.4% 0 0 / 0.797); --tui-color-neutral-A1000: oklch(3.14% 0 0 / 0.85); --tui-color-orange-100: oklch(95.8% 0.023 48.9); --tui-color-orange-200: oklch(91% 0.0514 48.9); --tui-color-orange-300: oklch(86% 0.0834 48.9); --tui-color-orange-400: oklch(79.5% 0.1188 48.9); --tui-color-orange-500: oklch(71.5% 0.1528 48.9); --tui-color-orange-600: var(--tui-color-rexall-terracotta-orange); --tui-color-orange-700: oklch(54.5% 0.1463 48.9); --tui-color-orange-800: oklch(45.5% 0.1222 48.9); --tui-color-orange-900: oklch(36.5% 0.098 48.9); --tui-color-orange-1000: oklch(27% 0.0725 48.9); --tui-color-pink-100: oklch(95.8% 0.0216 5); --tui-color-pink-200: oklch(91% 0.0485 5); --tui-color-pink-300: oklch(86% 0.0792 5); --tui-color-pink-400: oklch(79.5% 0.1241 5); --tui-color-pink-500: oklch(71.5% 0.1644 5); --tui-color-pink-600: var(--tui-color-rexall-tulip-pink); --tui-color-pink-700: oklch(54.5% 0.1544 5); --tui-color-pink-800: oklch(45.5% 0.1324 5); --tui-color-pink-900: oklch(36.5% 0.1098 5); --tui-color-pink-1000: oklch(27% 0.085 5); --tui-color-red-100: oklch(95.8% 0.0206 23.7); --tui-color-red-200: oklch(91% 0.0462 23.7); --tui-color-red-300: oklch(86% 0.0754 23.7); --tui-color-red-400: oklch(79.5% 0.1177 23.7); --tui-color-red-500: oklch(71.5% 0.1783 23.7); --tui-color-red-600: var(--tui-color-rexall-ladybug-red); --tui-color-red-700: oklch(54.5% 0.2142 23.7); --tui-color-red-800: oklch(45.5% 0.1837 23.7); --tui-color-red-900: oklch(36.5% 0.1475 23.7); --tui-color-red-1000: oklch(27% 0.1091 23.7); /* Be Well */ --tui-color-rexall-apricot-orange: oklch(71.4% 0.1525 56.134); /* Skin Health */ --tui-color-rexall-ash: oklch(90% 0.0027 106.45); /* Rexall */ --tui-color-rexall-banana-yellow: oklch(95.33% 0.0757 95.318); /* Berry Purple — magenta anchor */ --tui-color-rexall-berry-purple: oklch(51.17% 0.1852 351.18); /* Rexall */ --tui-color-rexall-blush-pink: oklch(58.59% 0.1586 4.6101); /* Be Well promo */ --tui-color-rexall-blush-red: oklch(86.8% 0.055 21.054); /* Be Well promo */ --tui-color-rexall-burgundy-red: oklch(45.44% 0.1821 28.716); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-calming-blue-haze: oklch(80.84% 0.0387 249.54); /* Charcoal Grey — neutral anchor */ --tui-color-rexall-charcoal-grey: oklch(32.5% 0 0); /* Rexall */ --tui-color-rexall-cloud-grey: oklch(84.52% 0 0); /* Be Well promo */ --tui-color-rexall-cream-yellow: oklch(99.23% 0.0159 98.986); /* Be Well promo */ --tui-color-rexall-daisy-yellow: oklch(92.84% 0.1204 106.48); /* Rexall AODA */ --tui-color-rexall-deep-ocean: oklch(42.34% 0.0723 194.8); /* Be Well promo */ --tui-color-rexall-dusty-red: oklch(50.13% 0.1755 23.713); /* Be Well */ --tui-color-rexall-evergreen: oklch(51.19% 0.0835 138.17); /* Rexall */ --tui-color-rexall-fog-grey: oklch(97.91% 0 0); /* Be Well */ --tui-color-rexall-forest-green: oklch(45.31% 0.073 146.02); /* Be Well */ --tui-color-rexall-garden-green: oklch(54.77% 0.0953 138.22); /* Be Well */ --tui-color-rexall-granite-grey: oklch(53.49% 0.005 17.313); /* Rexall */ --tui-color-rexall-grapefruit: oklch(95.01% 0.0848 98.329); /* Rexall */ --tui-color-rexall-grass-green: oklch(78.93% 0.1268 133.59); /* Be Well */ --tui-color-rexall-grey-blue: oklch(59.99% 0.0929 185.62); /* Be Well promo */ --tui-color-rexall-highlighter-yellow: oklch(92.14% 0.1824 105.41); /* Digestive */ --tui-color-rexall-immunity-orange: oklch(71.08% 0.1395 51.737); /* Ladybug Red — red anchor */ --tui-color-rexall-ladybug-red: oklch(60.41% 0.2338 23.742); /* Rexall AODA */ --tui-color-rexall-lakeside-blue: oklch(52.74% 0.0872 187.63); /* Be Well */ --tui-color-rexall-lavender-purple: oklch(89.47% 0.0375 342.55); /* Rexall */ --tui-color-rexall-lemon-yellow: oklch(88.28% 0.1811 94.46); /* Rexall */ --tui-color-rexall-light-blush-pink: oklch(85.56% 0.0673 10.506); /* Rexall */ --tui-color-rexall-light-drizzle: oklch(91.04% 0.0336 191.96); /* Be Well promo */ --tui-color-rexall-light-red: oklch(94.46% 0.0142 12.025); /* Be Well */ --tui-color-rexall-lime-green: oklch(75.39% 0.152 134.81); /* Be Well promo */ --tui-color-rexall-lipstick-red: oklch(62.76% 0.2141 23.004); /* Be Well */ --tui-color-rexall-melon-orange: oklch(85.06% 0.0788 62.059); /* Rexall */ --tui-color-rexall-mist-blue: oklch(95.8% 0.0169 192.36); /* Be Well */ --tui-color-rexall-moss-green: oklch(64.94% 0.1505 133.89); /* Be Well */ --tui-color-rexall-night-grey: oklch(42.18% 0.0031 48.66); /* Be Well */ --tui-color-rexall-pansy-purple: oklch(79.17% 0.0759 344.13); /* Be Well */ --tui-color-rexall-peachy-orange: oklch(92.38% 0.0385 63.533); /* Be Well promo */ --tui-color-rexall-pinky-red: oklch(96.91% 0.0151 17.418); /* Be Well */ --tui-color-rexall-plum-purple: oklch(59.35% 0.1561 347.67); /* Poolside Blue — teal anchor */ --tui-color-rexall-poolside-blue: oklch(68.76% 0.1147 188.23); /* Rexall */ --tui-color-rexall-rain-blue: oklch(87.81% 0.0553 193.35); /* Be Well promo */ --tui-color-rexall-rosy-red: oklch(69.56% 0.183 23.103); /* Rexall */ --tui-color-rexall-ruby-red: oklch(57.73% 0.2098 23.23); /* Rexall */ --tui-color-rexall-sage-green: oklch(88.81% 0.0662 132.17); /* Be Well */ --tui-color-rexall-seaside-blue: oklch(49.86% 0.0891 182.42); /* Rexall AODA */ --tui-color-rexall-shoreline-blue: oklch(63.95% 0.1102 188.54); /* Be Well */ --tui-color-rexall-silver-grey: oklch(66.37% 0.0049 0.0752); /* Be Well */ --tui-color-rexall-sky-blue: oklch(84.85% 0.0638 193.53); /* Rexall */ --tui-color-rexall-slate-grey: oklch(53.82% 0 0); --tui-color-rexall-steel: oklch(52.12% 0.0301 259.03); --tui-color-rexall-steel-100: oklch(95.8% 0.0077 249.5); --tui-color-rexall-steel-200: oklch(91% 0.0173 249.5); --tui-color-rexall-steel-300: oklch(86% 0.0277 249.5); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-steel-400: var(--tui-color-rexall-calming-blue-haze); --tui-color-rexall-steel-500: oklch(71.5% 0.0348 249.5); --tui-color-rexall-steel-600: oklch(63.5% 0.0315 249.5); --tui-color-rexall-steel-700: oklch(54.5% 0.0276 249.5); --tui-color-rexall-steel-800: oklch(45.5% 0.0237 249.5); --tui-color-rexall-steel-900: oklch(36.5% 0.0196 249.5); --tui-color-rexall-steel-1000: oklch(27% 0.0152 249.5); /* Sunshine Yellow — yellow anchor */ --tui-color-rexall-sunshine-yellow: oklch(86.72% 0.1773 90.85); /* Be Well promo */ --tui-color-rexall-taupe-red: oklch(75.68% 0.0781 13.998); /* Rexall */ --tui-color-rexall-tea-green: oklch(95.59% 0.0563 131.52); /* Be Well */ --tui-color-rexall-teal-blue: oklch(68.53% 0.0897 185.9); /* Terracotta Orange — orange anchor */ --tui-color-rexall-terracotta-orange: oklch(65.65% 0.1764 48.889); /* Tulip Pink — pink anchor */ --tui-color-rexall-tulip-pink: oklch(67.04% 0.1842 5.0399); /* Be Well promo */ --tui-color-rexall-vanilla-yellow: oklch(95.6% 0.072 105.12); /* Be Well */ --tui-color-rexall-venice-blue: oklch(40.54% 0.0851 236.88); /* Be Well */ --tui-color-rexall-washed-blue: oklch(78.7% 0.0619 185.5); /* Well Green — green anchor */ --tui-color-rexall-well-green: oklch(72.73% 0.1698 134.03); /* Digestive */ --tui-color-rexall-well-green-deep: oklch(50.28% 0.1219 142.99); --tui-color-surface-background: var(--tui-color-white); --tui-color-surface-background-brand: var(--tui-color-magenta-400); /* A page or section tinted with the brand. Plain surface unless a brand sets a tint. */ --tui-color-surface-background-brand-subtle: var(--tui-color-surface-background); --tui-color-surface-background-neutral-subtle: var(--tui-color-neutral-100); --tui-color-tag-background-accent-green: var(--tui-color-green-100); --tui-color-tag-background-accent-magenta: var(--tui-color-magenta-100); --tui-color-tag-background-accent-neutral: var(--tui-color-neutral-100); --tui-color-tag-background-accent-orange: var(--tui-color-orange-100); --tui-color-tag-background-accent-pink: var(--tui-color-pink-100); --tui-color-tag-background-accent-steel: var(--tui-color-rexall-steel-100); --tui-color-tag-background-accent-teal: var(--tui-color-teal-100); --tui-color-tag-background-accent-yellow: var(--tui-color-yellow-100); --tui-color-tag-text-accent-green: var(--tui-color-green-800); --tui-color-tag-text-accent-magenta: var(--tui-color-magenta-800); --tui-color-tag-text-accent-neutral: var(--tui-color-neutral-800); --tui-color-tag-text-accent-orange: var(--tui-color-orange-800); --tui-color-tag-text-accent-pink: var(--tui-color-pink-800); --tui-color-tag-text-accent-steel: var(--tui-color-rexall-steel-800); --tui-color-tag-text-accent-teal: var(--tui-color-teal-800); --tui-color-tag-text-accent-yellow: var(--tui-color-yellow-800); --tui-color-teal-100: oklch(95.8% 0.0229 188.2); --tui-color-teal-200: oklch(91% 0.0422 188.2); --tui-color-teal-300: oklch(86% 0.0602 188.2); --tui-color-teal-400: oklch(79.5% 0.0818 188.2); /* Poolside Blue — teal anchor */ --tui-color-teal-500: var(--tui-color-rexall-poolside-blue); --tui-color-teal-600: oklch(63.5% 0.1071 188.2); --tui-color-teal-700: oklch(54.5% 0.0941 188.2); --tui-color-teal-800: oklch(45.5% 0.079 188.2); --tui-color-teal-900: oklch(36.5% 0.0634 188.2); --tui-color-teal-1000: oklch(27% 0.0469 188.2); --tui-color-text: var(--tui-color-neutral-900); --tui-color-text-brand: var(--tui-color-teal-800); --tui-color-text-brand-hovered: var(--tui-color-teal-900); --tui-color-text-brand-pressed: var(--tui-color-teal-900); --tui-color-text-danger: var(--tui-color-red-700); --tui-color-text-danger-hovered: var(--tui-color-red-800); --tui-color-text-danger-pressed: var(--tui-color-red-800); --tui-color-text-disabled: var(--tui-color-neutral-600); --tui-color-text-information: var(--tui-color-rexall-steel-700); --tui-color-text-inverse: var(--tui-color-white); --tui-color-text-neutral: var(--tui-color-neutral-900); --tui-color-text-neutral-hovered: var(--tui-color-neutral-800); --tui-color-text-neutral-pressed: var(--tui-color-neutral-1000); --tui-color-text-neutral-subtle: var(--tui-color-neutral-800); --tui-color-text-success: var(--tui-color-green-700); --tui-color-text-warning: var(--tui-color-yellow-700); --tui-color-transparent: oklch(0% 0 0 / 0); --tui-color-white: oklch(100% 0 0); --tui-color-yellow-100: oklch(95.8% 0.0354 90.8); --tui-color-yellow-200: oklch(91% 0.1029 90.8); /* Sunshine Yellow — yellow anchor */ --tui-color-yellow-300: var(--tui-color-rexall-sunshine-yellow); --tui-color-yellow-400: oklch(79.5% 0.1624 88.3); --tui-color-yellow-500: oklch(71.5% 0.1463 85.7); --tui-color-yellow-600: oklch(63.5% 0.1305 83.1); --tui-color-yellow-700: oklch(54.5% 0.1126 80.6); --tui-color-yellow-800: oklch(45.5% 0.0948 78); --tui-color-yellow-900: oklch(36.5% 0.0768 75.4); --tui-color-yellow-1000: oklch(27% 0.0575 72.8); --tui-elevation-shadow-overflow: 0px 0px 8px 0px oklch(27% 0 0 / 0.16), 0px 0px 1px 0px oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-perimeter: oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-spread: oklch(27% 0 0 / 0.16); --tui-elevation-shadow-overlay: 0px 8px 12px 0px oklch(27% 0 0 / 0.15), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-shadow-raised: 0px 1px 1px 0px oklch(27% 0 0 / 0.25), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-surface: var(--tui-color-transparent); --tui-elevation-surface-container: var(--tui-color-neutral-A100); --tui-elevation-surface-container-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-container-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay: var(--tui-color-transparent); --tui-elevation-surface-overlay-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-raised: var(--tui-color-transparent); --tui-elevation-surface-raised-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-raised-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-sunken: var(--tui-color-neutral-A100); --tui-font-family-mono: "Source Code Pro", ui-monospace, "Consolas", "Menlo", monospace; --tui-font-family-sans: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --tui-font-leading-050: 16px; --tui-font-leading-075: 20px; --tui-font-leading-100: 24px; --tui-font-leading-200: 28px; --tui-font-leading-300: 28px; --tui-font-leading-400: 32px; --tui-font-leading-500: 40px; --tui-font-leading-600: 48px; --tui-font-leading-700: 56px; --tui-font-leading-800: 68px; --tui-font-leading-900: 96px; --tui-font-leading-1000: 116px; --tui-font-size-050: 12px; --tui-font-size-075: 14px; --tui-font-size-100: 16px; --tui-font-size-200: 20px; --tui-font-size-300: 24px; --tui-font-size-400: 28px; --tui-font-size-500: 32px; --tui-font-size-600: 40px; --tui-font-size-700: 48px; --tui-font-size-800: 56px; --tui-font-size-900: 80px; --tui-font-size-1000: 96px; --tui-font-tracking-default: 0rem; --tui-font-weight-bold: 700; --tui-font-weight-medium: 500; --tui-font-weight-regular: 400; --tui-font-weight-semibold: 600; --tui-layer-0: 0; --tui-layer-10: 10; --tui-layer-20: 20; --tui-layer-30: 30; --tui-layer-40: 40; --tui-layer-50: 50; --tui-layer-60: 60; --tui-layer-base: var(--tui-layer-0); --tui-layer-modal: var(--tui-layer-50); --tui-layer-navigation: var(--tui-layer-10); --tui-layer-notification: var(--tui-layer-60); --tui-layer-overlay: var(--tui-layer-40); --tui-layer-popover: var(--tui-layer-30); --tui-layer-sticky: var(--tui-layer-20); --tui-motion-action-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-action-pressed: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-blanket-enter: var(--tui-motion-duration-long) 0ms var(--tui-motion-easing-inout-bold); --tui-motion-blanket-exit: var(--tui-motion-duration-medium) 0ms var(--tui-motion-easing-in-practical); --tui-motion-control-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-selected: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-toggle: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-curve-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6); --tui-motion-curve-inout-bold: cubic-bezier(0.4, 0, 0, 1); --tui-motion-curve-out-bold: cubic-bezier(0, 0.4, 0, 1); --tui-motion-curve-out-practical: cubic-bezier(0.4, 1, 0.6, 1); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-curve-spring: cubic-bezier(0.363, 1.102, 0.089, 1.043); --tui-motion-duration-0: 0ms; --tui-motion-duration-050: 50ms; --tui-motion-duration-100: 100ms; --tui-motion-duration-150: 150ms; --tui-motion-duration-200: 200ms; --tui-motion-duration-250: 250ms; --tui-motion-duration-400: 400ms; --tui-motion-duration-600: 600ms; --tui-motion-duration-instant: var(--tui-motion-duration-0); --tui-motion-duration-long: var(--tui-motion-duration-250); --tui-motion-duration-medium: var(--tui-motion-duration-200); --tui-motion-duration-short: var(--tui-motion-duration-150); --tui-motion-duration-xlong: var(--tui-motion-duration-400); --tui-motion-duration-xshort: var(--tui-motion-duration-100); --tui-motion-duration-xxlong: var(--tui-motion-duration-600); --tui-motion-duration-xxshort: var(--tui-motion-duration-050); --tui-motion-easing-in-practical: var(--tui-motion-curve-in-practical); --tui-motion-easing-inout-bold: var(--tui-motion-curve-inout-bold); --tui-motion-easing-out-bold: var(--tui-motion-curve-out-bold); --tui-motion-easing-out-practical: var(--tui-motion-curve-out-practical); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-easing-spring: var(--tui-motion-curve-spring); /* Corners of a small action (Button sm). */ --tui-shape-action-round: var(--tui-size-radius-lg); /* Corners of a medium action (Button md). */ --tui-shape-action-rounder: var(--tui-size-radius-xl); /* Corners of a large action (Button lg). The roundest action, not always a pill. */ --tui-shape-action-roundest: var(--tui-size-radius-2xl); /* Corners of a box that holds content, such as a card. Follows the surface corners unless a brand sets its own. */ --tui-shape-container-rounder: var(--tui-shape-surface-rounder); --tui-shape-rounder: var(--tui-size-radius-lg); --tui-shape-surface-rounder: var(--tui-size-radius-2xl); --tui-size-border-hairline: var(--tui-size-border-sm); --tui-size-border-md: 2px; --tui-size-border-narrow: var(--tui-size-border-md); --tui-size-border-sm: 1px; --tui-size-icon-lg: var(--tui-space-300); --tui-size-icon-md: var(--tui-space-250); --tui-size-icon-sm: var(--tui-space-200); --tui-size-icon-xs: var(--tui-space-100); --tui-size-radius-2xl: 16px; --tui-size-radius-3xl: 20px; --tui-size-radius-4xl: 24px; --tui-size-radius-full: 9999px; --tui-size-radius-lg: 8px; --tui-size-radius-md: 6px; --tui-size-radius-none: 0px; --tui-size-radius-sm: 4px; --tui-size-radius-xl: 12px; --tui-size-radius-xs: 2px; --tui-space-0: 0px; --tui-space-025: 2px; --tui-space-050: 4px; --tui-space-075: 6px; --tui-space-100: 8px; --tui-space-125: 10px; --tui-space-150: 12px; --tui-space-200: 16px; --tui-space-250: 20px; --tui-space-300: 24px; --tui-space-400: 32px; --tui-space-500: 40px; --tui-space-600: 48px; --tui-space-700: 56px; --tui-space-800: 64px; --tui-space-900: 72px; --tui-space-1000: 80px; --tui-space-1100: 88px; --tui-space-1200: 96px; --tui-space-1300: 104px; --tui-space-1400: 112px; --tui-space-1500: 120px; --tui-space-inline: var(--tui-space-100); --tui-space-inline-dense: var(--tui-space-050); --tui-space-inline-loose: var(--tui-space-150); --tui-space-inline-looser: var(--tui-space-250); --tui-space-inset: var(--tui-space-200); --tui-space-inset-dense: var(--tui-space-100); --tui-space-inset-loose: var(--tui-space-250); --tui-space-inset-looser: var(--tui-space-400); --tui-space-inset-squish: 12px 24px; --tui-space-inset-squish-dense: 8px 24px; --tui-space-inset-squish-loose: 16px 24px; --tui-space-inset-stretch: 8px 16px; --tui-space-inset-stretch-loosest: 16px 16px; --tui-space-negative-025: -2px; --tui-space-negative-050: -4px; --tui-space-negative-075: -6px; --tui-space-negative-100: -8px; --tui-space-negative-150: -12px; --tui-space-negative-200: -16px; --tui-space-negative-250: -20px; --tui-space-negative-300: -24px; --tui-space-negative-400: -32px; --tui-space-stack: var(--tui-space-200); --tui-space-stack-dense: var(--tui-space-100); --tui-space-stack-denser: var(--tui-space-050); --tui-space-stack-loose: var(--tui-space-300); --tui-space-stack-looser: var(--tui-space-400); --tui-space-stack-loosest: var(--tui-space-600); --tui-typography-action-label-lg: var(--tui-typography-action-label-lg-font-weight) var(--tui-typography-action-label-lg-font-size)/var(--tui-typography-action-label-lg-line-height) var(--tui-typography-action-label-lg-font-family); --tui-typography-action-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-action-label-lg-font-size: var(--tui-font-size-100); --tui-typography-action-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-lg-letter-spacing: 0px; --tui-typography-action-label-lg-line-height: 1.5; --tui-typography-action-label-md: var(--tui-typography-action-label-md-font-weight) var(--tui-typography-action-label-md-font-size)/var(--tui-typography-action-label-md-line-height) var(--tui-typography-action-label-md-font-family); --tui-typography-action-label-md-font-family: var(--tui-font-family-sans); --tui-typography-action-label-md-font-size: var(--tui-font-size-075); --tui-typography-action-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-md-letter-spacing: 0px; --tui-typography-action-label-md-line-height: 1.4286; --tui-typography-action-label-xl: var(--tui-typography-action-label-xl-font-weight) var(--tui-typography-action-label-xl-font-size)/var(--tui-typography-action-label-xl-line-height) var(--tui-typography-action-label-xl-font-family); --tui-typography-action-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-action-label-xl-font-size: var(--tui-font-size-200); --tui-typography-action-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-xl-letter-spacing: 0px; --tui-typography-action-label-xl-line-height: 1.4; --tui-typography-body-lg: var(--tui-typography-body-lg-font-weight) var(--tui-typography-body-lg-font-size)/var(--tui-typography-body-lg-line-height) var(--tui-typography-body-lg-font-family); --tui-typography-body-lg-font-family: var(--tui-font-family-sans); --tui-typography-body-lg-font-size: var(--tui-font-size-200); --tui-typography-body-lg-font-weight: var(--tui-font-weight-regular); --tui-typography-body-lg-letter-spacing: 0px; --tui-typography-body-lg-line-height: 1.4; --tui-typography-body-md: var(--tui-typography-body-md-font-weight) var(--tui-typography-body-md-font-size)/var(--tui-typography-body-md-line-height) var(--tui-typography-body-md-font-family); --tui-typography-body-md-font-family: var(--tui-font-family-sans); --tui-typography-body-md-font-size: var(--tui-font-size-100); --tui-typography-body-md-font-weight: var(--tui-font-weight-regular); --tui-typography-body-md-letter-spacing: 0px; --tui-typography-body-md-line-height: 1.5; --tui-typography-body-sm: var(--tui-typography-body-sm-font-weight) var(--tui-typography-body-sm-font-size)/var(--tui-typography-body-sm-line-height) var(--tui-typography-body-sm-font-family); --tui-typography-body-sm-font-family: var(--tui-font-family-sans); --tui-typography-body-sm-font-size: var(--tui-font-size-075); --tui-typography-body-sm-font-weight: var(--tui-font-weight-regular); --tui-typography-body-sm-letter-spacing: 0px; --tui-typography-body-sm-line-height: 1.4286; --tui-typography-body-xs: var(--tui-typography-body-xs-font-weight) var(--tui-typography-body-xs-font-size)/var(--tui-typography-body-xs-line-height) var(--tui-typography-body-xs-font-family); --tui-typography-body-xs-font-family: var(--tui-font-family-sans); --tui-typography-body-xs-font-size: var(--tui-font-size-050); --tui-typography-body-xs-font-weight: var(--tui-font-weight-regular); --tui-typography-body-xs-letter-spacing: 0px; --tui-typography-body-xs-line-height: 1.3333; --tui-typography-code-md: var(--tui-typography-code-md-font-weight) var(--tui-typography-code-md-font-size)/var(--tui-typography-code-md-line-height) var(--tui-typography-code-md-font-family); --tui-typography-code-md-font-family: var(--tui-font-family-mono); --tui-typography-code-md-font-size: var(--tui-font-size-075); --tui-typography-code-md-font-weight: var(--tui-font-weight-regular); --tui-typography-code-md-letter-spacing: 0px; --tui-typography-code-md-line-height: 1.4286; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md: var(--tui-typography-container-heading-md-font-weight) var(--tui-typography-container-heading-md-font-size)/var(--tui-typography-container-heading-md-line-height) var(--tui-typography-container-heading-md-font-family); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-family: var(--tui-font-family-sans); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-size: var(--tui-font-size-200); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-weight: var(--tui-font-weight-bold); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-letter-spacing: 0px; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-line-height: 1.4; --tui-typography-display-lg: var(--tui-typography-display-lg-font-weight) var(--tui-typography-display-lg-font-size)/var(--tui-typography-display-lg-line-height) var(--tui-typography-display-lg-font-family); --tui-typography-display-lg-font-family: var(--tui-font-family-sans); --tui-typography-display-lg-font-size: var(--tui-font-size-900); --tui-typography-display-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-display-lg-letter-spacing: -0.8px; --tui-typography-display-lg-line-height: 1.2; --tui-typography-display-md: var(--tui-typography-display-md-font-weight) var(--tui-typography-display-md-font-size)/var(--tui-typography-display-md-line-height) var(--tui-typography-display-md-font-family); --tui-typography-display-md-font-family: var(--tui-font-family-sans); --tui-typography-display-md-font-size: var(--tui-font-size-800); --tui-typography-display-md-font-weight: var(--tui-font-weight-bold); --tui-typography-display-md-letter-spacing: -0.56px; --tui-typography-display-md-line-height: 1.2143; --tui-typography-display-xl: var(--tui-typography-display-xl-font-weight) var(--tui-typography-display-xl-font-size)/var(--tui-typography-display-xl-line-height) var(--tui-typography-display-xl-font-family); --tui-typography-display-xl-font-family: var(--tui-font-family-sans); --tui-typography-display-xl-font-size: var(--tui-font-size-1000); --tui-typography-display-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-display-xl-letter-spacing: -0.96px; --tui-typography-display-xl-line-height: 1.2083; --tui-typography-heading-lg: var(--tui-typography-heading-lg-font-weight) var(--tui-typography-heading-lg-font-size)/var(--tui-typography-heading-lg-line-height) var(--tui-typography-heading-lg-font-family); --tui-typography-heading-lg-font-family: var(--tui-font-family-sans); --tui-typography-heading-lg-font-size: var(--tui-font-size-400); --tui-typography-heading-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-lg-letter-spacing: -0.28px; --tui-typography-heading-lg-line-height: 1.1429; --tui-typography-heading-md: var(--tui-typography-heading-md-font-weight) var(--tui-typography-heading-md-font-size)/var(--tui-typography-heading-md-line-height) var(--tui-typography-heading-md-font-family); --tui-typography-heading-md-font-family: var(--tui-font-family-sans); --tui-typography-heading-md-font-size: var(--tui-font-size-300); --tui-typography-heading-md-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-md-letter-spacing: 0px; --tui-typography-heading-md-line-height: 1.1667; --tui-typography-heading-sm: var(--tui-typography-heading-sm-font-weight) var(--tui-typography-heading-sm-font-size)/var(--tui-typography-heading-sm-line-height) var(--tui-typography-heading-sm-font-family); --tui-typography-heading-sm-font-family: var(--tui-font-family-sans); --tui-typography-heading-sm-font-size: var(--tui-font-size-200); --tui-typography-heading-sm-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-sm-letter-spacing: 0px; --tui-typography-heading-sm-line-height: 1.4; --tui-typography-heading-xl: var(--tui-typography-heading-xl-font-weight) var(--tui-typography-heading-xl-font-size)/var(--tui-typography-heading-xl-line-height) var(--tui-typography-heading-xl-font-family); --tui-typography-heading-xl-font-family: var(--tui-font-family-sans); --tui-typography-heading-xl-font-size: var(--tui-font-size-500); --tui-typography-heading-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-xl-letter-spacing: -0.32px; --tui-typography-heading-xl-line-height: 1.25; --tui-typography-label-lg: var(--tui-typography-label-lg-font-weight) var(--tui-typography-label-lg-font-size)/var(--tui-typography-label-lg-line-height) var(--tui-typography-label-lg-font-family); --tui-typography-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-label-lg-font-size: var(--tui-font-size-100); --tui-typography-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-lg-letter-spacing: 0px; --tui-typography-label-lg-line-height: 1.5; --tui-typography-label-md: var(--tui-typography-label-md-font-weight) var(--tui-typography-label-md-font-size)/var(--tui-typography-label-md-line-height) var(--tui-typography-label-md-font-family); --tui-typography-label-md-font-family: var(--tui-font-family-sans); --tui-typography-label-md-font-size: var(--tui-font-size-075); --tui-typography-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-md-letter-spacing: 0px; --tui-typography-label-md-line-height: 1.4286; --tui-typography-label-xl: var(--tui-typography-label-xl-font-weight) var(--tui-typography-label-xl-font-size)/var(--tui-typography-label-xl-line-height) var(--tui-typography-label-xl-font-family); --tui-typography-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-label-xl-font-size: var(--tui-font-size-200); --tui-typography-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-xl-letter-spacing: 0px; --tui-typography-label-xl-line-height: 1.4; } } @layer tokens { :root[data-color-scheme="dark"] { --tui-color-background-accent-green: var(--tui-color-green-500); --tui-color-background-accent-green-bold: var(--tui-color-green-700); --tui-color-background-accent-green-subtle: var(--tui-color-green-500); --tui-color-background-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-background-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-background-accent-steel-subtle: var(--tui-color-rexall-steel-500); --tui-color-background-accent-teal: var(--tui-color-teal-500); --tui-color-background-accent-teal-bold: var(--tui-color-teal-700); --tui-color-background-accent-teal-subtle: var(--tui-color-teal-500); --tui-color-background-brand: var(--tui-color-teal-500); --tui-color-background-brand-bold: var(--tui-color-teal-700); --tui-color-background-brand-bold-hovered: var(--tui-color-teal-800); --tui-color-background-brand-bold-pressed: var(--tui-color-teal-900); --tui-color-background-brand-subtle: var(--tui-color-teal-100); --tui-color-background-brand-subtle-hovered: var(--tui-color-teal-200); --tui-color-background-brand-subtle-pressed: var(--tui-color-teal-300); --tui-color-background-danger: var(--tui-color-red-700); --tui-color-background-danger-bold: var(--tui-color-red-700); --tui-color-background-danger-hovered: var(--tui-color-red-800); --tui-color-background-danger-pressed: var(--tui-color-red-900); --tui-color-background-danger-subtle: var(--tui-color-red-100); --tui-color-background-danger-subtle-hovered: var(--tui-color-red-200); --tui-color-background-danger-subtle-pressed: var(--tui-color-red-300); --tui-color-background-disabled: var(--tui-color-neutral-100); --tui-color-background-hovered: var(--tui-color-neutral-100); --tui-color-background-information: var(--tui-color-rexall-steel-500); --tui-color-background-information-bold: var(--tui-color-rexall-steel-700); --tui-color-background-information-subtle: var(--tui-color-rexall-steel-100); --tui-color-background-inverse: var(--tui-color-neutral-900); --tui-color-background-inverse-hovered: var(--tui-color-neutral-1000); --tui-color-background-inverse-pressed: var(--tui-color-neutral-800); --tui-color-background-neutral: var(--tui-color-neutral-400); --tui-color-background-neutral-bold: var(--tui-color-neutral-700); --tui-color-background-neutral-hovered: var(--tui-color-neutral-300); --tui-color-background-neutral-pressed: var(--tui-color-neutral-500); --tui-color-background-neutral-subtle: var(--tui-color-neutral-200); --tui-color-background-neutral-subtle-hovered: var(--tui-color-neutral-100); --tui-color-background-neutral-subtle-pressed: var(--tui-color-neutral-300); --tui-color-background-pressed: var(--tui-color-neutral-200); --tui-color-background-selected: var(--tui-color-teal-100); --tui-color-background-success: var(--tui-color-green-500); --tui-color-background-success-bold: var(--tui-color-green-700); --tui-color-background-success-subtle: var(--tui-color-green-100); --tui-color-background-warning: var(--tui-color-yellow-300); --tui-color-background-warning-bold: var(--tui-color-yellow-300); --tui-color-background-warning-subtle: var(--tui-color-yellow-100); --tui-color-black: oklch(0% 0 0); --tui-color-blanket-background: var(--tui-color-neutral-900); --tui-color-border: var(--tui-color-neutral-300); --tui-color-border-accent-green: var(--tui-color-green-500); --tui-color-border-accent-green-bold: var(--tui-color-green-700); --tui-color-border-accent-green-subtle: var(--tui-color-green-300); --tui-color-border-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-border-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-border-accent-steel-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-accent-teal: var(--tui-color-teal-500); --tui-color-border-accent-teal-bold: var(--tui-color-teal-700); --tui-color-border-accent-teal-subtle: var(--tui-color-teal-300); --tui-color-border-brand: var(--tui-color-teal-700); --tui-color-border-brand-bold: var(--tui-color-teal-700); --tui-color-border-brand-hovered: var(--tui-color-teal-800); --tui-color-border-brand-pressed: var(--tui-color-teal-900); --tui-color-border-brand-subtle: var(--tui-color-teal-300); --tui-color-border-danger: var(--tui-color-red-600); --tui-color-border-danger-bold: var(--tui-color-red-700); --tui-color-border-danger-hovered: var(--tui-color-red-700); --tui-color-border-danger-pressed: var(--tui-color-red-800); --tui-color-border-danger-subtle: var(--tui-color-red-300); --tui-color-border-disabled: var(--tui-color-neutral-200); --tui-color-border-focus: var(--tui-color-neutral-1000); --tui-color-border-information: var(--tui-color-rexall-steel-600); --tui-color-border-information-bold: var(--tui-color-rexall-steel-700); --tui-color-border-information-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-inverse-focus: var(--tui-color-white); --tui-color-border-neutral: var(--tui-color-neutral-300); --tui-color-border-neutral-bold: var(--tui-color-neutral-600); --tui-color-border-neutral-bold-hovered: var(--tui-color-neutral-700); --tui-color-border-neutral-bold-pressed: var(--tui-color-neutral-800); --tui-color-border-neutral-hovered: var(--tui-color-neutral-200); --tui-color-border-neutral-pressed: var(--tui-color-neutral-400); --tui-color-border-neutral-subtle: var(--tui-color-neutral-300); --tui-color-border-neutral-subtlest: var(--tui-color-neutral-200); --tui-color-border-selected: var(--tui-color-teal-700); --tui-color-border-success: var(--tui-color-green-700); --tui-color-border-success-bold: var(--tui-color-green-700); --tui-color-border-success-subtle: var(--tui-color-green-300); --tui-color-border-warning: var(--tui-color-yellow-600); --tui-color-border-warning-bold: var(--tui-color-yellow-700); --tui-color-border-warning-subtle: var(--tui-color-yellow-300); --tui-color-container-background: var(--tui-color-white); --tui-color-container-background-accent-green: var(--tui-color-background-accent-green); --tui-color-container-background-accent-green-bold: var(--tui-color-background-accent-green-bold); --tui-color-container-background-accent-green-subtle: var(--tui-color-background-accent-green-subtle); --tui-color-container-background-accent-steel: var(--tui-color-background-accent-steel); --tui-color-container-background-accent-steel-bold: var(--tui-color-background-accent-steel-bold); --tui-color-container-background-accent-steel-subtle: var(--tui-color-background-accent-steel-subtle); --tui-color-container-background-accent-teal: var(--tui-color-background-accent-teal); --tui-color-container-background-accent-teal-bold: var(--tui-color-background-accent-teal-bold); --tui-color-container-background-accent-teal-subtle: var(--tui-color-background-accent-teal-subtle); --tui-color-container-background-brand: var(--tui-color-background-brand); --tui-color-container-background-brand-bold: var(--tui-color-background-brand-bold); --tui-color-container-background-brand-subtle: var(--tui-color-background-brand-subtle); --tui-color-container-background-danger: var(--tui-color-background-danger); --tui-color-container-background-danger-bold: var(--tui-color-background-danger-bold); --tui-color-container-background-danger-subtle: var(--tui-color-background-danger-subtle); --tui-color-container-background-information: var(--tui-color-background-information); --tui-color-container-background-information-bold: var(--tui-color-background-information-bold); --tui-color-container-background-information-subtle: var(--tui-color-background-information-subtle); --tui-color-container-background-neutral: var(--tui-color-background-neutral); --tui-color-container-background-neutral-bold: var(--tui-color-background-inverse); --tui-color-container-background-neutral-subtle: var(--tui-color-surface-background-neutral-subtle); --tui-color-container-background-success: var(--tui-color-background-success); --tui-color-container-background-success-bold: var(--tui-color-background-success-bold); --tui-color-container-background-success-subtle: var(--tui-color-background-success-subtle); --tui-color-container-background-warning: var(--tui-color-background-warning); --tui-color-container-background-warning-bold: var(--tui-color-background-warning-bold); --tui-color-container-background-warning-subtle: var(--tui-color-background-warning-subtle); --tui-color-container-border: var(--tui-color-neutral-300); --tui-color-container-border-accent-green: var(--tui-color-border-accent-green); --tui-color-container-border-accent-green-bold: var(--tui-color-border-accent-green-bold); --tui-color-container-border-accent-green-subtle: var(--tui-color-border-accent-green-subtle); --tui-color-container-border-accent-steel: var(--tui-color-border-accent-steel); --tui-color-container-border-accent-steel-bold: var(--tui-color-border-accent-steel-bold); --tui-color-container-border-accent-steel-subtle: var(--tui-color-border-accent-steel-subtle); --tui-color-container-border-accent-teal: var(--tui-color-border-accent-teal); --tui-color-container-border-accent-teal-bold: var(--tui-color-border-accent-teal-bold); --tui-color-container-border-accent-teal-subtle: var(--tui-color-border-accent-teal-subtle); --tui-color-container-border-brand: var(--tui-color-border-brand); --tui-color-container-border-brand-bold: var(--tui-color-border-brand-bold); --tui-color-container-border-brand-subtle: var(--tui-color-border-brand-subtle); --tui-color-container-border-danger: var(--tui-color-border-danger); --tui-color-container-border-danger-bold: var(--tui-color-border-danger-bold); --tui-color-container-border-danger-subtle: var(--tui-color-border-danger-subtle); --tui-color-container-border-information: var(--tui-color-border-information); --tui-color-container-border-information-bold: var(--tui-color-border-information-bold); --tui-color-container-border-information-subtle: var(--tui-color-border-information-subtle); --tui-color-container-border-neutral: var(--tui-color-border-neutral); --tui-color-container-border-neutral-bold: var(--tui-color-border-neutral-bold); --tui-color-container-border-neutral-subtle: var(--tui-color-border-neutral-subtle); --tui-color-container-border-success: var(--tui-color-border-success); --tui-color-container-border-success-bold: var(--tui-color-border-success-bold); --tui-color-container-border-success-subtle: var(--tui-color-border-success-subtle); --tui-color-container-border-warning: var(--tui-color-border-warning); --tui-color-container-border-warning-bold: var(--tui-color-border-warning-bold); --tui-color-container-border-warning-subtle: var(--tui-color-border-warning-subtle); /* Text inside a box that holds content, such as a card. */ --tui-color-container-text: var(--tui-color-text); /* Secondary text inside a box that holds content. */ --tui-color-container-text-neutral-subtle: var(--tui-color-text-neutral-subtle); --tui-color-green-100: oklch(95.8% 0.0339 134); --tui-color-green-200: oklch(91% 0.0654 134); --tui-color-green-300: oklch(86% 0.0956 134); --tui-color-green-400: oklch(79.5% 0.1328 134); --tui-color-green-500: var(--tui-color-rexall-well-green); --tui-color-green-600: oklch(63.5% 0.1512 134); --tui-color-green-700: oklch(54.5% 0.1328 134); --tui-color-green-800: oklch(45.5% 0.1139 134); --tui-color-green-900: oklch(36.5% 0.0944 134); --tui-color-green-1000: oklch(27% 0.0731 134); --tui-color-icon: var(--tui-color-neutral-900); --tui-color-icon-brand: var(--tui-color-teal-700); --tui-color-icon-danger: var(--tui-color-red-700); --tui-color-icon-disabled: var(--tui-color-neutral-600); --tui-color-icon-information: var(--tui-color-rexall-steel-700); --tui-color-icon-inverse: var(--tui-color-white); --tui-color-icon-neutral-subtle: var(--tui-color-neutral-700); --tui-color-icon-success: var(--tui-color-green-700); --tui-color-icon-warning: var(--tui-color-yellow-700); --tui-color-input-background: var(--tui-color-white); --tui-color-input-background-disabled: var(--tui-color-neutral-100); --tui-color-input-border: var(--tui-color-neutral-600); --tui-color-link-text: var(--tui-color-teal-700); --tui-color-link-text-hovered: var(--tui-color-teal-800); --tui-color-link-text-inverse: var(--tui-color-text-inverse); --tui-color-link-text-inverse-hovered: var(--tui-color-text-inverse); --tui-color-link-text-inverse-pressed: var(--tui-color-text-inverse); --tui-color-link-text-inverse-visited: var(--tui-color-text-inverse); --tui-color-link-text-neutral: var(--tui-color-text-neutral); --tui-color-link-text-neutral-hovered: var(--tui-color-text-neutral-hovered); --tui-color-link-text-neutral-pressed: var(--tui-color-text-neutral-pressed); --tui-color-link-text-neutral-visited: var(--tui-color-text-neutral); --tui-color-link-text-pressed: var(--tui-color-teal-800); --tui-color-link-text-visited: var(--tui-color-magenta-700); --tui-color-magenta-100: oklch(95.8% 0.0241 351.2); --tui-color-magenta-200: oklch(91% 0.0541 351.2); --tui-color-magenta-300: oklch(86% 0.0816 351.2); --tui-color-magenta-400: oklch(79.5% 0.1047 351.2); --tui-color-magenta-500: oklch(71.5% 0.13 351.2); --tui-color-magenta-600: oklch(63.5% 0.153 351.2); --tui-color-magenta-700: var(--tui-color-rexall-berry-purple); --tui-color-magenta-800: oklch(45.5% 0.1676 351.2); --tui-color-magenta-900: oklch(36.5% 0.1389 351.2); --tui-color-magenta-1000: oklch(27% 0.1075 351.2); --tui-color-neutral-100: oklch(95.8% 0 0); --tui-color-neutral-200: oklch(91% 0 0); --tui-color-neutral-300: oklch(86% 0 0); --tui-color-neutral-400: oklch(79.5% 0 0); --tui-color-neutral-500: oklch(71.5% 0 0); --tui-color-neutral-600: oklch(63.5% 0 0); --tui-color-neutral-700: oklch(54.5% 0 0); --tui-color-neutral-800: oklch(45.5% 0 0); --tui-color-neutral-900: var(--tui-color-rexall-charcoal-grey); --tui-color-neutral-1000: oklch(27% 0 0); --tui-color-neutral-A100: oklch(10.78% 0 0 / 0.056); --tui-color-neutral-A200: oklch(7.66% 0 0 / 0.118); --tui-color-neutral-A300: oklch(6.76% 0 0 / 0.182); --tui-color-neutral-A400: oklch(6.59% 0 0 / 0.264); --tui-color-neutral-A500: oklch(5.18% 0 0 / 0.362); --tui-color-neutral-A600: oklch(1.98% 0 0 / 0.457); --tui-color-neutral-A700: oklch(0% 0 0 / 0.561); --tui-color-neutral-A800: oklch(3.14% 0 0 / 0.661); --tui-color-neutral-A900: oklch(4.4% 0 0 / 0.797); --tui-color-neutral-A1000: oklch(3.14% 0 0 / 0.85); --tui-color-orange-100: oklch(95.8% 0.023 48.9); --tui-color-orange-200: oklch(91% 0.0514 48.9); --tui-color-orange-300: oklch(86% 0.0834 48.9); --tui-color-orange-400: oklch(79.5% 0.1188 48.9); --tui-color-orange-500: oklch(71.5% 0.1528 48.9); --tui-color-orange-600: var(--tui-color-rexall-terracotta-orange); --tui-color-orange-700: oklch(54.5% 0.1463 48.9); --tui-color-orange-800: oklch(45.5% 0.1222 48.9); --tui-color-orange-900: oklch(36.5% 0.098 48.9); --tui-color-orange-1000: oklch(27% 0.0725 48.9); --tui-color-pink-100: oklch(95.8% 0.0216 5); --tui-color-pink-200: oklch(91% 0.0485 5); --tui-color-pink-300: oklch(86% 0.0792 5); --tui-color-pink-400: oklch(79.5% 0.1241 5); --tui-color-pink-500: oklch(71.5% 0.1644 5); --tui-color-pink-600: var(--tui-color-rexall-tulip-pink); --tui-color-pink-700: oklch(54.5% 0.1544 5); --tui-color-pink-800: oklch(45.5% 0.1324 5); --tui-color-pink-900: oklch(36.5% 0.1098 5); --tui-color-pink-1000: oklch(27% 0.085 5); --tui-color-red-100: oklch(95.8% 0.0206 23.7); --tui-color-red-200: oklch(91% 0.0462 23.7); --tui-color-red-300: oklch(86% 0.0754 23.7); --tui-color-red-400: oklch(79.5% 0.1177 23.7); --tui-color-red-500: oklch(71.5% 0.1783 23.7); --tui-color-red-600: var(--tui-color-rexall-ladybug-red); --tui-color-red-700: oklch(54.5% 0.2142 23.7); --tui-color-red-800: oklch(45.5% 0.1837 23.7); --tui-color-red-900: oklch(36.5% 0.1475 23.7); --tui-color-red-1000: oklch(27% 0.1091 23.7); /* Be Well */ --tui-color-rexall-apricot-orange: oklch(71.4% 0.1525 56.134); /* Skin Health */ --tui-color-rexall-ash: oklch(90% 0.0027 106.45); /* Rexall */ --tui-color-rexall-banana-yellow: oklch(95.33% 0.0757 95.318); /* Berry Purple — magenta anchor */ --tui-color-rexall-berry-purple: oklch(51.17% 0.1852 351.18); /* Rexall */ --tui-color-rexall-blush-pink: oklch(58.59% 0.1586 4.6101); /* Be Well promo */ --tui-color-rexall-blush-red: oklch(86.8% 0.055 21.054); /* Be Well promo */ --tui-color-rexall-burgundy-red: oklch(45.44% 0.1821 28.716); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-calming-blue-haze: oklch(80.84% 0.0387 249.54); /* Charcoal Grey — neutral anchor */ --tui-color-rexall-charcoal-grey: oklch(32.5% 0 0); /* Rexall */ --tui-color-rexall-cloud-grey: oklch(84.52% 0 0); /* Be Well promo */ --tui-color-rexall-cream-yellow: oklch(99.23% 0.0159 98.986); /* Be Well promo */ --tui-color-rexall-daisy-yellow: oklch(92.84% 0.1204 106.48); /* Rexall AODA */ --tui-color-rexall-deep-ocean: oklch(42.34% 0.0723 194.8); /* Be Well promo */ --tui-color-rexall-dusty-red: oklch(50.13% 0.1755 23.713); /* Be Well */ --tui-color-rexall-evergreen: oklch(51.19% 0.0835 138.17); /* Rexall */ --tui-color-rexall-fog-grey: oklch(97.91% 0 0); /* Be Well */ --tui-color-rexall-forest-green: oklch(45.31% 0.073 146.02); /* Be Well */ --tui-color-rexall-garden-green: oklch(54.77% 0.0953 138.22); /* Be Well */ --tui-color-rexall-granite-grey: oklch(53.49% 0.005 17.313); /* Rexall */ --tui-color-rexall-grapefruit: oklch(95.01% 0.0848 98.329); /* Rexall */ --tui-color-rexall-grass-green: oklch(78.93% 0.1268 133.59); /* Be Well */ --tui-color-rexall-grey-blue: oklch(59.99% 0.0929 185.62); /* Be Well promo */ --tui-color-rexall-highlighter-yellow: oklch(92.14% 0.1824 105.41); /* Digestive */ --tui-color-rexall-immunity-orange: oklch(71.08% 0.1395 51.737); /* Ladybug Red — red anchor */ --tui-color-rexall-ladybug-red: oklch(60.41% 0.2338 23.742); /* Rexall AODA */ --tui-color-rexall-lakeside-blue: oklch(52.74% 0.0872 187.63); /* Be Well */ --tui-color-rexall-lavender-purple: oklch(89.47% 0.0375 342.55); /* Rexall */ --tui-color-rexall-lemon-yellow: oklch(88.28% 0.1811 94.46); /* Rexall */ --tui-color-rexall-light-blush-pink: oklch(85.56% 0.0673 10.506); /* Rexall */ --tui-color-rexall-light-drizzle: oklch(91.04% 0.0336 191.96); /* Be Well promo */ --tui-color-rexall-light-red: oklch(94.46% 0.0142 12.025); /* Be Well */ --tui-color-rexall-lime-green: oklch(75.39% 0.152 134.81); /* Be Well promo */ --tui-color-rexall-lipstick-red: oklch(62.76% 0.2141 23.004); /* Be Well */ --tui-color-rexall-melon-orange: oklch(85.06% 0.0788 62.059); /* Rexall */ --tui-color-rexall-mist-blue: oklch(95.8% 0.0169 192.36); /* Be Well */ --tui-color-rexall-moss-green: oklch(64.94% 0.1505 133.89); /* Be Well */ --tui-color-rexall-night-grey: oklch(42.18% 0.0031 48.66); /* Be Well */ --tui-color-rexall-pansy-purple: oklch(79.17% 0.0759 344.13); /* Be Well */ --tui-color-rexall-peachy-orange: oklch(92.38% 0.0385 63.533); /* Be Well promo */ --tui-color-rexall-pinky-red: oklch(96.91% 0.0151 17.418); /* Be Well */ --tui-color-rexall-plum-purple: oklch(59.35% 0.1561 347.67); /* Poolside Blue — teal anchor */ --tui-color-rexall-poolside-blue: oklch(68.76% 0.1147 188.23); /* Rexall */ --tui-color-rexall-rain-blue: oklch(87.81% 0.0553 193.35); /* Be Well promo */ --tui-color-rexall-rosy-red: oklch(69.56% 0.183 23.103); /* Rexall */ --tui-color-rexall-ruby-red: oklch(57.73% 0.2098 23.23); /* Rexall */ --tui-color-rexall-sage-green: oklch(88.81% 0.0662 132.17); /* Be Well */ --tui-color-rexall-seaside-blue: oklch(49.86% 0.0891 182.42); /* Rexall AODA */ --tui-color-rexall-shoreline-blue: oklch(63.95% 0.1102 188.54); /* Be Well */ --tui-color-rexall-silver-grey: oklch(66.37% 0.0049 0.0752); /* Be Well */ --tui-color-rexall-sky-blue: oklch(84.85% 0.0638 193.53); /* Rexall */ --tui-color-rexall-slate-grey: oklch(53.82% 0 0); --tui-color-rexall-steel: oklch(52.12% 0.0301 259.03); --tui-color-rexall-steel-100: oklch(95.8% 0.0077 249.5); --tui-color-rexall-steel-200: oklch(91% 0.0173 249.5); --tui-color-rexall-steel-300: oklch(86% 0.0277 249.5); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-steel-400: var(--tui-color-rexall-calming-blue-haze); --tui-color-rexall-steel-500: oklch(71.5% 0.0348 249.5); --tui-color-rexall-steel-600: oklch(63.5% 0.0315 249.5); --tui-color-rexall-steel-700: oklch(54.5% 0.0276 249.5); --tui-color-rexall-steel-800: oklch(45.5% 0.0237 249.5); --tui-color-rexall-steel-900: oklch(36.5% 0.0196 249.5); --tui-color-rexall-steel-1000: oklch(27% 0.0152 249.5); /* Sunshine Yellow — yellow anchor */ --tui-color-rexall-sunshine-yellow: oklch(86.72% 0.1773 90.85); /* Be Well promo */ --tui-color-rexall-taupe-red: oklch(75.68% 0.0781 13.998); /* Rexall */ --tui-color-rexall-tea-green: oklch(95.59% 0.0563 131.52); /* Be Well */ --tui-color-rexall-teal-blue: oklch(68.53% 0.0897 185.9); /* Terracotta Orange — orange anchor */ --tui-color-rexall-terracotta-orange: oklch(65.65% 0.1764 48.889); /* Tulip Pink — pink anchor */ --tui-color-rexall-tulip-pink: oklch(67.04% 0.1842 5.0399); /* Be Well promo */ --tui-color-rexall-vanilla-yellow: oklch(95.6% 0.072 105.12); /* Be Well */ --tui-color-rexall-venice-blue: oklch(40.54% 0.0851 236.88); /* Be Well */ --tui-color-rexall-washed-blue: oklch(78.7% 0.0619 185.5); /* Well Green — green anchor */ --tui-color-rexall-well-green: oklch(72.73% 0.1698 134.03); /* Digestive */ --tui-color-rexall-well-green-deep: oklch(50.28% 0.1219 142.99); --tui-color-surface-background: var(--tui-color-white); --tui-color-surface-background-brand: var(--tui-color-rexall-steel); /* A page or section tinted with the brand. Plain surface unless a brand sets a tint. */ --tui-color-surface-background-brand-subtle: var(--tui-color-surface-background); --tui-color-surface-background-neutral-subtle: var(--tui-color-neutral-100); --tui-color-tag-background-accent-green: var(--tui-color-green-100); --tui-color-tag-background-accent-magenta: var(--tui-color-magenta-100); --tui-color-tag-background-accent-neutral: var(--tui-color-neutral-100); --tui-color-tag-background-accent-orange: var(--tui-color-orange-100); --tui-color-tag-background-accent-pink: var(--tui-color-pink-100); --tui-color-tag-background-accent-steel: var(--tui-color-rexall-steel-100); --tui-color-tag-background-accent-teal: var(--tui-color-teal-100); --tui-color-tag-background-accent-yellow: var(--tui-color-yellow-100); --tui-color-tag-text-accent-green: var(--tui-color-green-800); --tui-color-tag-text-accent-magenta: var(--tui-color-magenta-800); --tui-color-tag-text-accent-neutral: var(--tui-color-neutral-800); --tui-color-tag-text-accent-orange: var(--tui-color-orange-800); --tui-color-tag-text-accent-pink: var(--tui-color-pink-800); --tui-color-tag-text-accent-steel: var(--tui-color-rexall-steel-800); --tui-color-tag-text-accent-teal: var(--tui-color-teal-800); --tui-color-tag-text-accent-yellow: var(--tui-color-yellow-800); --tui-color-teal-100: oklch(95.8% 0.0229 188.2); --tui-color-teal-200: oklch(91% 0.0422 188.2); --tui-color-teal-300: oklch(86% 0.0602 188.2); --tui-color-teal-400: oklch(79.5% 0.0818 188.2); /* Poolside Blue — teal anchor */ --tui-color-teal-500: var(--tui-color-rexall-poolside-blue); --tui-color-teal-600: oklch(63.5% 0.1071 188.2); --tui-color-teal-700: oklch(54.5% 0.0941 188.2); --tui-color-teal-800: oklch(45.5% 0.079 188.2); --tui-color-teal-900: oklch(36.5% 0.0634 188.2); --tui-color-teal-1000: oklch(27% 0.0469 188.2); --tui-color-text: var(--tui-color-neutral-900); --tui-color-text-brand: var(--tui-color-teal-800); --tui-color-text-brand-hovered: var(--tui-color-teal-900); --tui-color-text-brand-pressed: var(--tui-color-teal-900); --tui-color-text-danger: var(--tui-color-red-700); --tui-color-text-danger-hovered: var(--tui-color-red-800); --tui-color-text-danger-pressed: var(--tui-color-red-800); --tui-color-text-disabled: var(--tui-color-neutral-600); --tui-color-text-information: var(--tui-color-rexall-steel-700); --tui-color-text-inverse: var(--tui-color-white); --tui-color-text-neutral: var(--tui-color-neutral-900); --tui-color-text-neutral-hovered: var(--tui-color-neutral-800); --tui-color-text-neutral-pressed: var(--tui-color-neutral-1000); --tui-color-text-neutral-subtle: var(--tui-color-neutral-800); --tui-color-text-success: var(--tui-color-green-700); --tui-color-text-warning: var(--tui-color-yellow-700); --tui-color-transparent: oklch(0% 0 0 / 0); --tui-color-white: oklch(100% 0 0); --tui-color-yellow-100: oklch(95.8% 0.0354 90.8); --tui-color-yellow-200: oklch(91% 0.1029 90.8); /* Sunshine Yellow — yellow anchor */ --tui-color-yellow-300: var(--tui-color-rexall-sunshine-yellow); --tui-color-yellow-400: oklch(79.5% 0.1624 88.3); --tui-color-yellow-500: oklch(71.5% 0.1463 85.7); --tui-color-yellow-600: oklch(63.5% 0.1305 83.1); --tui-color-yellow-700: oklch(54.5% 0.1126 80.6); --tui-color-yellow-800: oklch(45.5% 0.0948 78); --tui-color-yellow-900: oklch(36.5% 0.0768 75.4); --tui-color-yellow-1000: oklch(27% 0.0575 72.8); --tui-elevation-shadow-overflow: 0px 0px 8px 0px oklch(27% 0 0 / 0.16), 0px 0px 1px 0px oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-perimeter: oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-spread: oklch(27% 0 0 / 0.16); --tui-elevation-shadow-overlay: 0px 8px 12px 0px oklch(27% 0 0 / 0.15), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-shadow-raised: 0px 1px 1px 0px oklch(27% 0 0 / 0.25), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-surface: var(--tui-color-transparent); --tui-elevation-surface-container: var(--tui-color-neutral-A100); --tui-elevation-surface-container-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-container-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay: var(--tui-color-transparent); --tui-elevation-surface-overlay-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-raised: var(--tui-color-transparent); --tui-elevation-surface-raised-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-raised-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-sunken: var(--tui-color-neutral-A100); --tui-font-family-mono: "Source Code Pro", ui-monospace, "Consolas", "Menlo", monospace; --tui-font-family-sans: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --tui-font-leading-050: 16px; --tui-font-leading-075: 20px; --tui-font-leading-100: 24px; --tui-font-leading-200: 28px; --tui-font-leading-300: 28px; --tui-font-leading-400: 32px; --tui-font-leading-500: 40px; --tui-font-leading-600: 48px; --tui-font-leading-700: 56px; --tui-font-leading-800: 68px; --tui-font-leading-900: 96px; --tui-font-leading-1000: 116px; --tui-font-size-050: 12px; --tui-font-size-075: 14px; --tui-font-size-100: 16px; --tui-font-size-200: 20px; --tui-font-size-300: 24px; --tui-font-size-400: 28px; --tui-font-size-500: 32px; --tui-font-size-600: 40px; --tui-font-size-700: 48px; --tui-font-size-800: 56px; --tui-font-size-900: 80px; --tui-font-size-1000: 96px; --tui-font-tracking-default: 0rem; --tui-font-weight-bold: 700; --tui-font-weight-medium: 500; --tui-font-weight-regular: 400; --tui-font-weight-semibold: 600; --tui-layer-0: 0; --tui-layer-10: 10; --tui-layer-20: 20; --tui-layer-30: 30; --tui-layer-40: 40; --tui-layer-50: 50; --tui-layer-60: 60; --tui-layer-base: var(--tui-layer-0); --tui-layer-modal: var(--tui-layer-50); --tui-layer-navigation: var(--tui-layer-10); --tui-layer-notification: var(--tui-layer-60); --tui-layer-overlay: var(--tui-layer-40); --tui-layer-popover: var(--tui-layer-30); --tui-layer-sticky: var(--tui-layer-20); --tui-motion-action-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-action-pressed: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-blanket-enter: var(--tui-motion-duration-long) 0ms var(--tui-motion-easing-inout-bold); --tui-motion-blanket-exit: var(--tui-motion-duration-medium) 0ms var(--tui-motion-easing-in-practical); --tui-motion-control-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-selected: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-toggle: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-curve-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6); --tui-motion-curve-inout-bold: cubic-bezier(0.4, 0, 0, 1); --tui-motion-curve-out-bold: cubic-bezier(0, 0.4, 0, 1); --tui-motion-curve-out-practical: cubic-bezier(0.4, 1, 0.6, 1); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-curve-spring: cubic-bezier(0.363, 1.102, 0.089, 1.043); --tui-motion-duration-0: 0ms; --tui-motion-duration-050: 50ms; --tui-motion-duration-100: 100ms; --tui-motion-duration-150: 150ms; --tui-motion-duration-200: 200ms; --tui-motion-duration-250: 250ms; --tui-motion-duration-400: 400ms; --tui-motion-duration-600: 600ms; --tui-motion-duration-instant: var(--tui-motion-duration-0); --tui-motion-duration-long: var(--tui-motion-duration-250); --tui-motion-duration-medium: var(--tui-motion-duration-200); --tui-motion-duration-short: var(--tui-motion-duration-150); --tui-motion-duration-xlong: var(--tui-motion-duration-400); --tui-motion-duration-xshort: var(--tui-motion-duration-100); --tui-motion-duration-xxlong: var(--tui-motion-duration-600); --tui-motion-duration-xxshort: var(--tui-motion-duration-050); --tui-motion-easing-in-practical: var(--tui-motion-curve-in-practical); --tui-motion-easing-inout-bold: var(--tui-motion-curve-inout-bold); --tui-motion-easing-out-bold: var(--tui-motion-curve-out-bold); --tui-motion-easing-out-practical: var(--tui-motion-curve-out-practical); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-easing-spring: var(--tui-motion-curve-spring); /* Corners of a small action (Button sm). */ --tui-shape-action-round: var(--tui-size-radius-lg); /* Corners of a medium action (Button md). */ --tui-shape-action-rounder: var(--tui-size-radius-xl); /* Corners of a large action (Button lg). The roundest action, not always a pill. */ --tui-shape-action-roundest: var(--tui-size-radius-2xl); /* Corners of a box that holds content, such as a card. Follows the surface corners unless a brand sets its own. */ --tui-shape-container-rounder: var(--tui-shape-surface-rounder); --tui-shape-rounder: var(--tui-size-radius-lg); --tui-shape-surface-rounder: var(--tui-size-radius-2xl); --tui-size-border-hairline: var(--tui-size-border-sm); --tui-size-border-md: 2px; --tui-size-border-narrow: var(--tui-size-border-md); --tui-size-border-sm: 1px; --tui-size-icon-lg: var(--tui-space-300); --tui-size-icon-md: var(--tui-space-250); --tui-size-icon-sm: var(--tui-space-200); --tui-size-icon-xs: var(--tui-space-100); --tui-size-radius-2xl: 16px; --tui-size-radius-3xl: 20px; --tui-size-radius-4xl: 24px; --tui-size-radius-full: 9999px; --tui-size-radius-lg: 8px; --tui-size-radius-md: 6px; --tui-size-radius-none: 0px; --tui-size-radius-sm: 4px; --tui-size-radius-xl: 12px; --tui-size-radius-xs: 2px; --tui-space-0: 0px; --tui-space-025: 2px; --tui-space-050: 4px; --tui-space-075: 6px; --tui-space-100: 8px; --tui-space-125: 10px; --tui-space-150: 12px; --tui-space-200: 16px; --tui-space-250: 20px; --tui-space-300: 24px; --tui-space-400: 32px; --tui-space-500: 40px; --tui-space-600: 48px; --tui-space-700: 56px; --tui-space-800: 64px; --tui-space-900: 72px; --tui-space-1000: 80px; --tui-space-1100: 88px; --tui-space-1200: 96px; --tui-space-1300: 104px; --tui-space-1400: 112px; --tui-space-1500: 120px; --tui-space-inline: var(--tui-space-100); --tui-space-inline-dense: var(--tui-space-050); --tui-space-inline-loose: var(--tui-space-150); --tui-space-inline-looser: var(--tui-space-250); --tui-space-inset: var(--tui-space-200); --tui-space-inset-dense: var(--tui-space-100); --tui-space-inset-loose: var(--tui-space-250); --tui-space-inset-looser: var(--tui-space-400); --tui-space-inset-squish: 12px 24px; --tui-space-inset-squish-dense: 8px 24px; --tui-space-inset-squish-loose: 16px 24px; --tui-space-inset-stretch: 8px 16px; --tui-space-inset-stretch-loosest: 16px 16px; --tui-space-negative-025: -2px; --tui-space-negative-050: -4px; --tui-space-negative-075: -6px; --tui-space-negative-100: -8px; --tui-space-negative-150: -12px; --tui-space-negative-200: -16px; --tui-space-negative-250: -20px; --tui-space-negative-300: -24px; --tui-space-negative-400: -32px; --tui-space-stack: var(--tui-space-200); --tui-space-stack-dense: var(--tui-space-100); --tui-space-stack-denser: var(--tui-space-050); --tui-space-stack-loose: var(--tui-space-300); --tui-space-stack-looser: var(--tui-space-400); --tui-space-stack-loosest: var(--tui-space-600); --tui-typography-action-label-lg: var(--tui-typography-action-label-lg-font-weight) var(--tui-typography-action-label-lg-font-size)/var(--tui-typography-action-label-lg-line-height) var(--tui-typography-action-label-lg-font-family); --tui-typography-action-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-action-label-lg-font-size: var(--tui-font-size-100); --tui-typography-action-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-lg-letter-spacing: 0px; --tui-typography-action-label-lg-line-height: 1.5; --tui-typography-action-label-md: var(--tui-typography-action-label-md-font-weight) var(--tui-typography-action-label-md-font-size)/var(--tui-typography-action-label-md-line-height) var(--tui-typography-action-label-md-font-family); --tui-typography-action-label-md-font-family: var(--tui-font-family-sans); --tui-typography-action-label-md-font-size: var(--tui-font-size-075); --tui-typography-action-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-md-letter-spacing: 0px; --tui-typography-action-label-md-line-height: 1.4286; --tui-typography-action-label-xl: var(--tui-typography-action-label-xl-font-weight) var(--tui-typography-action-label-xl-font-size)/var(--tui-typography-action-label-xl-line-height) var(--tui-typography-action-label-xl-font-family); --tui-typography-action-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-action-label-xl-font-size: var(--tui-font-size-200); --tui-typography-action-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-xl-letter-spacing: 0px; --tui-typography-action-label-xl-line-height: 1.4; --tui-typography-body-lg: var(--tui-typography-body-lg-font-weight) var(--tui-typography-body-lg-font-size)/var(--tui-typography-body-lg-line-height) var(--tui-typography-body-lg-font-family); --tui-typography-body-lg-font-family: var(--tui-font-family-sans); --tui-typography-body-lg-font-size: var(--tui-font-size-200); --tui-typography-body-lg-font-weight: var(--tui-font-weight-regular); --tui-typography-body-lg-letter-spacing: 0px; --tui-typography-body-lg-line-height: 1.4; --tui-typography-body-md: var(--tui-typography-body-md-font-weight) var(--tui-typography-body-md-font-size)/var(--tui-typography-body-md-line-height) var(--tui-typography-body-md-font-family); --tui-typography-body-md-font-family: var(--tui-font-family-sans); --tui-typography-body-md-font-size: var(--tui-font-size-100); --tui-typography-body-md-font-weight: var(--tui-font-weight-regular); --tui-typography-body-md-letter-spacing: 0px; --tui-typography-body-md-line-height: 1.5; --tui-typography-body-sm: var(--tui-typography-body-sm-font-weight) var(--tui-typography-body-sm-font-size)/var(--tui-typography-body-sm-line-height) var(--tui-typography-body-sm-font-family); --tui-typography-body-sm-font-family: var(--tui-font-family-sans); --tui-typography-body-sm-font-size: var(--tui-font-size-075); --tui-typography-body-sm-font-weight: var(--tui-font-weight-regular); --tui-typography-body-sm-letter-spacing: 0px; --tui-typography-body-sm-line-height: 1.4286; --tui-typography-body-xs: var(--tui-typography-body-xs-font-weight) var(--tui-typography-body-xs-font-size)/var(--tui-typography-body-xs-line-height) var(--tui-typography-body-xs-font-family); --tui-typography-body-xs-font-family: var(--tui-font-family-sans); --tui-typography-body-xs-font-size: var(--tui-font-size-050); --tui-typography-body-xs-font-weight: var(--tui-font-weight-regular); --tui-typography-body-xs-letter-spacing: 0px; --tui-typography-body-xs-line-height: 1.3333; --tui-typography-code-md: var(--tui-typography-code-md-font-weight) var(--tui-typography-code-md-font-size)/var(--tui-typography-code-md-line-height) var(--tui-typography-code-md-font-family); --tui-typography-code-md-font-family: var(--tui-font-family-mono); --tui-typography-code-md-font-size: var(--tui-font-size-075); --tui-typography-code-md-font-weight: var(--tui-font-weight-regular); --tui-typography-code-md-letter-spacing: 0px; --tui-typography-code-md-line-height: 1.4286; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md: var(--tui-typography-container-heading-md-font-weight) var(--tui-typography-container-heading-md-font-size)/var(--tui-typography-container-heading-md-line-height) var(--tui-typography-container-heading-md-font-family); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-family: var(--tui-font-family-sans); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-size: var(--tui-font-size-200); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-weight: var(--tui-font-weight-bold); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-letter-spacing: 0px; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-line-height: 1.4; --tui-typography-display-lg: var(--tui-typography-display-lg-font-weight) var(--tui-typography-display-lg-font-size)/var(--tui-typography-display-lg-line-height) var(--tui-typography-display-lg-font-family); --tui-typography-display-lg-font-family: var(--tui-font-family-sans); --tui-typography-display-lg-font-size: var(--tui-font-size-900); --tui-typography-display-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-display-lg-letter-spacing: -0.8px; --tui-typography-display-lg-line-height: 1.2; --tui-typography-display-md: var(--tui-typography-display-md-font-weight) var(--tui-typography-display-md-font-size)/var(--tui-typography-display-md-line-height) var(--tui-typography-display-md-font-family); --tui-typography-display-md-font-family: var(--tui-font-family-sans); --tui-typography-display-md-font-size: var(--tui-font-size-800); --tui-typography-display-md-font-weight: var(--tui-font-weight-bold); --tui-typography-display-md-letter-spacing: -0.56px; --tui-typography-display-md-line-height: 1.2143; --tui-typography-display-xl: var(--tui-typography-display-xl-font-weight) var(--tui-typography-display-xl-font-size)/var(--tui-typography-display-xl-line-height) var(--tui-typography-display-xl-font-family); --tui-typography-display-xl-font-family: var(--tui-font-family-sans); --tui-typography-display-xl-font-size: var(--tui-font-size-1000); --tui-typography-display-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-display-xl-letter-spacing: -0.96px; --tui-typography-display-xl-line-height: 1.2083; --tui-typography-heading-lg: var(--tui-typography-heading-lg-font-weight) var(--tui-typography-heading-lg-font-size)/var(--tui-typography-heading-lg-line-height) var(--tui-typography-heading-lg-font-family); --tui-typography-heading-lg-font-family: var(--tui-font-family-sans); --tui-typography-heading-lg-font-size: var(--tui-font-size-400); --tui-typography-heading-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-lg-letter-spacing: -0.28px; --tui-typography-heading-lg-line-height: 1.1429; --tui-typography-heading-md: var(--tui-typography-heading-md-font-weight) var(--tui-typography-heading-md-font-size)/var(--tui-typography-heading-md-line-height) var(--tui-typography-heading-md-font-family); --tui-typography-heading-md-font-family: var(--tui-font-family-sans); --tui-typography-heading-md-font-size: var(--tui-font-size-300); --tui-typography-heading-md-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-md-letter-spacing: 0px; --tui-typography-heading-md-line-height: 1.1667; --tui-typography-heading-sm: var(--tui-typography-heading-sm-font-weight) var(--tui-typography-heading-sm-font-size)/var(--tui-typography-heading-sm-line-height) var(--tui-typography-heading-sm-font-family); --tui-typography-heading-sm-font-family: var(--tui-font-family-sans); --tui-typography-heading-sm-font-size: var(--tui-font-size-200); --tui-typography-heading-sm-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-sm-letter-spacing: 0px; --tui-typography-heading-sm-line-height: 1.4; --tui-typography-heading-xl: var(--tui-typography-heading-xl-font-weight) var(--tui-typography-heading-xl-font-size)/var(--tui-typography-heading-xl-line-height) var(--tui-typography-heading-xl-font-family); --tui-typography-heading-xl-font-family: var(--tui-font-family-sans); --tui-typography-heading-xl-font-size: var(--tui-font-size-500); --tui-typography-heading-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-xl-letter-spacing: -0.32px; --tui-typography-heading-xl-line-height: 1.25; --tui-typography-label-lg: var(--tui-typography-label-lg-font-weight) var(--tui-typography-label-lg-font-size)/var(--tui-typography-label-lg-line-height) var(--tui-typography-label-lg-font-family); --tui-typography-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-label-lg-font-size: var(--tui-font-size-100); --tui-typography-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-lg-letter-spacing: 0px; --tui-typography-label-lg-line-height: 1.5; --tui-typography-label-md: var(--tui-typography-label-md-font-weight) var(--tui-typography-label-md-font-size)/var(--tui-typography-label-md-line-height) var(--tui-typography-label-md-font-family); --tui-typography-label-md-font-family: var(--tui-font-family-sans); --tui-typography-label-md-font-size: var(--tui-font-size-075); --tui-typography-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-md-letter-spacing: 0px; --tui-typography-label-md-line-height: 1.4286; --tui-typography-label-xl: var(--tui-typography-label-xl-font-weight) var(--tui-typography-label-xl-font-size)/var(--tui-typography-label-xl-line-height) var(--tui-typography-label-xl-font-family); --tui-typography-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-label-xl-font-size: var(--tui-font-size-200); --tui-typography-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-xl-letter-spacing: 0px; --tui-typography-label-xl-line-height: 1.4; } } @layer tokens { @media (prefers-color-scheme: dark) { :root:not([data-color-scheme="light"]) { --tui-color-background-accent-green: var(--tui-color-green-500); --tui-color-background-accent-green-bold: var(--tui-color-green-700); --tui-color-background-accent-green-subtle: var(--tui-color-green-500); --tui-color-background-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-background-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-background-accent-steel-subtle: var(--tui-color-rexall-steel-500); --tui-color-background-accent-teal: var(--tui-color-teal-500); --tui-color-background-accent-teal-bold: var(--tui-color-teal-700); --tui-color-background-accent-teal-subtle: var(--tui-color-teal-500); --tui-color-background-brand: var(--tui-color-teal-500); --tui-color-background-brand-bold: var(--tui-color-teal-700); --tui-color-background-brand-bold-hovered: var(--tui-color-teal-800); --tui-color-background-brand-bold-pressed: var(--tui-color-teal-900); --tui-color-background-brand-subtle: var(--tui-color-teal-100); --tui-color-background-brand-subtle-hovered: var(--tui-color-teal-200); --tui-color-background-brand-subtle-pressed: var(--tui-color-teal-300); --tui-color-background-danger: var(--tui-color-red-700); --tui-color-background-danger-bold: var(--tui-color-red-700); --tui-color-background-danger-hovered: var(--tui-color-red-800); --tui-color-background-danger-pressed: var(--tui-color-red-900); --tui-color-background-danger-subtle: var(--tui-color-red-100); --tui-color-background-danger-subtle-hovered: var(--tui-color-red-200); --tui-color-background-danger-subtle-pressed: var(--tui-color-red-300); --tui-color-background-disabled: var(--tui-color-neutral-100); --tui-color-background-hovered: var(--tui-color-neutral-100); --tui-color-background-information: var(--tui-color-rexall-steel-500); --tui-color-background-information-bold: var(--tui-color-rexall-steel-700); --tui-color-background-information-subtle: var(--tui-color-rexall-steel-100); --tui-color-background-inverse: var(--tui-color-neutral-900); --tui-color-background-inverse-hovered: var(--tui-color-neutral-1000); --tui-color-background-inverse-pressed: var(--tui-color-neutral-800); --tui-color-background-neutral: var(--tui-color-neutral-400); --tui-color-background-neutral-bold: var(--tui-color-neutral-700); --tui-color-background-neutral-hovered: var(--tui-color-neutral-300); --tui-color-background-neutral-pressed: var(--tui-color-neutral-500); --tui-color-background-neutral-subtle: var(--tui-color-neutral-200); --tui-color-background-neutral-subtle-hovered: var(--tui-color-neutral-100); --tui-color-background-neutral-subtle-pressed: var(--tui-color-neutral-300); --tui-color-background-pressed: var(--tui-color-neutral-200); --tui-color-background-selected: var(--tui-color-teal-100); --tui-color-background-success: var(--tui-color-green-500); --tui-color-background-success-bold: var(--tui-color-green-700); --tui-color-background-success-subtle: var(--tui-color-green-100); --tui-color-background-warning: var(--tui-color-yellow-300); --tui-color-background-warning-bold: var(--tui-color-yellow-300); --tui-color-background-warning-subtle: var(--tui-color-yellow-100); --tui-color-black: oklch(0% 0 0); --tui-color-blanket-background: var(--tui-color-neutral-900); --tui-color-border: var(--tui-color-neutral-300); --tui-color-border-accent-green: var(--tui-color-green-500); --tui-color-border-accent-green-bold: var(--tui-color-green-700); --tui-color-border-accent-green-subtle: var(--tui-color-green-300); --tui-color-border-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-border-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-border-accent-steel-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-accent-teal: var(--tui-color-teal-500); --tui-color-border-accent-teal-bold: var(--tui-color-teal-700); --tui-color-border-accent-teal-subtle: var(--tui-color-teal-300); --tui-color-border-brand: var(--tui-color-teal-700); --tui-color-border-brand-bold: var(--tui-color-teal-700); --tui-color-border-brand-hovered: var(--tui-color-teal-800); --tui-color-border-brand-pressed: var(--tui-color-teal-900); --tui-color-border-brand-subtle: var(--tui-color-teal-300); --tui-color-border-danger: var(--tui-color-red-600); --tui-color-border-danger-bold: var(--tui-color-red-700); --tui-color-border-danger-hovered: var(--tui-color-red-700); --tui-color-border-danger-pressed: var(--tui-color-red-800); --tui-color-border-danger-subtle: var(--tui-color-red-300); --tui-color-border-disabled: var(--tui-color-neutral-200); --tui-color-border-focus: var(--tui-color-neutral-1000); --tui-color-border-information: var(--tui-color-rexall-steel-600); --tui-color-border-information-bold: var(--tui-color-rexall-steel-700); --tui-color-border-information-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-inverse-focus: var(--tui-color-white); --tui-color-border-neutral: var(--tui-color-neutral-300); --tui-color-border-neutral-bold: var(--tui-color-neutral-600); --tui-color-border-neutral-bold-hovered: var(--tui-color-neutral-700); --tui-color-border-neutral-bold-pressed: var(--tui-color-neutral-800); --tui-color-border-neutral-hovered: var(--tui-color-neutral-200); --tui-color-border-neutral-pressed: var(--tui-color-neutral-400); --tui-color-border-neutral-subtle: var(--tui-color-neutral-300); --tui-color-border-neutral-subtlest: var(--tui-color-neutral-200); --tui-color-border-selected: var(--tui-color-teal-700); --tui-color-border-success: var(--tui-color-green-700); --tui-color-border-success-bold: var(--tui-color-green-700); --tui-color-border-success-subtle: var(--tui-color-green-300); --tui-color-border-warning: var(--tui-color-yellow-600); --tui-color-border-warning-bold: var(--tui-color-yellow-700); --tui-color-border-warning-subtle: var(--tui-color-yellow-300); --tui-color-container-background: var(--tui-color-white); --tui-color-container-background-accent-green: var(--tui-color-background-accent-green); --tui-color-container-background-accent-green-bold: var(--tui-color-background-accent-green-bold); --tui-color-container-background-accent-green-subtle: var(--tui-color-background-accent-green-subtle); --tui-color-container-background-accent-steel: var(--tui-color-background-accent-steel); --tui-color-container-background-accent-steel-bold: var(--tui-color-background-accent-steel-bold); --tui-color-container-background-accent-steel-subtle: var(--tui-color-background-accent-steel-subtle); --tui-color-container-background-accent-teal: var(--tui-color-background-accent-teal); --tui-color-container-background-accent-teal-bold: var(--tui-color-background-accent-teal-bold); --tui-color-container-background-accent-teal-subtle: var(--tui-color-background-accent-teal-subtle); --tui-color-container-background-brand: var(--tui-color-background-brand); --tui-color-container-background-brand-bold: var(--tui-color-background-brand-bold); --tui-color-container-background-brand-subtle: var(--tui-color-background-brand-subtle); --tui-color-container-background-danger: var(--tui-color-background-danger); --tui-color-container-background-danger-bold: var(--tui-color-background-danger-bold); --tui-color-container-background-danger-subtle: var(--tui-color-background-danger-subtle); --tui-color-container-background-information: var(--tui-color-background-information); --tui-color-container-background-information-bold: var(--tui-color-background-information-bold); --tui-color-container-background-information-subtle: var(--tui-color-background-information-subtle); --tui-color-container-background-neutral: var(--tui-color-background-neutral); --tui-color-container-background-neutral-bold: var(--tui-color-background-inverse); --tui-color-container-background-neutral-subtle: var(--tui-color-surface-background-neutral-subtle); --tui-color-container-background-success: var(--tui-color-background-success); --tui-color-container-background-success-bold: var(--tui-color-background-success-bold); --tui-color-container-background-success-subtle: var(--tui-color-background-success-subtle); --tui-color-container-background-warning: var(--tui-color-background-warning); --tui-color-container-background-warning-bold: var(--tui-color-background-warning-bold); --tui-color-container-background-warning-subtle: var(--tui-color-background-warning-subtle); --tui-color-container-border: var(--tui-color-neutral-300); --tui-color-container-border-accent-green: var(--tui-color-border-accent-green); --tui-color-container-border-accent-green-bold: var(--tui-color-border-accent-green-bold); --tui-color-container-border-accent-green-subtle: var(--tui-color-border-accent-green-subtle); --tui-color-container-border-accent-steel: var(--tui-color-border-accent-steel); --tui-color-container-border-accent-steel-bold: var(--tui-color-border-accent-steel-bold); --tui-color-container-border-accent-steel-subtle: var(--tui-color-border-accent-steel-subtle); --tui-color-container-border-accent-teal: var(--tui-color-border-accent-teal); --tui-color-container-border-accent-teal-bold: var(--tui-color-border-accent-teal-bold); --tui-color-container-border-accent-teal-subtle: var(--tui-color-border-accent-teal-subtle); --tui-color-container-border-brand: var(--tui-color-border-brand); --tui-color-container-border-brand-bold: var(--tui-color-border-brand-bold); --tui-color-container-border-brand-subtle: var(--tui-color-border-brand-subtle); --tui-color-container-border-danger: var(--tui-color-border-danger); --tui-color-container-border-danger-bold: var(--tui-color-border-danger-bold); --tui-color-container-border-danger-subtle: var(--tui-color-border-danger-subtle); --tui-color-container-border-information: var(--tui-color-border-information); --tui-color-container-border-information-bold: var(--tui-color-border-information-bold); --tui-color-container-border-information-subtle: var(--tui-color-border-information-subtle); --tui-color-container-border-neutral: var(--tui-color-border-neutral); --tui-color-container-border-neutral-bold: var(--tui-color-border-neutral-bold); --tui-color-container-border-neutral-subtle: var(--tui-color-border-neutral-subtle); --tui-color-container-border-success: var(--tui-color-border-success); --tui-color-container-border-success-bold: var(--tui-color-border-success-bold); --tui-color-container-border-success-subtle: var(--tui-color-border-success-subtle); --tui-color-container-border-warning: var(--tui-color-border-warning); --tui-color-container-border-warning-bold: var(--tui-color-border-warning-bold); --tui-color-container-border-warning-subtle: var(--tui-color-border-warning-subtle); /* Text inside a box that holds content, such as a card. */ --tui-color-container-text: var(--tui-color-text); /* Secondary text inside a box that holds content. */ --tui-color-container-text-neutral-subtle: var(--tui-color-text-neutral-subtle); --tui-color-green-100: oklch(95.8% 0.0339 134); --tui-color-green-200: oklch(91% 0.0654 134); --tui-color-green-300: oklch(86% 0.0956 134); --tui-color-green-400: oklch(79.5% 0.1328 134); --tui-color-green-500: var(--tui-color-rexall-well-green); --tui-color-green-600: oklch(63.5% 0.1512 134); --tui-color-green-700: oklch(54.5% 0.1328 134); --tui-color-green-800: oklch(45.5% 0.1139 134); --tui-color-green-900: oklch(36.5% 0.0944 134); --tui-color-green-1000: oklch(27% 0.0731 134); --tui-color-icon: var(--tui-color-neutral-900); --tui-color-icon-brand: var(--tui-color-teal-700); --tui-color-icon-danger: var(--tui-color-red-700); --tui-color-icon-disabled: var(--tui-color-neutral-600); --tui-color-icon-information: var(--tui-color-rexall-steel-700); --tui-color-icon-inverse: var(--tui-color-white); --tui-color-icon-neutral-subtle: var(--tui-color-neutral-700); --tui-color-icon-success: var(--tui-color-green-700); --tui-color-icon-warning: var(--tui-color-yellow-700); --tui-color-input-background: var(--tui-color-white); --tui-color-input-background-disabled: var(--tui-color-neutral-100); --tui-color-input-border: var(--tui-color-neutral-600); --tui-color-link-text: var(--tui-color-teal-700); --tui-color-link-text-hovered: var(--tui-color-teal-800); --tui-color-link-text-inverse: var(--tui-color-text-inverse); --tui-color-link-text-inverse-hovered: var(--tui-color-text-inverse); --tui-color-link-text-inverse-pressed: var(--tui-color-text-inverse); --tui-color-link-text-inverse-visited: var(--tui-color-text-inverse); --tui-color-link-text-neutral: var(--tui-color-text-neutral); --tui-color-link-text-neutral-hovered: var(--tui-color-text-neutral-hovered); --tui-color-link-text-neutral-pressed: var(--tui-color-text-neutral-pressed); --tui-color-link-text-neutral-visited: var(--tui-color-text-neutral); --tui-color-link-text-pressed: var(--tui-color-teal-800); --tui-color-link-text-visited: var(--tui-color-magenta-700); --tui-color-magenta-100: oklch(95.8% 0.0241 351.2); --tui-color-magenta-200: oklch(91% 0.0541 351.2); --tui-color-magenta-300: oklch(86% 0.0816 351.2); --tui-color-magenta-400: oklch(79.5% 0.1047 351.2); --tui-color-magenta-500: oklch(71.5% 0.13 351.2); --tui-color-magenta-600: oklch(63.5% 0.153 351.2); --tui-color-magenta-700: var(--tui-color-rexall-berry-purple); --tui-color-magenta-800: oklch(45.5% 0.1676 351.2); --tui-color-magenta-900: oklch(36.5% 0.1389 351.2); --tui-color-magenta-1000: oklch(27% 0.1075 351.2); --tui-color-neutral-100: oklch(95.8% 0 0); --tui-color-neutral-200: oklch(91% 0 0); --tui-color-neutral-300: oklch(86% 0 0); --tui-color-neutral-400: oklch(79.5% 0 0); --tui-color-neutral-500: oklch(71.5% 0 0); --tui-color-neutral-600: oklch(63.5% 0 0); --tui-color-neutral-700: oklch(54.5% 0 0); --tui-color-neutral-800: oklch(45.5% 0 0); --tui-color-neutral-900: var(--tui-color-rexall-charcoal-grey); --tui-color-neutral-1000: oklch(27% 0 0); --tui-color-neutral-A100: oklch(10.78% 0 0 / 0.056); --tui-color-neutral-A200: oklch(7.66% 0 0 / 0.118); --tui-color-neutral-A300: oklch(6.76% 0 0 / 0.182); --tui-color-neutral-A400: oklch(6.59% 0 0 / 0.264); --tui-color-neutral-A500: oklch(5.18% 0 0 / 0.362); --tui-color-neutral-A600: oklch(1.98% 0 0 / 0.457); --tui-color-neutral-A700: oklch(0% 0 0 / 0.561); --tui-color-neutral-A800: oklch(3.14% 0 0 / 0.661); --tui-color-neutral-A900: oklch(4.4% 0 0 / 0.797); --tui-color-neutral-A1000: oklch(3.14% 0 0 / 0.85); --tui-color-orange-100: oklch(95.8% 0.023 48.9); --tui-color-orange-200: oklch(91% 0.0514 48.9); --tui-color-orange-300: oklch(86% 0.0834 48.9); --tui-color-orange-400: oklch(79.5% 0.1188 48.9); --tui-color-orange-500: oklch(71.5% 0.1528 48.9); --tui-color-orange-600: var(--tui-color-rexall-terracotta-orange); --tui-color-orange-700: oklch(54.5% 0.1463 48.9); --tui-color-orange-800: oklch(45.5% 0.1222 48.9); --tui-color-orange-900: oklch(36.5% 0.098 48.9); --tui-color-orange-1000: oklch(27% 0.0725 48.9); --tui-color-pink-100: oklch(95.8% 0.0216 5); --tui-color-pink-200: oklch(91% 0.0485 5); --tui-color-pink-300: oklch(86% 0.0792 5); --tui-color-pink-400: oklch(79.5% 0.1241 5); --tui-color-pink-500: oklch(71.5% 0.1644 5); --tui-color-pink-600: var(--tui-color-rexall-tulip-pink); --tui-color-pink-700: oklch(54.5% 0.1544 5); --tui-color-pink-800: oklch(45.5% 0.1324 5); --tui-color-pink-900: oklch(36.5% 0.1098 5); --tui-color-pink-1000: oklch(27% 0.085 5); --tui-color-red-100: oklch(95.8% 0.0206 23.7); --tui-color-red-200: oklch(91% 0.0462 23.7); --tui-color-red-300: oklch(86% 0.0754 23.7); --tui-color-red-400: oklch(79.5% 0.1177 23.7); --tui-color-red-500: oklch(71.5% 0.1783 23.7); --tui-color-red-600: var(--tui-color-rexall-ladybug-red); --tui-color-red-700: oklch(54.5% 0.2142 23.7); --tui-color-red-800: oklch(45.5% 0.1837 23.7); --tui-color-red-900: oklch(36.5% 0.1475 23.7); --tui-color-red-1000: oklch(27% 0.1091 23.7); /* Be Well */ --tui-color-rexall-apricot-orange: oklch(71.4% 0.1525 56.134); /* Skin Health */ --tui-color-rexall-ash: oklch(90% 0.0027 106.45); /* Rexall */ --tui-color-rexall-banana-yellow: oklch(95.33% 0.0757 95.318); /* Berry Purple — magenta anchor */ --tui-color-rexall-berry-purple: oklch(51.17% 0.1852 351.18); /* Rexall */ --tui-color-rexall-blush-pink: oklch(58.59% 0.1586 4.6101); /* Be Well promo */ --tui-color-rexall-blush-red: oklch(86.8% 0.055 21.054); /* Be Well promo */ --tui-color-rexall-burgundy-red: oklch(45.44% 0.1821 28.716); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-calming-blue-haze: oklch(80.84% 0.0387 249.54); /* Charcoal Grey — neutral anchor */ --tui-color-rexall-charcoal-grey: oklch(32.5% 0 0); /* Rexall */ --tui-color-rexall-cloud-grey: oklch(84.52% 0 0); /* Be Well promo */ --tui-color-rexall-cream-yellow: oklch(99.23% 0.0159 98.986); /* Be Well promo */ --tui-color-rexall-daisy-yellow: oklch(92.84% 0.1204 106.48); /* Rexall AODA */ --tui-color-rexall-deep-ocean: oklch(42.34% 0.0723 194.8); /* Be Well promo */ --tui-color-rexall-dusty-red: oklch(50.13% 0.1755 23.713); /* Be Well */ --tui-color-rexall-evergreen: oklch(51.19% 0.0835 138.17); /* Rexall */ --tui-color-rexall-fog-grey: oklch(97.91% 0 0); /* Be Well */ --tui-color-rexall-forest-green: oklch(45.31% 0.073 146.02); /* Be Well */ --tui-color-rexall-garden-green: oklch(54.77% 0.0953 138.22); /* Be Well */ --tui-color-rexall-granite-grey: oklch(53.49% 0.005 17.313); /* Rexall */ --tui-color-rexall-grapefruit: oklch(95.01% 0.0848 98.329); /* Rexall */ --tui-color-rexall-grass-green: oklch(78.93% 0.1268 133.59); /* Be Well */ --tui-color-rexall-grey-blue: oklch(59.99% 0.0929 185.62); /* Be Well promo */ --tui-color-rexall-highlighter-yellow: oklch(92.14% 0.1824 105.41); /* Digestive */ --tui-color-rexall-immunity-orange: oklch(71.08% 0.1395 51.737); /* Ladybug Red — red anchor */ --tui-color-rexall-ladybug-red: oklch(60.41% 0.2338 23.742); /* Rexall AODA */ --tui-color-rexall-lakeside-blue: oklch(52.74% 0.0872 187.63); /* Be Well */ --tui-color-rexall-lavender-purple: oklch(89.47% 0.0375 342.55); /* Rexall */ --tui-color-rexall-lemon-yellow: oklch(88.28% 0.1811 94.46); /* Rexall */ --tui-color-rexall-light-blush-pink: oklch(85.56% 0.0673 10.506); /* Rexall */ --tui-color-rexall-light-drizzle: oklch(91.04% 0.0336 191.96); /* Be Well promo */ --tui-color-rexall-light-red: oklch(94.46% 0.0142 12.025); /* Be Well */ --tui-color-rexall-lime-green: oklch(75.39% 0.152 134.81); /* Be Well promo */ --tui-color-rexall-lipstick-red: oklch(62.76% 0.2141 23.004); /* Be Well */ --tui-color-rexall-melon-orange: oklch(85.06% 0.0788 62.059); /* Rexall */ --tui-color-rexall-mist-blue: oklch(95.8% 0.0169 192.36); /* Be Well */ --tui-color-rexall-moss-green: oklch(64.94% 0.1505 133.89); /* Be Well */ --tui-color-rexall-night-grey: oklch(42.18% 0.0031 48.66); /* Be Well */ --tui-color-rexall-pansy-purple: oklch(79.17% 0.0759 344.13); /* Be Well */ --tui-color-rexall-peachy-orange: oklch(92.38% 0.0385 63.533); /* Be Well promo */ --tui-color-rexall-pinky-red: oklch(96.91% 0.0151 17.418); /* Be Well */ --tui-color-rexall-plum-purple: oklch(59.35% 0.1561 347.67); /* Poolside Blue — teal anchor */ --tui-color-rexall-poolside-blue: oklch(68.76% 0.1147 188.23); /* Rexall */ --tui-color-rexall-rain-blue: oklch(87.81% 0.0553 193.35); /* Be Well promo */ --tui-color-rexall-rosy-red: oklch(69.56% 0.183 23.103); /* Rexall */ --tui-color-rexall-ruby-red: oklch(57.73% 0.2098 23.23); /* Rexall */ --tui-color-rexall-sage-green: oklch(88.81% 0.0662 132.17); /* Be Well */ --tui-color-rexall-seaside-blue: oklch(49.86% 0.0891 182.42); /* Rexall AODA */ --tui-color-rexall-shoreline-blue: oklch(63.95% 0.1102 188.54); /* Be Well */ --tui-color-rexall-silver-grey: oklch(66.37% 0.0049 0.0752); /* Be Well */ --tui-color-rexall-sky-blue: oklch(84.85% 0.0638 193.53); /* Rexall */ --tui-color-rexall-slate-grey: oklch(53.82% 0 0); --tui-color-rexall-steel: oklch(52.12% 0.0301 259.03); --tui-color-rexall-steel-100: oklch(95.8% 0.0077 249.5); --tui-color-rexall-steel-200: oklch(91% 0.0173 249.5); --tui-color-rexall-steel-300: oklch(86% 0.0277 249.5); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-steel-400: var(--tui-color-rexall-calming-blue-haze); --tui-color-rexall-steel-500: oklch(71.5% 0.0348 249.5); --tui-color-rexall-steel-600: oklch(63.5% 0.0315 249.5); --tui-color-rexall-steel-700: oklch(54.5% 0.0276 249.5); --tui-color-rexall-steel-800: oklch(45.5% 0.0237 249.5); --tui-color-rexall-steel-900: oklch(36.5% 0.0196 249.5); --tui-color-rexall-steel-1000: oklch(27% 0.0152 249.5); /* Sunshine Yellow — yellow anchor */ --tui-color-rexall-sunshine-yellow: oklch(86.72% 0.1773 90.85); /* Be Well promo */ --tui-color-rexall-taupe-red: oklch(75.68% 0.0781 13.998); /* Rexall */ --tui-color-rexall-tea-green: oklch(95.59% 0.0563 131.52); /* Be Well */ --tui-color-rexall-teal-blue: oklch(68.53% 0.0897 185.9); /* Terracotta Orange — orange anchor */ --tui-color-rexall-terracotta-orange: oklch(65.65% 0.1764 48.889); /* Tulip Pink — pink anchor */ --tui-color-rexall-tulip-pink: oklch(67.04% 0.1842 5.0399); /* Be Well promo */ --tui-color-rexall-vanilla-yellow: oklch(95.6% 0.072 105.12); /* Be Well */ --tui-color-rexall-venice-blue: oklch(40.54% 0.0851 236.88); /* Be Well */ --tui-color-rexall-washed-blue: oklch(78.7% 0.0619 185.5); /* Well Green — green anchor */ --tui-color-rexall-well-green: oklch(72.73% 0.1698 134.03); /* Digestive */ --tui-color-rexall-well-green-deep: oklch(50.28% 0.1219 142.99); --tui-color-surface-background: var(--tui-color-white); --tui-color-surface-background-brand: var(--tui-color-rexall-steel); /* A page or section tinted with the brand. Plain surface unless a brand sets a tint. */ --tui-color-surface-background-brand-subtle: var(--tui-color-surface-background); --tui-color-surface-background-neutral-subtle: var(--tui-color-neutral-100); --tui-color-tag-background-accent-green: var(--tui-color-green-100); --tui-color-tag-background-accent-magenta: var(--tui-color-magenta-100); --tui-color-tag-background-accent-neutral: var(--tui-color-neutral-100); --tui-color-tag-background-accent-orange: var(--tui-color-orange-100); --tui-color-tag-background-accent-pink: var(--tui-color-pink-100); --tui-color-tag-background-accent-steel: var(--tui-color-rexall-steel-100); --tui-color-tag-background-accent-teal: var(--tui-color-teal-100); --tui-color-tag-background-accent-yellow: var(--tui-color-yellow-100); --tui-color-tag-text-accent-green: var(--tui-color-green-800); --tui-color-tag-text-accent-magenta: var(--tui-color-magenta-800); --tui-color-tag-text-accent-neutral: var(--tui-color-neutral-800); --tui-color-tag-text-accent-orange: var(--tui-color-orange-800); --tui-color-tag-text-accent-pink: var(--tui-color-pink-800); --tui-color-tag-text-accent-steel: var(--tui-color-rexall-steel-800); --tui-color-tag-text-accent-teal: var(--tui-color-teal-800); --tui-color-tag-text-accent-yellow: var(--tui-color-yellow-800); --tui-color-teal-100: oklch(95.8% 0.0229 188.2); --tui-color-teal-200: oklch(91% 0.0422 188.2); --tui-color-teal-300: oklch(86% 0.0602 188.2); --tui-color-teal-400: oklch(79.5% 0.0818 188.2); /* Poolside Blue — teal anchor */ --tui-color-teal-500: var(--tui-color-rexall-poolside-blue); --tui-color-teal-600: oklch(63.5% 0.1071 188.2); --tui-color-teal-700: oklch(54.5% 0.0941 188.2); --tui-color-teal-800: oklch(45.5% 0.079 188.2); --tui-color-teal-900: oklch(36.5% 0.0634 188.2); --tui-color-teal-1000: oklch(27% 0.0469 188.2); --tui-color-text: var(--tui-color-neutral-900); --tui-color-text-brand: var(--tui-color-teal-800); --tui-color-text-brand-hovered: var(--tui-color-teal-900); --tui-color-text-brand-pressed: var(--tui-color-teal-900); --tui-color-text-danger: var(--tui-color-red-700); --tui-color-text-danger-hovered: var(--tui-color-red-800); --tui-color-text-danger-pressed: var(--tui-color-red-800); --tui-color-text-disabled: var(--tui-color-neutral-600); --tui-color-text-information: var(--tui-color-rexall-steel-700); --tui-color-text-inverse: var(--tui-color-white); --tui-color-text-neutral: var(--tui-color-neutral-900); --tui-color-text-neutral-hovered: var(--tui-color-neutral-800); --tui-color-text-neutral-pressed: var(--tui-color-neutral-1000); --tui-color-text-neutral-subtle: var(--tui-color-neutral-800); --tui-color-text-success: var(--tui-color-green-700); --tui-color-text-warning: var(--tui-color-yellow-700); --tui-color-transparent: oklch(0% 0 0 / 0); --tui-color-white: oklch(100% 0 0); --tui-color-yellow-100: oklch(95.8% 0.0354 90.8); --tui-color-yellow-200: oklch(91% 0.1029 90.8); /* Sunshine Yellow — yellow anchor */ --tui-color-yellow-300: var(--tui-color-rexall-sunshine-yellow); --tui-color-yellow-400: oklch(79.5% 0.1624 88.3); --tui-color-yellow-500: oklch(71.5% 0.1463 85.7); --tui-color-yellow-600: oklch(63.5% 0.1305 83.1); --tui-color-yellow-700: oklch(54.5% 0.1126 80.6); --tui-color-yellow-800: oklch(45.5% 0.0948 78); --tui-color-yellow-900: oklch(36.5% 0.0768 75.4); --tui-color-yellow-1000: oklch(27% 0.0575 72.8); --tui-elevation-shadow-overflow: 0px 0px 8px 0px oklch(27% 0 0 / 0.16), 0px 0px 1px 0px oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-perimeter: oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-spread: oklch(27% 0 0 / 0.16); --tui-elevation-shadow-overlay: 0px 8px 12px 0px oklch(27% 0 0 / 0.15), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-shadow-raised: 0px 1px 1px 0px oklch(27% 0 0 / 0.25), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-surface: var(--tui-color-transparent); --tui-elevation-surface-container: var(--tui-color-neutral-A100); --tui-elevation-surface-container-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-container-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay: var(--tui-color-transparent); --tui-elevation-surface-overlay-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-raised: var(--tui-color-transparent); --tui-elevation-surface-raised-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-raised-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-sunken: var(--tui-color-neutral-A100); --tui-font-family-mono: "Source Code Pro", ui-monospace, "Consolas", "Menlo", monospace; --tui-font-family-sans: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --tui-font-leading-050: 16px; --tui-font-leading-075: 20px; --tui-font-leading-100: 24px; --tui-font-leading-200: 28px; --tui-font-leading-300: 28px; --tui-font-leading-400: 32px; --tui-font-leading-500: 40px; --tui-font-leading-600: 48px; --tui-font-leading-700: 56px; --tui-font-leading-800: 68px; --tui-font-leading-900: 96px; --tui-font-leading-1000: 116px; --tui-font-size-050: 12px; --tui-font-size-075: 14px; --tui-font-size-100: 16px; --tui-font-size-200: 20px; --tui-font-size-300: 24px; --tui-font-size-400: 28px; --tui-font-size-500: 32px; --tui-font-size-600: 40px; --tui-font-size-700: 48px; --tui-font-size-800: 56px; --tui-font-size-900: 80px; --tui-font-size-1000: 96px; --tui-font-tracking-default: 0rem; --tui-font-weight-bold: 700; --tui-font-weight-medium: 500; --tui-font-weight-regular: 400; --tui-font-weight-semibold: 600; --tui-layer-0: 0; --tui-layer-10: 10; --tui-layer-20: 20; --tui-layer-30: 30; --tui-layer-40: 40; --tui-layer-50: 50; --tui-layer-60: 60; --tui-layer-base: var(--tui-layer-0); --tui-layer-modal: var(--tui-layer-50); --tui-layer-navigation: var(--tui-layer-10); --tui-layer-notification: var(--tui-layer-60); --tui-layer-overlay: var(--tui-layer-40); --tui-layer-popover: var(--tui-layer-30); --tui-layer-sticky: var(--tui-layer-20); --tui-motion-action-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-action-pressed: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-blanket-enter: var(--tui-motion-duration-long) 0ms var(--tui-motion-easing-inout-bold); --tui-motion-blanket-exit: var(--tui-motion-duration-medium) 0ms var(--tui-motion-easing-in-practical); --tui-motion-control-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-selected: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-toggle: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-curve-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6); --tui-motion-curve-inout-bold: cubic-bezier(0.4, 0, 0, 1); --tui-motion-curve-out-bold: cubic-bezier(0, 0.4, 0, 1); --tui-motion-curve-out-practical: cubic-bezier(0.4, 1, 0.6, 1); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-curve-spring: cubic-bezier(0.363, 1.102, 0.089, 1.043); --tui-motion-duration-0: 0ms; --tui-motion-duration-050: 50ms; --tui-motion-duration-100: 100ms; --tui-motion-duration-150: 150ms; --tui-motion-duration-200: 200ms; --tui-motion-duration-250: 250ms; --tui-motion-duration-400: 400ms; --tui-motion-duration-600: 600ms; --tui-motion-duration-instant: var(--tui-motion-duration-0); --tui-motion-duration-long: var(--tui-motion-duration-250); --tui-motion-duration-medium: var(--tui-motion-duration-200); --tui-motion-duration-short: var(--tui-motion-duration-150); --tui-motion-duration-xlong: var(--tui-motion-duration-400); --tui-motion-duration-xshort: var(--tui-motion-duration-100); --tui-motion-duration-xxlong: var(--tui-motion-duration-600); --tui-motion-duration-xxshort: var(--tui-motion-duration-050); --tui-motion-easing-in-practical: var(--tui-motion-curve-in-practical); --tui-motion-easing-inout-bold: var(--tui-motion-curve-inout-bold); --tui-motion-easing-out-bold: var(--tui-motion-curve-out-bold); --tui-motion-easing-out-practical: var(--tui-motion-curve-out-practical); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-easing-spring: var(--tui-motion-curve-spring); /* Corners of a small action (Button sm). */ --tui-shape-action-round: var(--tui-size-radius-lg); /* Corners of a medium action (Button md). */ --tui-shape-action-rounder: var(--tui-size-radius-xl); /* Corners of a large action (Button lg). The roundest action, not always a pill. */ --tui-shape-action-roundest: var(--tui-size-radius-2xl); /* Corners of a box that holds content, such as a card. Follows the surface corners unless a brand sets its own. */ --tui-shape-container-rounder: var(--tui-shape-surface-rounder); --tui-shape-rounder: var(--tui-size-radius-lg); --tui-shape-surface-rounder: var(--tui-size-radius-2xl); --tui-size-border-hairline: var(--tui-size-border-sm); --tui-size-border-md: 2px; --tui-size-border-narrow: var(--tui-size-border-md); --tui-size-border-sm: 1px; --tui-size-icon-lg: var(--tui-space-300); --tui-size-icon-md: var(--tui-space-250); --tui-size-icon-sm: var(--tui-space-200); --tui-size-icon-xs: var(--tui-space-100); --tui-size-radius-2xl: 16px; --tui-size-radius-3xl: 20px; --tui-size-radius-4xl: 24px; --tui-size-radius-full: 9999px; --tui-size-radius-lg: 8px; --tui-size-radius-md: 6px; --tui-size-radius-none: 0px; --tui-size-radius-sm: 4px; --tui-size-radius-xl: 12px; --tui-size-radius-xs: 2px; --tui-space-0: 0px; --tui-space-025: 2px; --tui-space-050: 4px; --tui-space-075: 6px; --tui-space-100: 8px; --tui-space-125: 10px; --tui-space-150: 12px; --tui-space-200: 16px; --tui-space-250: 20px; --tui-space-300: 24px; --tui-space-400: 32px; --tui-space-500: 40px; --tui-space-600: 48px; --tui-space-700: 56px; --tui-space-800: 64px; --tui-space-900: 72px; --tui-space-1000: 80px; --tui-space-1100: 88px; --tui-space-1200: 96px; --tui-space-1300: 104px; --tui-space-1400: 112px; --tui-space-1500: 120px; --tui-space-inline: var(--tui-space-100); --tui-space-inline-dense: var(--tui-space-050); --tui-space-inline-loose: var(--tui-space-150); --tui-space-inline-looser: var(--tui-space-250); --tui-space-inset: var(--tui-space-200); --tui-space-inset-dense: var(--tui-space-100); --tui-space-inset-loose: var(--tui-space-250); --tui-space-inset-looser: var(--tui-space-400); --tui-space-inset-squish: 12px 24px; --tui-space-inset-squish-dense: 8px 24px; --tui-space-inset-squish-loose: 16px 24px; --tui-space-inset-stretch: 8px 16px; --tui-space-inset-stretch-loosest: 16px 16px; --tui-space-negative-025: -2px; --tui-space-negative-050: -4px; --tui-space-negative-075: -6px; --tui-space-negative-100: -8px; --tui-space-negative-150: -12px; --tui-space-negative-200: -16px; --tui-space-negative-250: -20px; --tui-space-negative-300: -24px; --tui-space-negative-400: -32px; --tui-space-stack: var(--tui-space-200); --tui-space-stack-dense: var(--tui-space-100); --tui-space-stack-denser: var(--tui-space-050); --tui-space-stack-loose: var(--tui-space-300); --tui-space-stack-looser: var(--tui-space-400); --tui-space-stack-loosest: var(--tui-space-600); --tui-typography-action-label-lg: var(--tui-typography-action-label-lg-font-weight) var(--tui-typography-action-label-lg-font-size)/var(--tui-typography-action-label-lg-line-height) var(--tui-typography-action-label-lg-font-family); --tui-typography-action-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-action-label-lg-font-size: var(--tui-font-size-100); --tui-typography-action-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-lg-letter-spacing: 0px; --tui-typography-action-label-lg-line-height: 1.5; --tui-typography-action-label-md: var(--tui-typography-action-label-md-font-weight) var(--tui-typography-action-label-md-font-size)/var(--tui-typography-action-label-md-line-height) var(--tui-typography-action-label-md-font-family); --tui-typography-action-label-md-font-family: var(--tui-font-family-sans); --tui-typography-action-label-md-font-size: var(--tui-font-size-075); --tui-typography-action-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-md-letter-spacing: 0px; --tui-typography-action-label-md-line-height: 1.4286; --tui-typography-action-label-xl: var(--tui-typography-action-label-xl-font-weight) var(--tui-typography-action-label-xl-font-size)/var(--tui-typography-action-label-xl-line-height) var(--tui-typography-action-label-xl-font-family); --tui-typography-action-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-action-label-xl-font-size: var(--tui-font-size-200); --tui-typography-action-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-xl-letter-spacing: 0px; --tui-typography-action-label-xl-line-height: 1.4; --tui-typography-body-lg: var(--tui-typography-body-lg-font-weight) var(--tui-typography-body-lg-font-size)/var(--tui-typography-body-lg-line-height) var(--tui-typography-body-lg-font-family); --tui-typography-body-lg-font-family: var(--tui-font-family-sans); --tui-typography-body-lg-font-size: var(--tui-font-size-200); --tui-typography-body-lg-font-weight: var(--tui-font-weight-regular); --tui-typography-body-lg-letter-spacing: 0px; --tui-typography-body-lg-line-height: 1.4; --tui-typography-body-md: var(--tui-typography-body-md-font-weight) var(--tui-typography-body-md-font-size)/var(--tui-typography-body-md-line-height) var(--tui-typography-body-md-font-family); --tui-typography-body-md-font-family: var(--tui-font-family-sans); --tui-typography-body-md-font-size: var(--tui-font-size-100); --tui-typography-body-md-font-weight: var(--tui-font-weight-regular); --tui-typography-body-md-letter-spacing: 0px; --tui-typography-body-md-line-height: 1.5; --tui-typography-body-sm: var(--tui-typography-body-sm-font-weight) var(--tui-typography-body-sm-font-size)/var(--tui-typography-body-sm-line-height) var(--tui-typography-body-sm-font-family); --tui-typography-body-sm-font-family: var(--tui-font-family-sans); --tui-typography-body-sm-font-size: var(--tui-font-size-075); --tui-typography-body-sm-font-weight: var(--tui-font-weight-regular); --tui-typography-body-sm-letter-spacing: 0px; --tui-typography-body-sm-line-height: 1.4286; --tui-typography-body-xs: var(--tui-typography-body-xs-font-weight) var(--tui-typography-body-xs-font-size)/var(--tui-typography-body-xs-line-height) var(--tui-typography-body-xs-font-family); --tui-typography-body-xs-font-family: var(--tui-font-family-sans); --tui-typography-body-xs-font-size: var(--tui-font-size-050); --tui-typography-body-xs-font-weight: var(--tui-font-weight-regular); --tui-typography-body-xs-letter-spacing: 0px; --tui-typography-body-xs-line-height: 1.3333; --tui-typography-code-md: var(--tui-typography-code-md-font-weight) var(--tui-typography-code-md-font-size)/var(--tui-typography-code-md-line-height) var(--tui-typography-code-md-font-family); --tui-typography-code-md-font-family: var(--tui-font-family-mono); --tui-typography-code-md-font-size: var(--tui-font-size-075); --tui-typography-code-md-font-weight: var(--tui-font-weight-regular); --tui-typography-code-md-letter-spacing: 0px; --tui-typography-code-md-line-height: 1.4286; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md: var(--tui-typography-container-heading-md-font-weight) var(--tui-typography-container-heading-md-font-size)/var(--tui-typography-container-heading-md-line-height) var(--tui-typography-container-heading-md-font-family); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-family: var(--tui-font-family-sans); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-size: var(--tui-font-size-200); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-weight: var(--tui-font-weight-bold); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-letter-spacing: 0px; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-line-height: 1.4; --tui-typography-display-lg: var(--tui-typography-display-lg-font-weight) var(--tui-typography-display-lg-font-size)/var(--tui-typography-display-lg-line-height) var(--tui-typography-display-lg-font-family); --tui-typography-display-lg-font-family: var(--tui-font-family-sans); --tui-typography-display-lg-font-size: var(--tui-font-size-900); --tui-typography-display-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-display-lg-letter-spacing: -0.8px; --tui-typography-display-lg-line-height: 1.2; --tui-typography-display-md: var(--tui-typography-display-md-font-weight) var(--tui-typography-display-md-font-size)/var(--tui-typography-display-md-line-height) var(--tui-typography-display-md-font-family); --tui-typography-display-md-font-family: var(--tui-font-family-sans); --tui-typography-display-md-font-size: var(--tui-font-size-800); --tui-typography-display-md-font-weight: var(--tui-font-weight-bold); --tui-typography-display-md-letter-spacing: -0.56px; --tui-typography-display-md-line-height: 1.2143; --tui-typography-display-xl: var(--tui-typography-display-xl-font-weight) var(--tui-typography-display-xl-font-size)/var(--tui-typography-display-xl-line-height) var(--tui-typography-display-xl-font-family); --tui-typography-display-xl-font-family: var(--tui-font-family-sans); --tui-typography-display-xl-font-size: var(--tui-font-size-1000); --tui-typography-display-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-display-xl-letter-spacing: -0.96px; --tui-typography-display-xl-line-height: 1.2083; --tui-typography-heading-lg: var(--tui-typography-heading-lg-font-weight) var(--tui-typography-heading-lg-font-size)/var(--tui-typography-heading-lg-line-height) var(--tui-typography-heading-lg-font-family); --tui-typography-heading-lg-font-family: var(--tui-font-family-sans); --tui-typography-heading-lg-font-size: var(--tui-font-size-400); --tui-typography-heading-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-lg-letter-spacing: -0.28px; --tui-typography-heading-lg-line-height: 1.1429; --tui-typography-heading-md: var(--tui-typography-heading-md-font-weight) var(--tui-typography-heading-md-font-size)/var(--tui-typography-heading-md-line-height) var(--tui-typography-heading-md-font-family); --tui-typography-heading-md-font-family: var(--tui-font-family-sans); --tui-typography-heading-md-font-size: var(--tui-font-size-300); --tui-typography-heading-md-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-md-letter-spacing: 0px; --tui-typography-heading-md-line-height: 1.1667; --tui-typography-heading-sm: var(--tui-typography-heading-sm-font-weight) var(--tui-typography-heading-sm-font-size)/var(--tui-typography-heading-sm-line-height) var(--tui-typography-heading-sm-font-family); --tui-typography-heading-sm-font-family: var(--tui-font-family-sans); --tui-typography-heading-sm-font-size: var(--tui-font-size-200); --tui-typography-heading-sm-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-sm-letter-spacing: 0px; --tui-typography-heading-sm-line-height: 1.4; --tui-typography-heading-xl: var(--tui-typography-heading-xl-font-weight) var(--tui-typography-heading-xl-font-size)/var(--tui-typography-heading-xl-line-height) var(--tui-typography-heading-xl-font-family); --tui-typography-heading-xl-font-family: var(--tui-font-family-sans); --tui-typography-heading-xl-font-size: var(--tui-font-size-500); --tui-typography-heading-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-xl-letter-spacing: -0.32px; --tui-typography-heading-xl-line-height: 1.25; --tui-typography-label-lg: var(--tui-typography-label-lg-font-weight) var(--tui-typography-label-lg-font-size)/var(--tui-typography-label-lg-line-height) var(--tui-typography-label-lg-font-family); --tui-typography-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-label-lg-font-size: var(--tui-font-size-100); --tui-typography-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-lg-letter-spacing: 0px; --tui-typography-label-lg-line-height: 1.5; --tui-typography-label-md: var(--tui-typography-label-md-font-weight) var(--tui-typography-label-md-font-size)/var(--tui-typography-label-md-line-height) var(--tui-typography-label-md-font-family); --tui-typography-label-md-font-family: var(--tui-font-family-sans); --tui-typography-label-md-font-size: var(--tui-font-size-075); --tui-typography-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-md-letter-spacing: 0px; --tui-typography-label-md-line-height: 1.4286; --tui-typography-label-xl: var(--tui-typography-label-xl-font-weight) var(--tui-typography-label-xl-font-size)/var(--tui-typography-label-xl-line-height) var(--tui-typography-label-xl-font-family); --tui-typography-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-label-xl-font-size: var(--tui-font-size-200); --tui-typography-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-xl-letter-spacing: 0px; --tui-typography-label-xl-line-height: 1.4; } } } @layer tokens { :root[data-color-scheme="dark"][data-sub-theme="skin"] { --tui-color-background-accent-green: var(--tui-color-green-500); --tui-color-background-accent-green-bold: var(--tui-color-green-700); --tui-color-background-accent-green-subtle: var(--tui-color-green-500); --tui-color-background-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-background-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-background-accent-steel-subtle: var(--tui-color-rexall-steel-400); --tui-color-background-accent-teal: var(--tui-color-teal-500); --tui-color-background-accent-teal-bold: var(--tui-color-teal-700); --tui-color-background-accent-teal-subtle: var(--tui-color-teal-500); --tui-color-background-brand: var(--tui-color-teal-500); --tui-color-background-brand-bold: var(--tui-color-teal-700); --tui-color-background-brand-bold-hovered: var(--tui-color-teal-800); --tui-color-background-brand-bold-pressed: var(--tui-color-teal-900); --tui-color-background-brand-subtle: var(--tui-color-teal-100); --tui-color-background-brand-subtle-hovered: var(--tui-color-teal-200); --tui-color-background-brand-subtle-pressed: var(--tui-color-teal-300); --tui-color-background-danger: var(--tui-color-red-700); --tui-color-background-danger-bold: var(--tui-color-red-700); --tui-color-background-danger-hovered: var(--tui-color-red-800); --tui-color-background-danger-pressed: var(--tui-color-red-900); --tui-color-background-danger-subtle: var(--tui-color-red-100); --tui-color-background-danger-subtle-hovered: var(--tui-color-red-200); --tui-color-background-danger-subtle-pressed: var(--tui-color-red-300); --tui-color-background-disabled: var(--tui-color-neutral-100); --tui-color-background-hovered: var(--tui-color-neutral-100); --tui-color-background-information: var(--tui-color-rexall-steel-500); --tui-color-background-information-bold: var(--tui-color-rexall-steel-700); --tui-color-background-information-subtle: var(--tui-color-rexall-steel-100); --tui-color-background-inverse: var(--tui-color-neutral-900); --tui-color-background-inverse-hovered: var(--tui-color-neutral-1000); --tui-color-background-inverse-pressed: var(--tui-color-neutral-800); --tui-color-background-neutral: var(--tui-color-neutral-400); --tui-color-background-neutral-bold: var(--tui-color-neutral-700); --tui-color-background-neutral-hovered: var(--tui-color-neutral-300); --tui-color-background-neutral-pressed: var(--tui-color-neutral-500); --tui-color-background-neutral-subtle: var(--tui-color-neutral-200); --tui-color-background-neutral-subtle-hovered: var(--tui-color-neutral-100); --tui-color-background-neutral-subtle-pressed: var(--tui-color-neutral-300); --tui-color-background-pressed: var(--tui-color-neutral-200); --tui-color-background-selected: var(--tui-color-teal-100); --tui-color-background-success: var(--tui-color-green-500); --tui-color-background-success-bold: var(--tui-color-green-700); --tui-color-background-success-subtle: var(--tui-color-green-100); --tui-color-background-warning: var(--tui-color-yellow-300); --tui-color-background-warning-bold: var(--tui-color-yellow-300); --tui-color-background-warning-subtle: var(--tui-color-yellow-100); --tui-color-black: oklch(0% 0 0); --tui-color-blanket-background: var(--tui-color-neutral-900); --tui-color-border: var(--tui-color-neutral-300); --tui-color-border-accent-green: var(--tui-color-green-500); --tui-color-border-accent-green-bold: var(--tui-color-green-700); --tui-color-border-accent-green-subtle: var(--tui-color-green-300); --tui-color-border-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-border-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-border-accent-steel-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-accent-teal: var(--tui-color-teal-500); --tui-color-border-accent-teal-bold: var(--tui-color-teal-700); --tui-color-border-accent-teal-subtle: var(--tui-color-teal-300); --tui-color-border-brand: var(--tui-color-teal-700); --tui-color-border-brand-bold: var(--tui-color-teal-700); --tui-color-border-brand-hovered: var(--tui-color-teal-800); --tui-color-border-brand-pressed: var(--tui-color-teal-900); --tui-color-border-brand-subtle: var(--tui-color-teal-300); --tui-color-border-danger: var(--tui-color-red-600); --tui-color-border-danger-bold: var(--tui-color-red-700); --tui-color-border-danger-hovered: var(--tui-color-red-700); --tui-color-border-danger-pressed: var(--tui-color-red-800); --tui-color-border-danger-subtle: var(--tui-color-red-300); --tui-color-border-disabled: var(--tui-color-neutral-200); --tui-color-border-focus: var(--tui-color-neutral-1000); --tui-color-border-information: var(--tui-color-rexall-steel-600); --tui-color-border-information-bold: var(--tui-color-rexall-steel-700); --tui-color-border-information-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-inverse-focus: var(--tui-color-white); --tui-color-border-neutral: var(--tui-color-neutral-300); --tui-color-border-neutral-bold: var(--tui-color-neutral-600); --tui-color-border-neutral-bold-hovered: var(--tui-color-neutral-700); --tui-color-border-neutral-bold-pressed: var(--tui-color-neutral-800); --tui-color-border-neutral-hovered: var(--tui-color-neutral-200); --tui-color-border-neutral-pressed: var(--tui-color-neutral-400); --tui-color-border-neutral-subtle: var(--tui-color-neutral-300); --tui-color-border-neutral-subtlest: var(--tui-color-neutral-200); --tui-color-border-selected: var(--tui-color-teal-700); --tui-color-border-success: var(--tui-color-green-700); --tui-color-border-success-bold: var(--tui-color-green-700); --tui-color-border-success-subtle: var(--tui-color-green-300); --tui-color-border-warning: var(--tui-color-yellow-600); --tui-color-border-warning-bold: var(--tui-color-yellow-700); --tui-color-border-warning-subtle: var(--tui-color-yellow-300); --tui-color-container-background: var(--tui-color-white); --tui-color-container-background-accent-green: var(--tui-color-background-accent-green); --tui-color-container-background-accent-green-bold: var(--tui-color-background-accent-green-bold); --tui-color-container-background-accent-green-subtle: var(--tui-color-background-accent-green-subtle); --tui-color-container-background-accent-steel: var(--tui-color-background-accent-steel); --tui-color-container-background-accent-steel-bold: var(--tui-color-background-accent-steel-bold); --tui-color-container-background-accent-steel-subtle: var(--tui-color-background-accent-steel-subtle); --tui-color-container-background-accent-teal: var(--tui-color-background-accent-teal); --tui-color-container-background-accent-teal-bold: var(--tui-color-background-accent-teal-bold); --tui-color-container-background-accent-teal-subtle: var(--tui-color-background-accent-teal-subtle); --tui-color-container-background-brand: var(--tui-color-background-brand); --tui-color-container-background-brand-bold: var(--tui-color-background-brand-bold); --tui-color-container-background-brand-subtle: var(--tui-color-background-brand-subtle); --tui-color-container-background-danger: var(--tui-color-background-danger); --tui-color-container-background-danger-bold: var(--tui-color-background-danger-bold); --tui-color-container-background-danger-subtle: var(--tui-color-background-danger-subtle); --tui-color-container-background-information: var(--tui-color-background-information); --tui-color-container-background-information-bold: var(--tui-color-background-information-bold); --tui-color-container-background-information-subtle: var(--tui-color-background-information-subtle); --tui-color-container-background-neutral: var(--tui-color-background-neutral); --tui-color-container-background-neutral-bold: var(--tui-color-background-inverse); --tui-color-container-background-neutral-subtle: var(--tui-color-surface-background-neutral-subtle); --tui-color-container-background-success: var(--tui-color-background-success); --tui-color-container-background-success-bold: var(--tui-color-background-success-bold); --tui-color-container-background-success-subtle: var(--tui-color-background-success-subtle); --tui-color-container-background-warning: var(--tui-color-background-warning); --tui-color-container-background-warning-bold: var(--tui-color-background-warning-bold); --tui-color-container-background-warning-subtle: var(--tui-color-background-warning-subtle); --tui-color-container-border: var(--tui-color-neutral-300); --tui-color-container-border-accent-green: var(--tui-color-border-accent-green); --tui-color-container-border-accent-green-bold: var(--tui-color-border-accent-green-bold); --tui-color-container-border-accent-green-subtle: var(--tui-color-border-accent-green-subtle); --tui-color-container-border-accent-steel: var(--tui-color-border-accent-steel); --tui-color-container-border-accent-steel-bold: var(--tui-color-border-accent-steel-bold); --tui-color-container-border-accent-steel-subtle: var(--tui-color-border-accent-steel-subtle); --tui-color-container-border-accent-teal: var(--tui-color-border-accent-teal); --tui-color-container-border-accent-teal-bold: var(--tui-color-border-accent-teal-bold); --tui-color-container-border-accent-teal-subtle: var(--tui-color-border-accent-teal-subtle); --tui-color-container-border-brand: var(--tui-color-border-brand); --tui-color-container-border-brand-bold: var(--tui-color-border-brand-bold); --tui-color-container-border-brand-subtle: var(--tui-color-border-brand-subtle); --tui-color-container-border-danger: var(--tui-color-border-danger); --tui-color-container-border-danger-bold: var(--tui-color-border-danger-bold); --tui-color-container-border-danger-subtle: var(--tui-color-border-danger-subtle); --tui-color-container-border-information: var(--tui-color-border-information); --tui-color-container-border-information-bold: var(--tui-color-border-information-bold); --tui-color-container-border-information-subtle: var(--tui-color-border-information-subtle); --tui-color-container-border-neutral: var(--tui-color-border-neutral); --tui-color-container-border-neutral-bold: var(--tui-color-border-neutral-bold); --tui-color-container-border-neutral-subtle: var(--tui-color-border-neutral-subtle); --tui-color-container-border-success: var(--tui-color-border-success); --tui-color-container-border-success-bold: var(--tui-color-border-success-bold); --tui-color-container-border-success-subtle: var(--tui-color-border-success-subtle); --tui-color-container-border-warning: var(--tui-color-border-warning); --tui-color-container-border-warning-bold: var(--tui-color-border-warning-bold); --tui-color-container-border-warning-subtle: var(--tui-color-border-warning-subtle); /* Text inside a box that holds content, such as a card. */ --tui-color-container-text: var(--tui-color-text); /* Secondary text inside a box that holds content. */ --tui-color-container-text-neutral-subtle: var(--tui-color-text-neutral-subtle); --tui-color-green-100: oklch(95.8% 0.0339 134); --tui-color-green-200: oklch(91% 0.0654 134); --tui-color-green-300: oklch(86% 0.0956 134); --tui-color-green-400: oklch(79.5% 0.1328 134); --tui-color-green-500: var(--tui-color-rexall-well-green); --tui-color-green-600: oklch(63.5% 0.1512 134); --tui-color-green-700: oklch(54.5% 0.1328 134); --tui-color-green-800: oklch(45.5% 0.1139 134); --tui-color-green-900: oklch(36.5% 0.0944 134); --tui-color-green-1000: oklch(27% 0.0731 134); --tui-color-icon: var(--tui-color-neutral-900); --tui-color-icon-brand: var(--tui-color-teal-700); --tui-color-icon-danger: var(--tui-color-red-700); --tui-color-icon-disabled: var(--tui-color-neutral-600); --tui-color-icon-information: var(--tui-color-rexall-steel-700); --tui-color-icon-inverse: var(--tui-color-white); --tui-color-icon-neutral-subtle: var(--tui-color-neutral-700); --tui-color-icon-success: var(--tui-color-green-700); --tui-color-icon-warning: var(--tui-color-yellow-700); --tui-color-input-background: var(--tui-color-white); --tui-color-input-background-disabled: var(--tui-color-neutral-100); --tui-color-input-border: var(--tui-color-neutral-600); --tui-color-link-text: var(--tui-color-teal-700); --tui-color-link-text-hovered: var(--tui-color-teal-800); --tui-color-link-text-inverse: var(--tui-color-text-inverse); --tui-color-link-text-inverse-hovered: var(--tui-color-text-inverse); --tui-color-link-text-inverse-pressed: var(--tui-color-text-inverse); --tui-color-link-text-inverse-visited: var(--tui-color-text-inverse); --tui-color-link-text-neutral: var(--tui-color-text-neutral); --tui-color-link-text-neutral-hovered: var(--tui-color-text-neutral-hovered); --tui-color-link-text-neutral-pressed: var(--tui-color-text-neutral-pressed); --tui-color-link-text-neutral-visited: var(--tui-color-text-neutral); --tui-color-link-text-pressed: var(--tui-color-teal-800); --tui-color-link-text-visited: var(--tui-color-magenta-700); --tui-color-magenta-100: oklch(95.8% 0.0241 351.2); --tui-color-magenta-200: oklch(91% 0.0541 351.2); --tui-color-magenta-300: oklch(86% 0.0816 351.2); --tui-color-magenta-400: oklch(79.5% 0.1047 351.2); --tui-color-magenta-500: oklch(71.5% 0.13 351.2); --tui-color-magenta-600: oklch(63.5% 0.153 351.2); --tui-color-magenta-700: var(--tui-color-rexall-berry-purple); --tui-color-magenta-800: oklch(45.5% 0.1676 351.2); --tui-color-magenta-900: oklch(36.5% 0.1389 351.2); --tui-color-magenta-1000: oklch(27% 0.1075 351.2); --tui-color-neutral-100: oklch(95.8% 0 0); --tui-color-neutral-200: oklch(91% 0 0); --tui-color-neutral-300: oklch(86% 0 0); --tui-color-neutral-400: oklch(79.5% 0 0); --tui-color-neutral-500: oklch(71.5% 0 0); --tui-color-neutral-600: oklch(63.5% 0 0); --tui-color-neutral-700: oklch(54.5% 0 0); --tui-color-neutral-800: oklch(45.5% 0 0); --tui-color-neutral-900: var(--tui-color-rexall-charcoal-grey); --tui-color-neutral-1000: oklch(27% 0 0); --tui-color-neutral-A100: oklch(10.78% 0 0 / 0.056); --tui-color-neutral-A200: oklch(7.66% 0 0 / 0.118); --tui-color-neutral-A300: oklch(6.76% 0 0 / 0.182); --tui-color-neutral-A400: oklch(6.59% 0 0 / 0.264); --tui-color-neutral-A500: oklch(5.18% 0 0 / 0.362); --tui-color-neutral-A600: oklch(1.98% 0 0 / 0.457); --tui-color-neutral-A700: oklch(0% 0 0 / 0.561); --tui-color-neutral-A800: oklch(3.14% 0 0 / 0.661); --tui-color-neutral-A900: oklch(4.4% 0 0 / 0.797); --tui-color-neutral-A1000: oklch(3.14% 0 0 / 0.85); --tui-color-orange-100: oklch(95.8% 0.023 48.9); --tui-color-orange-200: oklch(91% 0.0514 48.9); --tui-color-orange-300: oklch(86% 0.0834 48.9); --tui-color-orange-400: oklch(79.5% 0.1188 48.9); --tui-color-orange-500: oklch(71.5% 0.1528 48.9); --tui-color-orange-600: var(--tui-color-rexall-terracotta-orange); --tui-color-orange-700: oklch(54.5% 0.1463 48.9); --tui-color-orange-800: oklch(45.5% 0.1222 48.9); --tui-color-orange-900: oklch(36.5% 0.098 48.9); --tui-color-orange-1000: oklch(27% 0.0725 48.9); --tui-color-pink-100: oklch(95.8% 0.0216 5); --tui-color-pink-200: oklch(91% 0.0485 5); --tui-color-pink-300: oklch(86% 0.0792 5); --tui-color-pink-400: oklch(79.5% 0.1241 5); --tui-color-pink-500: oklch(71.5% 0.1644 5); --tui-color-pink-600: var(--tui-color-rexall-tulip-pink); --tui-color-pink-700: oklch(54.5% 0.1544 5); --tui-color-pink-800: oklch(45.5% 0.1324 5); --tui-color-pink-900: oklch(36.5% 0.1098 5); --tui-color-pink-1000: oklch(27% 0.085 5); --tui-color-red-100: oklch(95.8% 0.0206 23.7); --tui-color-red-200: oklch(91% 0.0462 23.7); --tui-color-red-300: oklch(86% 0.0754 23.7); --tui-color-red-400: oklch(79.5% 0.1177 23.7); --tui-color-red-500: oklch(71.5% 0.1783 23.7); --tui-color-red-600: var(--tui-color-rexall-ladybug-red); --tui-color-red-700: oklch(54.5% 0.2142 23.7); --tui-color-red-800: oklch(45.5% 0.1837 23.7); --tui-color-red-900: oklch(36.5% 0.1475 23.7); --tui-color-red-1000: oklch(27% 0.1091 23.7); /* Be Well */ --tui-color-rexall-apricot-orange: oklch(71.4% 0.1525 56.134); /* Skin Health */ --tui-color-rexall-ash: oklch(90% 0.0027 106.45); /* Rexall */ --tui-color-rexall-banana-yellow: oklch(95.33% 0.0757 95.318); /* Berry Purple — magenta anchor */ --tui-color-rexall-berry-purple: oklch(51.17% 0.1852 351.18); /* Rexall */ --tui-color-rexall-blush-pink: oklch(58.59% 0.1586 4.6101); /* Be Well promo */ --tui-color-rexall-blush-red: oklch(86.8% 0.055 21.054); /* Be Well promo */ --tui-color-rexall-burgundy-red: oklch(45.44% 0.1821 28.716); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-calming-blue-haze: oklch(80.84% 0.0387 249.54); /* Charcoal Grey — neutral anchor */ --tui-color-rexall-charcoal-grey: oklch(32.5% 0 0); /* Rexall */ --tui-color-rexall-cloud-grey: oklch(84.52% 0 0); /* Be Well promo */ --tui-color-rexall-cream-yellow: oklch(99.23% 0.0159 98.986); /* Be Well promo */ --tui-color-rexall-daisy-yellow: oklch(92.84% 0.1204 106.48); /* Rexall AODA */ --tui-color-rexall-deep-ocean: oklch(42.34% 0.0723 194.8); /* Be Well promo */ --tui-color-rexall-dusty-red: oklch(50.13% 0.1755 23.713); /* Be Well */ --tui-color-rexall-evergreen: oklch(51.19% 0.0835 138.17); /* Rexall */ --tui-color-rexall-fog-grey: oklch(97.91% 0 0); /* Be Well */ --tui-color-rexall-forest-green: oklch(45.31% 0.073 146.02); /* Be Well */ --tui-color-rexall-garden-green: oklch(54.77% 0.0953 138.22); /* Be Well */ --tui-color-rexall-granite-grey: oklch(53.49% 0.005 17.313); /* Rexall */ --tui-color-rexall-grapefruit: oklch(95.01% 0.0848 98.329); /* Rexall */ --tui-color-rexall-grass-green: oklch(78.93% 0.1268 133.59); /* Be Well */ --tui-color-rexall-grey-blue: oklch(59.99% 0.0929 185.62); /* Be Well promo */ --tui-color-rexall-highlighter-yellow: oklch(92.14% 0.1824 105.41); /* Digestive */ --tui-color-rexall-immunity-orange: oklch(71.08% 0.1395 51.737); /* Ladybug Red — red anchor */ --tui-color-rexall-ladybug-red: oklch(60.41% 0.2338 23.742); /* Rexall AODA */ --tui-color-rexall-lakeside-blue: oklch(52.74% 0.0872 187.63); /* Be Well */ --tui-color-rexall-lavender-purple: oklch(89.47% 0.0375 342.55); /* Rexall */ --tui-color-rexall-lemon-yellow: oklch(88.28% 0.1811 94.46); /* Rexall */ --tui-color-rexall-light-blush-pink: oklch(85.56% 0.0673 10.506); /* Rexall */ --tui-color-rexall-light-drizzle: oklch(91.04% 0.0336 191.96); /* Be Well promo */ --tui-color-rexall-light-red: oklch(94.46% 0.0142 12.025); /* Be Well */ --tui-color-rexall-lime-green: oklch(75.39% 0.152 134.81); /* Be Well promo */ --tui-color-rexall-lipstick-red: oklch(62.76% 0.2141 23.004); /* Be Well */ --tui-color-rexall-melon-orange: oklch(85.06% 0.0788 62.059); /* Rexall */ --tui-color-rexall-mist-blue: oklch(95.8% 0.0169 192.36); /* Be Well */ --tui-color-rexall-moss-green: oklch(64.94% 0.1505 133.89); /* Be Well */ --tui-color-rexall-night-grey: oklch(42.18% 0.0031 48.66); /* Be Well */ --tui-color-rexall-pansy-purple: oklch(79.17% 0.0759 344.13); /* Be Well */ --tui-color-rexall-peachy-orange: oklch(92.38% 0.0385 63.533); /* Be Well promo */ --tui-color-rexall-pinky-red: oklch(96.91% 0.0151 17.418); /* Be Well */ --tui-color-rexall-plum-purple: oklch(59.35% 0.1561 347.67); /* Poolside Blue — teal anchor */ --tui-color-rexall-poolside-blue: oklch(68.76% 0.1147 188.23); /* Rexall */ --tui-color-rexall-rain-blue: oklch(87.81% 0.0553 193.35); /* Be Well promo */ --tui-color-rexall-rosy-red: oklch(69.56% 0.183 23.103); /* Rexall */ --tui-color-rexall-ruby-red: oklch(57.73% 0.2098 23.23); /* Rexall */ --tui-color-rexall-sage-green: oklch(88.81% 0.0662 132.17); /* Be Well */ --tui-color-rexall-seaside-blue: oklch(49.86% 0.0891 182.42); /* Rexall AODA */ --tui-color-rexall-shoreline-blue: oklch(63.95% 0.1102 188.54); /* Be Well */ --tui-color-rexall-silver-grey: oklch(66.37% 0.0049 0.0752); /* Be Well */ --tui-color-rexall-sky-blue: oklch(84.85% 0.0638 193.53); /* Rexall */ --tui-color-rexall-slate-grey: oklch(53.82% 0 0); --tui-color-rexall-steel: oklch(52.12% 0.0301 259.03); --tui-color-rexall-steel-100: oklch(95.8% 0.0077 249.5); --tui-color-rexall-steel-200: oklch(91% 0.0173 249.5); --tui-color-rexall-steel-300: oklch(86% 0.0277 249.5); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-steel-400: var(--tui-color-rexall-calming-blue-haze); --tui-color-rexall-steel-500: oklch(71.5% 0.0348 249.5); --tui-color-rexall-steel-600: oklch(63.5% 0.0315 249.5); --tui-color-rexall-steel-700: oklch(54.5% 0.0276 249.5); --tui-color-rexall-steel-800: oklch(45.5% 0.0237 249.5); --tui-color-rexall-steel-900: oklch(36.5% 0.0196 249.5); --tui-color-rexall-steel-1000: oklch(27% 0.0152 249.5); /* Sunshine Yellow — yellow anchor */ --tui-color-rexall-sunshine-yellow: oklch(86.72% 0.1773 90.85); /* Be Well promo */ --tui-color-rexall-taupe-red: oklch(75.68% 0.0781 13.998); /* Rexall */ --tui-color-rexall-tea-green: oklch(95.59% 0.0563 131.52); /* Be Well */ --tui-color-rexall-teal-blue: oklch(68.53% 0.0897 185.9); /* Terracotta Orange — orange anchor */ --tui-color-rexall-terracotta-orange: oklch(65.65% 0.1764 48.889); /* Tulip Pink — pink anchor */ --tui-color-rexall-tulip-pink: oklch(67.04% 0.1842 5.0399); /* Be Well promo */ --tui-color-rexall-vanilla-yellow: oklch(95.6% 0.072 105.12); /* Be Well */ --tui-color-rexall-venice-blue: oklch(40.54% 0.0851 236.88); /* Be Well */ --tui-color-rexall-washed-blue: oklch(78.7% 0.0619 185.5); /* Well Green — green anchor */ --tui-color-rexall-well-green: oklch(72.73% 0.1698 134.03); /* Digestive */ --tui-color-rexall-well-green-deep: oklch(50.28% 0.1219 142.99); --tui-color-surface-background: var(--tui-color-white); --tui-color-surface-background-brand: var(--tui-color-pink-200); /* A page or section tinted with the brand. Plain surface unless a brand sets a tint. */ --tui-color-surface-background-brand-subtle: var(--tui-color-surface-background); --tui-color-surface-background-neutral-subtle: var(--tui-color-neutral-100); --tui-color-tag-background-accent-green: var(--tui-color-green-100); --tui-color-tag-background-accent-magenta: var(--tui-color-magenta-100); --tui-color-tag-background-accent-neutral: var(--tui-color-neutral-100); --tui-color-tag-background-accent-orange: var(--tui-color-orange-100); --tui-color-tag-background-accent-pink: var(--tui-color-pink-100); --tui-color-tag-background-accent-steel: var(--tui-color-rexall-steel-100); --tui-color-tag-background-accent-teal: var(--tui-color-teal-100); --tui-color-tag-background-accent-yellow: var(--tui-color-yellow-100); --tui-color-tag-text-accent-green: var(--tui-color-green-800); --tui-color-tag-text-accent-magenta: var(--tui-color-magenta-800); --tui-color-tag-text-accent-neutral: var(--tui-color-neutral-800); --tui-color-tag-text-accent-orange: var(--tui-color-orange-800); --tui-color-tag-text-accent-pink: var(--tui-color-pink-800); --tui-color-tag-text-accent-steel: var(--tui-color-rexall-steel-800); --tui-color-tag-text-accent-teal: var(--tui-color-teal-800); --tui-color-tag-text-accent-yellow: var(--tui-color-yellow-800); --tui-color-teal-100: oklch(95.8% 0.0229 188.2); --tui-color-teal-200: oklch(91% 0.0422 188.2); --tui-color-teal-300: oklch(86% 0.0602 188.2); --tui-color-teal-400: oklch(79.5% 0.0818 188.2); /* Poolside Blue — teal anchor */ --tui-color-teal-500: var(--tui-color-rexall-poolside-blue); --tui-color-teal-600: oklch(63.5% 0.1071 188.2); --tui-color-teal-700: oklch(54.5% 0.0941 188.2); --tui-color-teal-800: oklch(45.5% 0.079 188.2); --tui-color-teal-900: oklch(36.5% 0.0634 188.2); --tui-color-teal-1000: oklch(27% 0.0469 188.2); --tui-color-text: var(--tui-color-neutral-900); --tui-color-text-brand: var(--tui-color-teal-800); --tui-color-text-brand-hovered: var(--tui-color-teal-900); --tui-color-text-brand-pressed: var(--tui-color-teal-900); --tui-color-text-danger: var(--tui-color-red-700); --tui-color-text-danger-hovered: var(--tui-color-red-800); --tui-color-text-danger-pressed: var(--tui-color-red-800); --tui-color-text-disabled: var(--tui-color-neutral-600); --tui-color-text-information: var(--tui-color-rexall-steel-700); --tui-color-text-inverse: var(--tui-color-white); --tui-color-text-neutral: var(--tui-color-neutral-900); --tui-color-text-neutral-hovered: var(--tui-color-neutral-800); --tui-color-text-neutral-pressed: var(--tui-color-neutral-1000); --tui-color-text-neutral-subtle: var(--tui-color-neutral-800); --tui-color-text-success: var(--tui-color-green-700); --tui-color-text-warning: var(--tui-color-yellow-700); --tui-color-transparent: oklch(0% 0 0 / 0); --tui-color-white: oklch(100% 0 0); --tui-color-yellow-100: oklch(95.8% 0.0354 90.8); --tui-color-yellow-200: oklch(91% 0.1029 90.8); /* Sunshine Yellow — yellow anchor */ --tui-color-yellow-300: var(--tui-color-rexall-sunshine-yellow); --tui-color-yellow-400: oklch(79.5% 0.1624 88.3); --tui-color-yellow-500: oklch(71.5% 0.1463 85.7); --tui-color-yellow-600: oklch(63.5% 0.1305 83.1); --tui-color-yellow-700: oklch(54.5% 0.1126 80.6); --tui-color-yellow-800: oklch(45.5% 0.0948 78); --tui-color-yellow-900: oklch(36.5% 0.0768 75.4); --tui-color-yellow-1000: oklch(27% 0.0575 72.8); --tui-elevation-shadow-overflow: 0px 0px 8px 0px oklch(27% 0 0 / 0.16), 0px 0px 1px 0px oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-perimeter: oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-spread: oklch(27% 0 0 / 0.16); --tui-elevation-shadow-overlay: 0px 8px 12px 0px oklch(27% 0 0 / 0.15), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-shadow-raised: 0px 1px 1px 0px oklch(27% 0 0 / 0.25), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-surface: var(--tui-color-transparent); --tui-elevation-surface-container: var(--tui-color-neutral-A100); --tui-elevation-surface-container-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-container-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay: var(--tui-color-transparent); --tui-elevation-surface-overlay-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-raised: var(--tui-color-transparent); --tui-elevation-surface-raised-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-raised-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-sunken: var(--tui-color-neutral-A100); --tui-font-family-mono: "Source Code Pro", ui-monospace, "Consolas", "Menlo", monospace; --tui-font-family-sans: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --tui-font-leading-050: 16px; --tui-font-leading-075: 20px; --tui-font-leading-100: 24px; --tui-font-leading-200: 28px; --tui-font-leading-300: 28px; --tui-font-leading-400: 32px; --tui-font-leading-500: 40px; --tui-font-leading-600: 48px; --tui-font-leading-700: 56px; --tui-font-leading-800: 68px; --tui-font-leading-900: 96px; --tui-font-leading-1000: 116px; --tui-font-size-050: 12px; --tui-font-size-075: 14px; --tui-font-size-100: 16px; --tui-font-size-200: 20px; --tui-font-size-300: 24px; --tui-font-size-400: 28px; --tui-font-size-500: 32px; --tui-font-size-600: 40px; --tui-font-size-700: 48px; --tui-font-size-800: 56px; --tui-font-size-900: 80px; --tui-font-size-1000: 96px; --tui-font-tracking-default: 0rem; --tui-font-weight-bold: 700; --tui-font-weight-medium: 500; --tui-font-weight-regular: 400; --tui-font-weight-semibold: 600; --tui-layer-0: 0; --tui-layer-10: 10; --tui-layer-20: 20; --tui-layer-30: 30; --tui-layer-40: 40; --tui-layer-50: 50; --tui-layer-60: 60; --tui-layer-base: var(--tui-layer-0); --tui-layer-modal: var(--tui-layer-50); --tui-layer-navigation: var(--tui-layer-10); --tui-layer-notification: var(--tui-layer-60); --tui-layer-overlay: var(--tui-layer-40); --tui-layer-popover: var(--tui-layer-30); --tui-layer-sticky: var(--tui-layer-20); --tui-motion-action-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-action-pressed: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-blanket-enter: var(--tui-motion-duration-long) 0ms var(--tui-motion-easing-inout-bold); --tui-motion-blanket-exit: var(--tui-motion-duration-medium) 0ms var(--tui-motion-easing-in-practical); --tui-motion-control-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-selected: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-toggle: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-curve-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6); --tui-motion-curve-inout-bold: cubic-bezier(0.4, 0, 0, 1); --tui-motion-curve-out-bold: cubic-bezier(0, 0.4, 0, 1); --tui-motion-curve-out-practical: cubic-bezier(0.4, 1, 0.6, 1); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-curve-spring: cubic-bezier(0.363, 1.102, 0.089, 1.043); --tui-motion-duration-0: 0ms; --tui-motion-duration-050: 50ms; --tui-motion-duration-100: 100ms; --tui-motion-duration-150: 150ms; --tui-motion-duration-200: 200ms; --tui-motion-duration-250: 250ms; --tui-motion-duration-400: 400ms; --tui-motion-duration-600: 600ms; --tui-motion-duration-instant: var(--tui-motion-duration-0); --tui-motion-duration-long: var(--tui-motion-duration-250); --tui-motion-duration-medium: var(--tui-motion-duration-200); --tui-motion-duration-short: var(--tui-motion-duration-150); --tui-motion-duration-xlong: var(--tui-motion-duration-400); --tui-motion-duration-xshort: var(--tui-motion-duration-100); --tui-motion-duration-xxlong: var(--tui-motion-duration-600); --tui-motion-duration-xxshort: var(--tui-motion-duration-050); --tui-motion-easing-in-practical: var(--tui-motion-curve-in-practical); --tui-motion-easing-inout-bold: var(--tui-motion-curve-inout-bold); --tui-motion-easing-out-bold: var(--tui-motion-curve-out-bold); --tui-motion-easing-out-practical: var(--tui-motion-curve-out-practical); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-easing-spring: var(--tui-motion-curve-spring); /* Corners of a small action (Button sm). */ --tui-shape-action-round: var(--tui-size-radius-lg); /* Corners of a medium action (Button md). */ --tui-shape-action-rounder: var(--tui-size-radius-xl); /* Corners of a large action (Button lg). The roundest action, not always a pill. */ --tui-shape-action-roundest: var(--tui-size-radius-2xl); /* Corners of a box that holds content, such as a card. Follows the surface corners unless a brand sets its own. */ --tui-shape-container-rounder: var(--tui-shape-surface-rounder); --tui-shape-rounder: var(--tui-size-radius-lg); --tui-shape-surface-rounder: var(--tui-size-radius-2xl); --tui-size-border-hairline: var(--tui-size-border-sm); --tui-size-border-md: 2px; --tui-size-border-narrow: var(--tui-size-border-md); --tui-size-border-sm: 1px; --tui-size-icon-lg: var(--tui-space-300); --tui-size-icon-md: var(--tui-space-250); --tui-size-icon-sm: var(--tui-space-200); --tui-size-icon-xs: var(--tui-space-100); --tui-size-radius-2xl: 16px; --tui-size-radius-3xl: 20px; --tui-size-radius-4xl: 24px; --tui-size-radius-full: 9999px; --tui-size-radius-lg: 8px; --tui-size-radius-md: 6px; --tui-size-radius-none: 0px; --tui-size-radius-sm: 4px; --tui-size-radius-xl: 12px; --tui-size-radius-xs: 2px; --tui-space-0: 0px; --tui-space-025: 2px; --tui-space-050: 4px; --tui-space-075: 6px; --tui-space-100: 8px; --tui-space-125: 10px; --tui-space-150: 12px; --tui-space-200: 16px; --tui-space-250: 20px; --tui-space-300: 24px; --tui-space-400: 32px; --tui-space-500: 40px; --tui-space-600: 48px; --tui-space-700: 56px; --tui-space-800: 64px; --tui-space-900: 72px; --tui-space-1000: 80px; --tui-space-1100: 88px; --tui-space-1200: 96px; --tui-space-1300: 104px; --tui-space-1400: 112px; --tui-space-1500: 120px; --tui-space-inline: var(--tui-space-100); --tui-space-inline-dense: var(--tui-space-050); --tui-space-inline-loose: var(--tui-space-150); --tui-space-inline-looser: var(--tui-space-250); --tui-space-inset: var(--tui-space-200); --tui-space-inset-dense: var(--tui-space-100); --tui-space-inset-loose: var(--tui-space-250); --tui-space-inset-looser: var(--tui-space-400); --tui-space-inset-squish: 12px 24px; --tui-space-inset-squish-dense: 8px 24px; --tui-space-inset-squish-loose: 16px 24px; --tui-space-inset-stretch: 8px 16px; --tui-space-inset-stretch-loosest: 16px 16px; --tui-space-negative-025: -2px; --tui-space-negative-050: -4px; --tui-space-negative-075: -6px; --tui-space-negative-100: -8px; --tui-space-negative-150: -12px; --tui-space-negative-200: -16px; --tui-space-negative-250: -20px; --tui-space-negative-300: -24px; --tui-space-negative-400: -32px; --tui-space-stack: var(--tui-space-200); --tui-space-stack-dense: var(--tui-space-100); --tui-space-stack-denser: var(--tui-space-050); --tui-space-stack-loose: var(--tui-space-300); --tui-space-stack-looser: var(--tui-space-400); --tui-space-stack-loosest: var(--tui-space-600); --tui-typography-action-label-lg: var(--tui-typography-action-label-lg-font-weight) var(--tui-typography-action-label-lg-font-size)/var(--tui-typography-action-label-lg-line-height) var(--tui-typography-action-label-lg-font-family); --tui-typography-action-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-action-label-lg-font-size: var(--tui-font-size-100); --tui-typography-action-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-lg-letter-spacing: 0px; --tui-typography-action-label-lg-line-height: 1.5; --tui-typography-action-label-md: var(--tui-typography-action-label-md-font-weight) var(--tui-typography-action-label-md-font-size)/var(--tui-typography-action-label-md-line-height) var(--tui-typography-action-label-md-font-family); --tui-typography-action-label-md-font-family: var(--tui-font-family-sans); --tui-typography-action-label-md-font-size: var(--tui-font-size-075); --tui-typography-action-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-md-letter-spacing: 0px; --tui-typography-action-label-md-line-height: 1.4286; --tui-typography-action-label-xl: var(--tui-typography-action-label-xl-font-weight) var(--tui-typography-action-label-xl-font-size)/var(--tui-typography-action-label-xl-line-height) var(--tui-typography-action-label-xl-font-family); --tui-typography-action-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-action-label-xl-font-size: var(--tui-font-size-200); --tui-typography-action-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-xl-letter-spacing: 0px; --tui-typography-action-label-xl-line-height: 1.4; --tui-typography-body-lg: var(--tui-typography-body-lg-font-weight) var(--tui-typography-body-lg-font-size)/var(--tui-typography-body-lg-line-height) var(--tui-typography-body-lg-font-family); --tui-typography-body-lg-font-family: var(--tui-font-family-sans); --tui-typography-body-lg-font-size: var(--tui-font-size-200); --tui-typography-body-lg-font-weight: var(--tui-font-weight-regular); --tui-typography-body-lg-letter-spacing: 0px; --tui-typography-body-lg-line-height: 1.4; --tui-typography-body-md: var(--tui-typography-body-md-font-weight) var(--tui-typography-body-md-font-size)/var(--tui-typography-body-md-line-height) var(--tui-typography-body-md-font-family); --tui-typography-body-md-font-family: var(--tui-font-family-sans); --tui-typography-body-md-font-size: var(--tui-font-size-100); --tui-typography-body-md-font-weight: var(--tui-font-weight-regular); --tui-typography-body-md-letter-spacing: 0px; --tui-typography-body-md-line-height: 1.5; --tui-typography-body-sm: var(--tui-typography-body-sm-font-weight) var(--tui-typography-body-sm-font-size)/var(--tui-typography-body-sm-line-height) var(--tui-typography-body-sm-font-family); --tui-typography-body-sm-font-family: var(--tui-font-family-sans); --tui-typography-body-sm-font-size: var(--tui-font-size-075); --tui-typography-body-sm-font-weight: var(--tui-font-weight-regular); --tui-typography-body-sm-letter-spacing: 0px; --tui-typography-body-sm-line-height: 1.4286; --tui-typography-body-xs: var(--tui-typography-body-xs-font-weight) var(--tui-typography-body-xs-font-size)/var(--tui-typography-body-xs-line-height) var(--tui-typography-body-xs-font-family); --tui-typography-body-xs-font-family: var(--tui-font-family-sans); --tui-typography-body-xs-font-size: var(--tui-font-size-050); --tui-typography-body-xs-font-weight: var(--tui-font-weight-regular); --tui-typography-body-xs-letter-spacing: 0px; --tui-typography-body-xs-line-height: 1.3333; --tui-typography-code-md: var(--tui-typography-code-md-font-weight) var(--tui-typography-code-md-font-size)/var(--tui-typography-code-md-line-height) var(--tui-typography-code-md-font-family); --tui-typography-code-md-font-family: var(--tui-font-family-mono); --tui-typography-code-md-font-size: var(--tui-font-size-075); --tui-typography-code-md-font-weight: var(--tui-font-weight-regular); --tui-typography-code-md-letter-spacing: 0px; --tui-typography-code-md-line-height: 1.4286; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md: var(--tui-typography-container-heading-md-font-weight) var(--tui-typography-container-heading-md-font-size)/var(--tui-typography-container-heading-md-line-height) var(--tui-typography-container-heading-md-font-family); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-family: var(--tui-font-family-sans); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-size: var(--tui-font-size-200); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-weight: var(--tui-font-weight-bold); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-letter-spacing: 0px; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-line-height: 1.4; --tui-typography-display-lg: var(--tui-typography-display-lg-font-weight) var(--tui-typography-display-lg-font-size)/var(--tui-typography-display-lg-line-height) var(--tui-typography-display-lg-font-family); --tui-typography-display-lg-font-family: var(--tui-font-family-sans); --tui-typography-display-lg-font-size: var(--tui-font-size-900); --tui-typography-display-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-display-lg-letter-spacing: -0.8px; --tui-typography-display-lg-line-height: 1.2; --tui-typography-display-md: var(--tui-typography-display-md-font-weight) var(--tui-typography-display-md-font-size)/var(--tui-typography-display-md-line-height) var(--tui-typography-display-md-font-family); --tui-typography-display-md-font-family: var(--tui-font-family-sans); --tui-typography-display-md-font-size: var(--tui-font-size-800); --tui-typography-display-md-font-weight: var(--tui-font-weight-bold); --tui-typography-display-md-letter-spacing: -0.56px; --tui-typography-display-md-line-height: 1.2143; --tui-typography-display-xl: var(--tui-typography-display-xl-font-weight) var(--tui-typography-display-xl-font-size)/var(--tui-typography-display-xl-line-height) var(--tui-typography-display-xl-font-family); --tui-typography-display-xl-font-family: var(--tui-font-family-sans); --tui-typography-display-xl-font-size: var(--tui-font-size-1000); --tui-typography-display-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-display-xl-letter-spacing: -0.96px; --tui-typography-display-xl-line-height: 1.2083; --tui-typography-heading-lg: var(--tui-typography-heading-lg-font-weight) var(--tui-typography-heading-lg-font-size)/var(--tui-typography-heading-lg-line-height) var(--tui-typography-heading-lg-font-family); --tui-typography-heading-lg-font-family: var(--tui-font-family-sans); --tui-typography-heading-lg-font-size: var(--tui-font-size-400); --tui-typography-heading-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-lg-letter-spacing: -0.28px; --tui-typography-heading-lg-line-height: 1.1429; --tui-typography-heading-md: var(--tui-typography-heading-md-font-weight) var(--tui-typography-heading-md-font-size)/var(--tui-typography-heading-md-line-height) var(--tui-typography-heading-md-font-family); --tui-typography-heading-md-font-family: var(--tui-font-family-sans); --tui-typography-heading-md-font-size: var(--tui-font-size-300); --tui-typography-heading-md-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-md-letter-spacing: 0px; --tui-typography-heading-md-line-height: 1.1667; --tui-typography-heading-sm: var(--tui-typography-heading-sm-font-weight) var(--tui-typography-heading-sm-font-size)/var(--tui-typography-heading-sm-line-height) var(--tui-typography-heading-sm-font-family); --tui-typography-heading-sm-font-family: var(--tui-font-family-sans); --tui-typography-heading-sm-font-size: var(--tui-font-size-200); --tui-typography-heading-sm-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-sm-letter-spacing: 0px; --tui-typography-heading-sm-line-height: 1.4; --tui-typography-heading-xl: var(--tui-typography-heading-xl-font-weight) var(--tui-typography-heading-xl-font-size)/var(--tui-typography-heading-xl-line-height) var(--tui-typography-heading-xl-font-family); --tui-typography-heading-xl-font-family: var(--tui-font-family-sans); --tui-typography-heading-xl-font-size: var(--tui-font-size-500); --tui-typography-heading-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-xl-letter-spacing: -0.32px; --tui-typography-heading-xl-line-height: 1.25; --tui-typography-label-lg: var(--tui-typography-label-lg-font-weight) var(--tui-typography-label-lg-font-size)/var(--tui-typography-label-lg-line-height) var(--tui-typography-label-lg-font-family); --tui-typography-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-label-lg-font-size: var(--tui-font-size-100); --tui-typography-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-lg-letter-spacing: 0px; --tui-typography-label-lg-line-height: 1.5; --tui-typography-label-md: var(--tui-typography-label-md-font-weight) var(--tui-typography-label-md-font-size)/var(--tui-typography-label-md-line-height) var(--tui-typography-label-md-font-family); --tui-typography-label-md-font-family: var(--tui-font-family-sans); --tui-typography-label-md-font-size: var(--tui-font-size-075); --tui-typography-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-md-letter-spacing: 0px; --tui-typography-label-md-line-height: 1.4286; --tui-typography-label-xl: var(--tui-typography-label-xl-font-weight) var(--tui-typography-label-xl-font-size)/var(--tui-typography-label-xl-line-height) var(--tui-typography-label-xl-font-family); --tui-typography-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-label-xl-font-size: var(--tui-font-size-200); --tui-typography-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-xl-letter-spacing: 0px; --tui-typography-label-xl-line-height: 1.4; } } @layer tokens { @media (prefers-color-scheme: dark) { :root:not([data-color-scheme="light"])[data-sub-theme="skin"] { --tui-color-background-accent-green: var(--tui-color-green-500); --tui-color-background-accent-green-bold: var(--tui-color-green-700); --tui-color-background-accent-green-subtle: var(--tui-color-green-500); --tui-color-background-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-background-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-background-accent-steel-subtle: var(--tui-color-rexall-steel-400); --tui-color-background-accent-teal: var(--tui-color-teal-500); --tui-color-background-accent-teal-bold: var(--tui-color-teal-700); --tui-color-background-accent-teal-subtle: var(--tui-color-teal-500); --tui-color-background-brand: var(--tui-color-teal-500); --tui-color-background-brand-bold: var(--tui-color-teal-700); --tui-color-background-brand-bold-hovered: var(--tui-color-teal-800); --tui-color-background-brand-bold-pressed: var(--tui-color-teal-900); --tui-color-background-brand-subtle: var(--tui-color-teal-100); --tui-color-background-brand-subtle-hovered: var(--tui-color-teal-200); --tui-color-background-brand-subtle-pressed: var(--tui-color-teal-300); --tui-color-background-danger: var(--tui-color-red-700); --tui-color-background-danger-bold: var(--tui-color-red-700); --tui-color-background-danger-hovered: var(--tui-color-red-800); --tui-color-background-danger-pressed: var(--tui-color-red-900); --tui-color-background-danger-subtle: var(--tui-color-red-100); --tui-color-background-danger-subtle-hovered: var(--tui-color-red-200); --tui-color-background-danger-subtle-pressed: var(--tui-color-red-300); --tui-color-background-disabled: var(--tui-color-neutral-100); --tui-color-background-hovered: var(--tui-color-neutral-100); --tui-color-background-information: var(--tui-color-rexall-steel-500); --tui-color-background-information-bold: var(--tui-color-rexall-steel-700); --tui-color-background-information-subtle: var(--tui-color-rexall-steel-100); --tui-color-background-inverse: var(--tui-color-neutral-900); --tui-color-background-inverse-hovered: var(--tui-color-neutral-1000); --tui-color-background-inverse-pressed: var(--tui-color-neutral-800); --tui-color-background-neutral: var(--tui-color-neutral-400); --tui-color-background-neutral-bold: var(--tui-color-neutral-700); --tui-color-background-neutral-hovered: var(--tui-color-neutral-300); --tui-color-background-neutral-pressed: var(--tui-color-neutral-500); --tui-color-background-neutral-subtle: var(--tui-color-neutral-200); --tui-color-background-neutral-subtle-hovered: var(--tui-color-neutral-100); --tui-color-background-neutral-subtle-pressed: var(--tui-color-neutral-300); --tui-color-background-pressed: var(--tui-color-neutral-200); --tui-color-background-selected: var(--tui-color-teal-100); --tui-color-background-success: var(--tui-color-green-500); --tui-color-background-success-bold: var(--tui-color-green-700); --tui-color-background-success-subtle: var(--tui-color-green-100); --tui-color-background-warning: var(--tui-color-yellow-300); --tui-color-background-warning-bold: var(--tui-color-yellow-300); --tui-color-background-warning-subtle: var(--tui-color-yellow-100); --tui-color-black: oklch(0% 0 0); --tui-color-blanket-background: var(--tui-color-neutral-900); --tui-color-border: var(--tui-color-neutral-300); --tui-color-border-accent-green: var(--tui-color-green-500); --tui-color-border-accent-green-bold: var(--tui-color-green-700); --tui-color-border-accent-green-subtle: var(--tui-color-green-300); --tui-color-border-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-border-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-border-accent-steel-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-accent-teal: var(--tui-color-teal-500); --tui-color-border-accent-teal-bold: var(--tui-color-teal-700); --tui-color-border-accent-teal-subtle: var(--tui-color-teal-300); --tui-color-border-brand: var(--tui-color-teal-700); --tui-color-border-brand-bold: var(--tui-color-teal-700); --tui-color-border-brand-hovered: var(--tui-color-teal-800); --tui-color-border-brand-pressed: var(--tui-color-teal-900); --tui-color-border-brand-subtle: var(--tui-color-teal-300); --tui-color-border-danger: var(--tui-color-red-600); --tui-color-border-danger-bold: var(--tui-color-red-700); --tui-color-border-danger-hovered: var(--tui-color-red-700); --tui-color-border-danger-pressed: var(--tui-color-red-800); --tui-color-border-danger-subtle: var(--tui-color-red-300); --tui-color-border-disabled: var(--tui-color-neutral-200); --tui-color-border-focus: var(--tui-color-neutral-1000); --tui-color-border-information: var(--tui-color-rexall-steel-600); --tui-color-border-information-bold: var(--tui-color-rexall-steel-700); --tui-color-border-information-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-inverse-focus: var(--tui-color-white); --tui-color-border-neutral: var(--tui-color-neutral-300); --tui-color-border-neutral-bold: var(--tui-color-neutral-600); --tui-color-border-neutral-bold-hovered: var(--tui-color-neutral-700); --tui-color-border-neutral-bold-pressed: var(--tui-color-neutral-800); --tui-color-border-neutral-hovered: var(--tui-color-neutral-200); --tui-color-border-neutral-pressed: var(--tui-color-neutral-400); --tui-color-border-neutral-subtle: var(--tui-color-neutral-300); --tui-color-border-neutral-subtlest: var(--tui-color-neutral-200); --tui-color-border-selected: var(--tui-color-teal-700); --tui-color-border-success: var(--tui-color-green-700); --tui-color-border-success-bold: var(--tui-color-green-700); --tui-color-border-success-subtle: var(--tui-color-green-300); --tui-color-border-warning: var(--tui-color-yellow-600); --tui-color-border-warning-bold: var(--tui-color-yellow-700); --tui-color-border-warning-subtle: var(--tui-color-yellow-300); --tui-color-container-background: var(--tui-color-white); --tui-color-container-background-accent-green: var(--tui-color-background-accent-green); --tui-color-container-background-accent-green-bold: var(--tui-color-background-accent-green-bold); --tui-color-container-background-accent-green-subtle: var(--tui-color-background-accent-green-subtle); --tui-color-container-background-accent-steel: var(--tui-color-background-accent-steel); --tui-color-container-background-accent-steel-bold: var(--tui-color-background-accent-steel-bold); --tui-color-container-background-accent-steel-subtle: var(--tui-color-background-accent-steel-subtle); --tui-color-container-background-accent-teal: var(--tui-color-background-accent-teal); --tui-color-container-background-accent-teal-bold: var(--tui-color-background-accent-teal-bold); --tui-color-container-background-accent-teal-subtle: var(--tui-color-background-accent-teal-subtle); --tui-color-container-background-brand: var(--tui-color-background-brand); --tui-color-container-background-brand-bold: var(--tui-color-background-brand-bold); --tui-color-container-background-brand-subtle: var(--tui-color-background-brand-subtle); --tui-color-container-background-danger: var(--tui-color-background-danger); --tui-color-container-background-danger-bold: var(--tui-color-background-danger-bold); --tui-color-container-background-danger-subtle: var(--tui-color-background-danger-subtle); --tui-color-container-background-information: var(--tui-color-background-information); --tui-color-container-background-information-bold: var(--tui-color-background-information-bold); --tui-color-container-background-information-subtle: var(--tui-color-background-information-subtle); --tui-color-container-background-neutral: var(--tui-color-background-neutral); --tui-color-container-background-neutral-bold: var(--tui-color-background-inverse); --tui-color-container-background-neutral-subtle: var(--tui-color-surface-background-neutral-subtle); --tui-color-container-background-success: var(--tui-color-background-success); --tui-color-container-background-success-bold: var(--tui-color-background-success-bold); --tui-color-container-background-success-subtle: var(--tui-color-background-success-subtle); --tui-color-container-background-warning: var(--tui-color-background-warning); --tui-color-container-background-warning-bold: var(--tui-color-background-warning-bold); --tui-color-container-background-warning-subtle: var(--tui-color-background-warning-subtle); --tui-color-container-border: var(--tui-color-neutral-300); --tui-color-container-border-accent-green: var(--tui-color-border-accent-green); --tui-color-container-border-accent-green-bold: var(--tui-color-border-accent-green-bold); --tui-color-container-border-accent-green-subtle: var(--tui-color-border-accent-green-subtle); --tui-color-container-border-accent-steel: var(--tui-color-border-accent-steel); --tui-color-container-border-accent-steel-bold: var(--tui-color-border-accent-steel-bold); --tui-color-container-border-accent-steel-subtle: var(--tui-color-border-accent-steel-subtle); --tui-color-container-border-accent-teal: var(--tui-color-border-accent-teal); --tui-color-container-border-accent-teal-bold: var(--tui-color-border-accent-teal-bold); --tui-color-container-border-accent-teal-subtle: var(--tui-color-border-accent-teal-subtle); --tui-color-container-border-brand: var(--tui-color-border-brand); --tui-color-container-border-brand-bold: var(--tui-color-border-brand-bold); --tui-color-container-border-brand-subtle: var(--tui-color-border-brand-subtle); --tui-color-container-border-danger: var(--tui-color-border-danger); --tui-color-container-border-danger-bold: var(--tui-color-border-danger-bold); --tui-color-container-border-danger-subtle: var(--tui-color-border-danger-subtle); --tui-color-container-border-information: var(--tui-color-border-information); --tui-color-container-border-information-bold: var(--tui-color-border-information-bold); --tui-color-container-border-information-subtle: var(--tui-color-border-information-subtle); --tui-color-container-border-neutral: var(--tui-color-border-neutral); --tui-color-container-border-neutral-bold: var(--tui-color-border-neutral-bold); --tui-color-container-border-neutral-subtle: var(--tui-color-border-neutral-subtle); --tui-color-container-border-success: var(--tui-color-border-success); --tui-color-container-border-success-bold: var(--tui-color-border-success-bold); --tui-color-container-border-success-subtle: var(--tui-color-border-success-subtle); --tui-color-container-border-warning: var(--tui-color-border-warning); --tui-color-container-border-warning-bold: var(--tui-color-border-warning-bold); --tui-color-container-border-warning-subtle: var(--tui-color-border-warning-subtle); /* Text inside a box that holds content, such as a card. */ --tui-color-container-text: var(--tui-color-text); /* Secondary text inside a box that holds content. */ --tui-color-container-text-neutral-subtle: var(--tui-color-text-neutral-subtle); --tui-color-green-100: oklch(95.8% 0.0339 134); --tui-color-green-200: oklch(91% 0.0654 134); --tui-color-green-300: oklch(86% 0.0956 134); --tui-color-green-400: oklch(79.5% 0.1328 134); --tui-color-green-500: var(--tui-color-rexall-well-green); --tui-color-green-600: oklch(63.5% 0.1512 134); --tui-color-green-700: oklch(54.5% 0.1328 134); --tui-color-green-800: oklch(45.5% 0.1139 134); --tui-color-green-900: oklch(36.5% 0.0944 134); --tui-color-green-1000: oklch(27% 0.0731 134); --tui-color-icon: var(--tui-color-neutral-900); --tui-color-icon-brand: var(--tui-color-teal-700); --tui-color-icon-danger: var(--tui-color-red-700); --tui-color-icon-disabled: var(--tui-color-neutral-600); --tui-color-icon-information: var(--tui-color-rexall-steel-700); --tui-color-icon-inverse: var(--tui-color-white); --tui-color-icon-neutral-subtle: var(--tui-color-neutral-700); --tui-color-icon-success: var(--tui-color-green-700); --tui-color-icon-warning: var(--tui-color-yellow-700); --tui-color-input-background: var(--tui-color-white); --tui-color-input-background-disabled: var(--tui-color-neutral-100); --tui-color-input-border: var(--tui-color-neutral-600); --tui-color-link-text: var(--tui-color-teal-700); --tui-color-link-text-hovered: var(--tui-color-teal-800); --tui-color-link-text-inverse: var(--tui-color-text-inverse); --tui-color-link-text-inverse-hovered: var(--tui-color-text-inverse); --tui-color-link-text-inverse-pressed: var(--tui-color-text-inverse); --tui-color-link-text-inverse-visited: var(--tui-color-text-inverse); --tui-color-link-text-neutral: var(--tui-color-text-neutral); --tui-color-link-text-neutral-hovered: var(--tui-color-text-neutral-hovered); --tui-color-link-text-neutral-pressed: var(--tui-color-text-neutral-pressed); --tui-color-link-text-neutral-visited: var(--tui-color-text-neutral); --tui-color-link-text-pressed: var(--tui-color-teal-800); --tui-color-link-text-visited: var(--tui-color-magenta-700); --tui-color-magenta-100: oklch(95.8% 0.0241 351.2); --tui-color-magenta-200: oklch(91% 0.0541 351.2); --tui-color-magenta-300: oklch(86% 0.0816 351.2); --tui-color-magenta-400: oklch(79.5% 0.1047 351.2); --tui-color-magenta-500: oklch(71.5% 0.13 351.2); --tui-color-magenta-600: oklch(63.5% 0.153 351.2); --tui-color-magenta-700: var(--tui-color-rexall-berry-purple); --tui-color-magenta-800: oklch(45.5% 0.1676 351.2); --tui-color-magenta-900: oklch(36.5% 0.1389 351.2); --tui-color-magenta-1000: oklch(27% 0.1075 351.2); --tui-color-neutral-100: oklch(95.8% 0 0); --tui-color-neutral-200: oklch(91% 0 0); --tui-color-neutral-300: oklch(86% 0 0); --tui-color-neutral-400: oklch(79.5% 0 0); --tui-color-neutral-500: oklch(71.5% 0 0); --tui-color-neutral-600: oklch(63.5% 0 0); --tui-color-neutral-700: oklch(54.5% 0 0); --tui-color-neutral-800: oklch(45.5% 0 0); --tui-color-neutral-900: var(--tui-color-rexall-charcoal-grey); --tui-color-neutral-1000: oklch(27% 0 0); --tui-color-neutral-A100: oklch(10.78% 0 0 / 0.056); --tui-color-neutral-A200: oklch(7.66% 0 0 / 0.118); --tui-color-neutral-A300: oklch(6.76% 0 0 / 0.182); --tui-color-neutral-A400: oklch(6.59% 0 0 / 0.264); --tui-color-neutral-A500: oklch(5.18% 0 0 / 0.362); --tui-color-neutral-A600: oklch(1.98% 0 0 / 0.457); --tui-color-neutral-A700: oklch(0% 0 0 / 0.561); --tui-color-neutral-A800: oklch(3.14% 0 0 / 0.661); --tui-color-neutral-A900: oklch(4.4% 0 0 / 0.797); --tui-color-neutral-A1000: oklch(3.14% 0 0 / 0.85); --tui-color-orange-100: oklch(95.8% 0.023 48.9); --tui-color-orange-200: oklch(91% 0.0514 48.9); --tui-color-orange-300: oklch(86% 0.0834 48.9); --tui-color-orange-400: oklch(79.5% 0.1188 48.9); --tui-color-orange-500: oklch(71.5% 0.1528 48.9); --tui-color-orange-600: var(--tui-color-rexall-terracotta-orange); --tui-color-orange-700: oklch(54.5% 0.1463 48.9); --tui-color-orange-800: oklch(45.5% 0.1222 48.9); --tui-color-orange-900: oklch(36.5% 0.098 48.9); --tui-color-orange-1000: oklch(27% 0.0725 48.9); --tui-color-pink-100: oklch(95.8% 0.0216 5); --tui-color-pink-200: oklch(91% 0.0485 5); --tui-color-pink-300: oklch(86% 0.0792 5); --tui-color-pink-400: oklch(79.5% 0.1241 5); --tui-color-pink-500: oklch(71.5% 0.1644 5); --tui-color-pink-600: var(--tui-color-rexall-tulip-pink); --tui-color-pink-700: oklch(54.5% 0.1544 5); --tui-color-pink-800: oklch(45.5% 0.1324 5); --tui-color-pink-900: oklch(36.5% 0.1098 5); --tui-color-pink-1000: oklch(27% 0.085 5); --tui-color-red-100: oklch(95.8% 0.0206 23.7); --tui-color-red-200: oklch(91% 0.0462 23.7); --tui-color-red-300: oklch(86% 0.0754 23.7); --tui-color-red-400: oklch(79.5% 0.1177 23.7); --tui-color-red-500: oklch(71.5% 0.1783 23.7); --tui-color-red-600: var(--tui-color-rexall-ladybug-red); --tui-color-red-700: oklch(54.5% 0.2142 23.7); --tui-color-red-800: oklch(45.5% 0.1837 23.7); --tui-color-red-900: oklch(36.5% 0.1475 23.7); --tui-color-red-1000: oklch(27% 0.1091 23.7); /* Be Well */ --tui-color-rexall-apricot-orange: oklch(71.4% 0.1525 56.134); /* Skin Health */ --tui-color-rexall-ash: oklch(90% 0.0027 106.45); /* Rexall */ --tui-color-rexall-banana-yellow: oklch(95.33% 0.0757 95.318); /* Berry Purple — magenta anchor */ --tui-color-rexall-berry-purple: oklch(51.17% 0.1852 351.18); /* Rexall */ --tui-color-rexall-blush-pink: oklch(58.59% 0.1586 4.6101); /* Be Well promo */ --tui-color-rexall-blush-red: oklch(86.8% 0.055 21.054); /* Be Well promo */ --tui-color-rexall-burgundy-red: oklch(45.44% 0.1821 28.716); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-calming-blue-haze: oklch(80.84% 0.0387 249.54); /* Charcoal Grey — neutral anchor */ --tui-color-rexall-charcoal-grey: oklch(32.5% 0 0); /* Rexall */ --tui-color-rexall-cloud-grey: oklch(84.52% 0 0); /* Be Well promo */ --tui-color-rexall-cream-yellow: oklch(99.23% 0.0159 98.986); /* Be Well promo */ --tui-color-rexall-daisy-yellow: oklch(92.84% 0.1204 106.48); /* Rexall AODA */ --tui-color-rexall-deep-ocean: oklch(42.34% 0.0723 194.8); /* Be Well promo */ --tui-color-rexall-dusty-red: oklch(50.13% 0.1755 23.713); /* Be Well */ --tui-color-rexall-evergreen: oklch(51.19% 0.0835 138.17); /* Rexall */ --tui-color-rexall-fog-grey: oklch(97.91% 0 0); /* Be Well */ --tui-color-rexall-forest-green: oklch(45.31% 0.073 146.02); /* Be Well */ --tui-color-rexall-garden-green: oklch(54.77% 0.0953 138.22); /* Be Well */ --tui-color-rexall-granite-grey: oklch(53.49% 0.005 17.313); /* Rexall */ --tui-color-rexall-grapefruit: oklch(95.01% 0.0848 98.329); /* Rexall */ --tui-color-rexall-grass-green: oklch(78.93% 0.1268 133.59); /* Be Well */ --tui-color-rexall-grey-blue: oklch(59.99% 0.0929 185.62); /* Be Well promo */ --tui-color-rexall-highlighter-yellow: oklch(92.14% 0.1824 105.41); /* Digestive */ --tui-color-rexall-immunity-orange: oklch(71.08% 0.1395 51.737); /* Ladybug Red — red anchor */ --tui-color-rexall-ladybug-red: oklch(60.41% 0.2338 23.742); /* Rexall AODA */ --tui-color-rexall-lakeside-blue: oklch(52.74% 0.0872 187.63); /* Be Well */ --tui-color-rexall-lavender-purple: oklch(89.47% 0.0375 342.55); /* Rexall */ --tui-color-rexall-lemon-yellow: oklch(88.28% 0.1811 94.46); /* Rexall */ --tui-color-rexall-light-blush-pink: oklch(85.56% 0.0673 10.506); /* Rexall */ --tui-color-rexall-light-drizzle: oklch(91.04% 0.0336 191.96); /* Be Well promo */ --tui-color-rexall-light-red: oklch(94.46% 0.0142 12.025); /* Be Well */ --tui-color-rexall-lime-green: oklch(75.39% 0.152 134.81); /* Be Well promo */ --tui-color-rexall-lipstick-red: oklch(62.76% 0.2141 23.004); /* Be Well */ --tui-color-rexall-melon-orange: oklch(85.06% 0.0788 62.059); /* Rexall */ --tui-color-rexall-mist-blue: oklch(95.8% 0.0169 192.36); /* Be Well */ --tui-color-rexall-moss-green: oklch(64.94% 0.1505 133.89); /* Be Well */ --tui-color-rexall-night-grey: oklch(42.18% 0.0031 48.66); /* Be Well */ --tui-color-rexall-pansy-purple: oklch(79.17% 0.0759 344.13); /* Be Well */ --tui-color-rexall-peachy-orange: oklch(92.38% 0.0385 63.533); /* Be Well promo */ --tui-color-rexall-pinky-red: oklch(96.91% 0.0151 17.418); /* Be Well */ --tui-color-rexall-plum-purple: oklch(59.35% 0.1561 347.67); /* Poolside Blue — teal anchor */ --tui-color-rexall-poolside-blue: oklch(68.76% 0.1147 188.23); /* Rexall */ --tui-color-rexall-rain-blue: oklch(87.81% 0.0553 193.35); /* Be Well promo */ --tui-color-rexall-rosy-red: oklch(69.56% 0.183 23.103); /* Rexall */ --tui-color-rexall-ruby-red: oklch(57.73% 0.2098 23.23); /* Rexall */ --tui-color-rexall-sage-green: oklch(88.81% 0.0662 132.17); /* Be Well */ --tui-color-rexall-seaside-blue: oklch(49.86% 0.0891 182.42); /* Rexall AODA */ --tui-color-rexall-shoreline-blue: oklch(63.95% 0.1102 188.54); /* Be Well */ --tui-color-rexall-silver-grey: oklch(66.37% 0.0049 0.0752); /* Be Well */ --tui-color-rexall-sky-blue: oklch(84.85% 0.0638 193.53); /* Rexall */ --tui-color-rexall-slate-grey: oklch(53.82% 0 0); --tui-color-rexall-steel: oklch(52.12% 0.0301 259.03); --tui-color-rexall-steel-100: oklch(95.8% 0.0077 249.5); --tui-color-rexall-steel-200: oklch(91% 0.0173 249.5); --tui-color-rexall-steel-300: oklch(86% 0.0277 249.5); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-steel-400: var(--tui-color-rexall-calming-blue-haze); --tui-color-rexall-steel-500: oklch(71.5% 0.0348 249.5); --tui-color-rexall-steel-600: oklch(63.5% 0.0315 249.5); --tui-color-rexall-steel-700: oklch(54.5% 0.0276 249.5); --tui-color-rexall-steel-800: oklch(45.5% 0.0237 249.5); --tui-color-rexall-steel-900: oklch(36.5% 0.0196 249.5); --tui-color-rexall-steel-1000: oklch(27% 0.0152 249.5); /* Sunshine Yellow — yellow anchor */ --tui-color-rexall-sunshine-yellow: oklch(86.72% 0.1773 90.85); /* Be Well promo */ --tui-color-rexall-taupe-red: oklch(75.68% 0.0781 13.998); /* Rexall */ --tui-color-rexall-tea-green: oklch(95.59% 0.0563 131.52); /* Be Well */ --tui-color-rexall-teal-blue: oklch(68.53% 0.0897 185.9); /* Terracotta Orange — orange anchor */ --tui-color-rexall-terracotta-orange: oklch(65.65% 0.1764 48.889); /* Tulip Pink — pink anchor */ --tui-color-rexall-tulip-pink: oklch(67.04% 0.1842 5.0399); /* Be Well promo */ --tui-color-rexall-vanilla-yellow: oklch(95.6% 0.072 105.12); /* Be Well */ --tui-color-rexall-venice-blue: oklch(40.54% 0.0851 236.88); /* Be Well */ --tui-color-rexall-washed-blue: oklch(78.7% 0.0619 185.5); /* Well Green — green anchor */ --tui-color-rexall-well-green: oklch(72.73% 0.1698 134.03); /* Digestive */ --tui-color-rexall-well-green-deep: oklch(50.28% 0.1219 142.99); --tui-color-surface-background: var(--tui-color-white); --tui-color-surface-background-brand: var(--tui-color-pink-200); /* A page or section tinted with the brand. Plain surface unless a brand sets a tint. */ --tui-color-surface-background-brand-subtle: var(--tui-color-surface-background); --tui-color-surface-background-neutral-subtle: var(--tui-color-neutral-100); --tui-color-tag-background-accent-green: var(--tui-color-green-100); --tui-color-tag-background-accent-magenta: var(--tui-color-magenta-100); --tui-color-tag-background-accent-neutral: var(--tui-color-neutral-100); --tui-color-tag-background-accent-orange: var(--tui-color-orange-100); --tui-color-tag-background-accent-pink: var(--tui-color-pink-100); --tui-color-tag-background-accent-steel: var(--tui-color-rexall-steel-100); --tui-color-tag-background-accent-teal: var(--tui-color-teal-100); --tui-color-tag-background-accent-yellow: var(--tui-color-yellow-100); --tui-color-tag-text-accent-green: var(--tui-color-green-800); --tui-color-tag-text-accent-magenta: var(--tui-color-magenta-800); --tui-color-tag-text-accent-neutral: var(--tui-color-neutral-800); --tui-color-tag-text-accent-orange: var(--tui-color-orange-800); --tui-color-tag-text-accent-pink: var(--tui-color-pink-800); --tui-color-tag-text-accent-steel: var(--tui-color-rexall-steel-800); --tui-color-tag-text-accent-teal: var(--tui-color-teal-800); --tui-color-tag-text-accent-yellow: var(--tui-color-yellow-800); --tui-color-teal-100: oklch(95.8% 0.0229 188.2); --tui-color-teal-200: oklch(91% 0.0422 188.2); --tui-color-teal-300: oklch(86% 0.0602 188.2); --tui-color-teal-400: oklch(79.5% 0.0818 188.2); /* Poolside Blue — teal anchor */ --tui-color-teal-500: var(--tui-color-rexall-poolside-blue); --tui-color-teal-600: oklch(63.5% 0.1071 188.2); --tui-color-teal-700: oklch(54.5% 0.0941 188.2); --tui-color-teal-800: oklch(45.5% 0.079 188.2); --tui-color-teal-900: oklch(36.5% 0.0634 188.2); --tui-color-teal-1000: oklch(27% 0.0469 188.2); --tui-color-text: var(--tui-color-neutral-900); --tui-color-text-brand: var(--tui-color-teal-800); --tui-color-text-brand-hovered: var(--tui-color-teal-900); --tui-color-text-brand-pressed: var(--tui-color-teal-900); --tui-color-text-danger: var(--tui-color-red-700); --tui-color-text-danger-hovered: var(--tui-color-red-800); --tui-color-text-danger-pressed: var(--tui-color-red-800); --tui-color-text-disabled: var(--tui-color-neutral-600); --tui-color-text-information: var(--tui-color-rexall-steel-700); --tui-color-text-inverse: var(--tui-color-white); --tui-color-text-neutral: var(--tui-color-neutral-900); --tui-color-text-neutral-hovered: var(--tui-color-neutral-800); --tui-color-text-neutral-pressed: var(--tui-color-neutral-1000); --tui-color-text-neutral-subtle: var(--tui-color-neutral-800); --tui-color-text-success: var(--tui-color-green-700); --tui-color-text-warning: var(--tui-color-yellow-700); --tui-color-transparent: oklch(0% 0 0 / 0); --tui-color-white: oklch(100% 0 0); --tui-color-yellow-100: oklch(95.8% 0.0354 90.8); --tui-color-yellow-200: oklch(91% 0.1029 90.8); /* Sunshine Yellow — yellow anchor */ --tui-color-yellow-300: var(--tui-color-rexall-sunshine-yellow); --tui-color-yellow-400: oklch(79.5% 0.1624 88.3); --tui-color-yellow-500: oklch(71.5% 0.1463 85.7); --tui-color-yellow-600: oklch(63.5% 0.1305 83.1); --tui-color-yellow-700: oklch(54.5% 0.1126 80.6); --tui-color-yellow-800: oklch(45.5% 0.0948 78); --tui-color-yellow-900: oklch(36.5% 0.0768 75.4); --tui-color-yellow-1000: oklch(27% 0.0575 72.8); --tui-elevation-shadow-overflow: 0px 0px 8px 0px oklch(27% 0 0 / 0.16), 0px 0px 1px 0px oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-perimeter: oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-spread: oklch(27% 0 0 / 0.16); --tui-elevation-shadow-overlay: 0px 8px 12px 0px oklch(27% 0 0 / 0.15), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-shadow-raised: 0px 1px 1px 0px oklch(27% 0 0 / 0.25), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-surface: var(--tui-color-transparent); --tui-elevation-surface-container: var(--tui-color-neutral-A100); --tui-elevation-surface-container-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-container-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay: var(--tui-color-transparent); --tui-elevation-surface-overlay-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-raised: var(--tui-color-transparent); --tui-elevation-surface-raised-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-raised-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-sunken: var(--tui-color-neutral-A100); --tui-font-family-mono: "Source Code Pro", ui-monospace, "Consolas", "Menlo", monospace; --tui-font-family-sans: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --tui-font-leading-050: 16px; --tui-font-leading-075: 20px; --tui-font-leading-100: 24px; --tui-font-leading-200: 28px; --tui-font-leading-300: 28px; --tui-font-leading-400: 32px; --tui-font-leading-500: 40px; --tui-font-leading-600: 48px; --tui-font-leading-700: 56px; --tui-font-leading-800: 68px; --tui-font-leading-900: 96px; --tui-font-leading-1000: 116px; --tui-font-size-050: 12px; --tui-font-size-075: 14px; --tui-font-size-100: 16px; --tui-font-size-200: 20px; --tui-font-size-300: 24px; --tui-font-size-400: 28px; --tui-font-size-500: 32px; --tui-font-size-600: 40px; --tui-font-size-700: 48px; --tui-font-size-800: 56px; --tui-font-size-900: 80px; --tui-font-size-1000: 96px; --tui-font-tracking-default: 0rem; --tui-font-weight-bold: 700; --tui-font-weight-medium: 500; --tui-font-weight-regular: 400; --tui-font-weight-semibold: 600; --tui-layer-0: 0; --tui-layer-10: 10; --tui-layer-20: 20; --tui-layer-30: 30; --tui-layer-40: 40; --tui-layer-50: 50; --tui-layer-60: 60; --tui-layer-base: var(--tui-layer-0); --tui-layer-modal: var(--tui-layer-50); --tui-layer-navigation: var(--tui-layer-10); --tui-layer-notification: var(--tui-layer-60); --tui-layer-overlay: var(--tui-layer-40); --tui-layer-popover: var(--tui-layer-30); --tui-layer-sticky: var(--tui-layer-20); --tui-motion-action-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-action-pressed: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-blanket-enter: var(--tui-motion-duration-long) 0ms var(--tui-motion-easing-inout-bold); --tui-motion-blanket-exit: var(--tui-motion-duration-medium) 0ms var(--tui-motion-easing-in-practical); --tui-motion-control-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-selected: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-toggle: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-curve-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6); --tui-motion-curve-inout-bold: cubic-bezier(0.4, 0, 0, 1); --tui-motion-curve-out-bold: cubic-bezier(0, 0.4, 0, 1); --tui-motion-curve-out-practical: cubic-bezier(0.4, 1, 0.6, 1); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-curve-spring: cubic-bezier(0.363, 1.102, 0.089, 1.043); --tui-motion-duration-0: 0ms; --tui-motion-duration-050: 50ms; --tui-motion-duration-100: 100ms; --tui-motion-duration-150: 150ms; --tui-motion-duration-200: 200ms; --tui-motion-duration-250: 250ms; --tui-motion-duration-400: 400ms; --tui-motion-duration-600: 600ms; --tui-motion-duration-instant: var(--tui-motion-duration-0); --tui-motion-duration-long: var(--tui-motion-duration-250); --tui-motion-duration-medium: var(--tui-motion-duration-200); --tui-motion-duration-short: var(--tui-motion-duration-150); --tui-motion-duration-xlong: var(--tui-motion-duration-400); --tui-motion-duration-xshort: var(--tui-motion-duration-100); --tui-motion-duration-xxlong: var(--tui-motion-duration-600); --tui-motion-duration-xxshort: var(--tui-motion-duration-050); --tui-motion-easing-in-practical: var(--tui-motion-curve-in-practical); --tui-motion-easing-inout-bold: var(--tui-motion-curve-inout-bold); --tui-motion-easing-out-bold: var(--tui-motion-curve-out-bold); --tui-motion-easing-out-practical: var(--tui-motion-curve-out-practical); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-easing-spring: var(--tui-motion-curve-spring); /* Corners of a small action (Button sm). */ --tui-shape-action-round: var(--tui-size-radius-lg); /* Corners of a medium action (Button md). */ --tui-shape-action-rounder: var(--tui-size-radius-xl); /* Corners of a large action (Button lg). The roundest action, not always a pill. */ --tui-shape-action-roundest: var(--tui-size-radius-2xl); /* Corners of a box that holds content, such as a card. Follows the surface corners unless a brand sets its own. */ --tui-shape-container-rounder: var(--tui-shape-surface-rounder); --tui-shape-rounder: var(--tui-size-radius-lg); --tui-shape-surface-rounder: var(--tui-size-radius-2xl); --tui-size-border-hairline: var(--tui-size-border-sm); --tui-size-border-md: 2px; --tui-size-border-narrow: var(--tui-size-border-md); --tui-size-border-sm: 1px; --tui-size-icon-lg: var(--tui-space-300); --tui-size-icon-md: var(--tui-space-250); --tui-size-icon-sm: var(--tui-space-200); --tui-size-icon-xs: var(--tui-space-100); --tui-size-radius-2xl: 16px; --tui-size-radius-3xl: 20px; --tui-size-radius-4xl: 24px; --tui-size-radius-full: 9999px; --tui-size-radius-lg: 8px; --tui-size-radius-md: 6px; --tui-size-radius-none: 0px; --tui-size-radius-sm: 4px; --tui-size-radius-xl: 12px; --tui-size-radius-xs: 2px; --tui-space-0: 0px; --tui-space-025: 2px; --tui-space-050: 4px; --tui-space-075: 6px; --tui-space-100: 8px; --tui-space-125: 10px; --tui-space-150: 12px; --tui-space-200: 16px; --tui-space-250: 20px; --tui-space-300: 24px; --tui-space-400: 32px; --tui-space-500: 40px; --tui-space-600: 48px; --tui-space-700: 56px; --tui-space-800: 64px; --tui-space-900: 72px; --tui-space-1000: 80px; --tui-space-1100: 88px; --tui-space-1200: 96px; --tui-space-1300: 104px; --tui-space-1400: 112px; --tui-space-1500: 120px; --tui-space-inline: var(--tui-space-100); --tui-space-inline-dense: var(--tui-space-050); --tui-space-inline-loose: var(--tui-space-150); --tui-space-inline-looser: var(--tui-space-250); --tui-space-inset: var(--tui-space-200); --tui-space-inset-dense: var(--tui-space-100); --tui-space-inset-loose: var(--tui-space-250); --tui-space-inset-looser: var(--tui-space-400); --tui-space-inset-squish: 12px 24px; --tui-space-inset-squish-dense: 8px 24px; --tui-space-inset-squish-loose: 16px 24px; --tui-space-inset-stretch: 8px 16px; --tui-space-inset-stretch-loosest: 16px 16px; --tui-space-negative-025: -2px; --tui-space-negative-050: -4px; --tui-space-negative-075: -6px; --tui-space-negative-100: -8px; --tui-space-negative-150: -12px; --tui-space-negative-200: -16px; --tui-space-negative-250: -20px; --tui-space-negative-300: -24px; --tui-space-negative-400: -32px; --tui-space-stack: var(--tui-space-200); --tui-space-stack-dense: var(--tui-space-100); --tui-space-stack-denser: var(--tui-space-050); --tui-space-stack-loose: var(--tui-space-300); --tui-space-stack-looser: var(--tui-space-400); --tui-space-stack-loosest: var(--tui-space-600); --tui-typography-action-label-lg: var(--tui-typography-action-label-lg-font-weight) var(--tui-typography-action-label-lg-font-size)/var(--tui-typography-action-label-lg-line-height) var(--tui-typography-action-label-lg-font-family); --tui-typography-action-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-action-label-lg-font-size: var(--tui-font-size-100); --tui-typography-action-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-lg-letter-spacing: 0px; --tui-typography-action-label-lg-line-height: 1.5; --tui-typography-action-label-md: var(--tui-typography-action-label-md-font-weight) var(--tui-typography-action-label-md-font-size)/var(--tui-typography-action-label-md-line-height) var(--tui-typography-action-label-md-font-family); --tui-typography-action-label-md-font-family: var(--tui-font-family-sans); --tui-typography-action-label-md-font-size: var(--tui-font-size-075); --tui-typography-action-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-md-letter-spacing: 0px; --tui-typography-action-label-md-line-height: 1.4286; --tui-typography-action-label-xl: var(--tui-typography-action-label-xl-font-weight) var(--tui-typography-action-label-xl-font-size)/var(--tui-typography-action-label-xl-line-height) var(--tui-typography-action-label-xl-font-family); --tui-typography-action-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-action-label-xl-font-size: var(--tui-font-size-200); --tui-typography-action-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-xl-letter-spacing: 0px; --tui-typography-action-label-xl-line-height: 1.4; --tui-typography-body-lg: var(--tui-typography-body-lg-font-weight) var(--tui-typography-body-lg-font-size)/var(--tui-typography-body-lg-line-height) var(--tui-typography-body-lg-font-family); --tui-typography-body-lg-font-family: var(--tui-font-family-sans); --tui-typography-body-lg-font-size: var(--tui-font-size-200); --tui-typography-body-lg-font-weight: var(--tui-font-weight-regular); --tui-typography-body-lg-letter-spacing: 0px; --tui-typography-body-lg-line-height: 1.4; --tui-typography-body-md: var(--tui-typography-body-md-font-weight) var(--tui-typography-body-md-font-size)/var(--tui-typography-body-md-line-height) var(--tui-typography-body-md-font-family); --tui-typography-body-md-font-family: var(--tui-font-family-sans); --tui-typography-body-md-font-size: var(--tui-font-size-100); --tui-typography-body-md-font-weight: var(--tui-font-weight-regular); --tui-typography-body-md-letter-spacing: 0px; --tui-typography-body-md-line-height: 1.5; --tui-typography-body-sm: var(--tui-typography-body-sm-font-weight) var(--tui-typography-body-sm-font-size)/var(--tui-typography-body-sm-line-height) var(--tui-typography-body-sm-font-family); --tui-typography-body-sm-font-family: var(--tui-font-family-sans); --tui-typography-body-sm-font-size: var(--tui-font-size-075); --tui-typography-body-sm-font-weight: var(--tui-font-weight-regular); --tui-typography-body-sm-letter-spacing: 0px; --tui-typography-body-sm-line-height: 1.4286; --tui-typography-body-xs: var(--tui-typography-body-xs-font-weight) var(--tui-typography-body-xs-font-size)/var(--tui-typography-body-xs-line-height) var(--tui-typography-body-xs-font-family); --tui-typography-body-xs-font-family: var(--tui-font-family-sans); --tui-typography-body-xs-font-size: var(--tui-font-size-050); --tui-typography-body-xs-font-weight: var(--tui-font-weight-regular); --tui-typography-body-xs-letter-spacing: 0px; --tui-typography-body-xs-line-height: 1.3333; --tui-typography-code-md: var(--tui-typography-code-md-font-weight) var(--tui-typography-code-md-font-size)/var(--tui-typography-code-md-line-height) var(--tui-typography-code-md-font-family); --tui-typography-code-md-font-family: var(--tui-font-family-mono); --tui-typography-code-md-font-size: var(--tui-font-size-075); --tui-typography-code-md-font-weight: var(--tui-font-weight-regular); --tui-typography-code-md-letter-spacing: 0px; --tui-typography-code-md-line-height: 1.4286; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md: var(--tui-typography-container-heading-md-font-weight) var(--tui-typography-container-heading-md-font-size)/var(--tui-typography-container-heading-md-line-height) var(--tui-typography-container-heading-md-font-family); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-family: var(--tui-font-family-sans); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-size: var(--tui-font-size-200); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-weight: var(--tui-font-weight-bold); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-letter-spacing: 0px; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-line-height: 1.4; --tui-typography-display-lg: var(--tui-typography-display-lg-font-weight) var(--tui-typography-display-lg-font-size)/var(--tui-typography-display-lg-line-height) var(--tui-typography-display-lg-font-family); --tui-typography-display-lg-font-family: var(--tui-font-family-sans); --tui-typography-display-lg-font-size: var(--tui-font-size-900); --tui-typography-display-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-display-lg-letter-spacing: -0.8px; --tui-typography-display-lg-line-height: 1.2; --tui-typography-display-md: var(--tui-typography-display-md-font-weight) var(--tui-typography-display-md-font-size)/var(--tui-typography-display-md-line-height) var(--tui-typography-display-md-font-family); --tui-typography-display-md-font-family: var(--tui-font-family-sans); --tui-typography-display-md-font-size: var(--tui-font-size-800); --tui-typography-display-md-font-weight: var(--tui-font-weight-bold); --tui-typography-display-md-letter-spacing: -0.56px; --tui-typography-display-md-line-height: 1.2143; --tui-typography-display-xl: var(--tui-typography-display-xl-font-weight) var(--tui-typography-display-xl-font-size)/var(--tui-typography-display-xl-line-height) var(--tui-typography-display-xl-font-family); --tui-typography-display-xl-font-family: var(--tui-font-family-sans); --tui-typography-display-xl-font-size: var(--tui-font-size-1000); --tui-typography-display-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-display-xl-letter-spacing: -0.96px; --tui-typography-display-xl-line-height: 1.2083; --tui-typography-heading-lg: var(--tui-typography-heading-lg-font-weight) var(--tui-typography-heading-lg-font-size)/var(--tui-typography-heading-lg-line-height) var(--tui-typography-heading-lg-font-family); --tui-typography-heading-lg-font-family: var(--tui-font-family-sans); --tui-typography-heading-lg-font-size: var(--tui-font-size-400); --tui-typography-heading-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-lg-letter-spacing: -0.28px; --tui-typography-heading-lg-line-height: 1.1429; --tui-typography-heading-md: var(--tui-typography-heading-md-font-weight) var(--tui-typography-heading-md-font-size)/var(--tui-typography-heading-md-line-height) var(--tui-typography-heading-md-font-family); --tui-typography-heading-md-font-family: var(--tui-font-family-sans); --tui-typography-heading-md-font-size: var(--tui-font-size-300); --tui-typography-heading-md-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-md-letter-spacing: 0px; --tui-typography-heading-md-line-height: 1.1667; --tui-typography-heading-sm: var(--tui-typography-heading-sm-font-weight) var(--tui-typography-heading-sm-font-size)/var(--tui-typography-heading-sm-line-height) var(--tui-typography-heading-sm-font-family); --tui-typography-heading-sm-font-family: var(--tui-font-family-sans); --tui-typography-heading-sm-font-size: var(--tui-font-size-200); --tui-typography-heading-sm-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-sm-letter-spacing: 0px; --tui-typography-heading-sm-line-height: 1.4; --tui-typography-heading-xl: var(--tui-typography-heading-xl-font-weight) var(--tui-typography-heading-xl-font-size)/var(--tui-typography-heading-xl-line-height) var(--tui-typography-heading-xl-font-family); --tui-typography-heading-xl-font-family: var(--tui-font-family-sans); --tui-typography-heading-xl-font-size: var(--tui-font-size-500); --tui-typography-heading-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-xl-letter-spacing: -0.32px; --tui-typography-heading-xl-line-height: 1.25; --tui-typography-label-lg: var(--tui-typography-label-lg-font-weight) var(--tui-typography-label-lg-font-size)/var(--tui-typography-label-lg-line-height) var(--tui-typography-label-lg-font-family); --tui-typography-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-label-lg-font-size: var(--tui-font-size-100); --tui-typography-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-lg-letter-spacing: 0px; --tui-typography-label-lg-line-height: 1.5; --tui-typography-label-md: var(--tui-typography-label-md-font-weight) var(--tui-typography-label-md-font-size)/var(--tui-typography-label-md-line-height) var(--tui-typography-label-md-font-family); --tui-typography-label-md-font-family: var(--tui-font-family-sans); --tui-typography-label-md-font-size: var(--tui-font-size-075); --tui-typography-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-md-letter-spacing: 0px; --tui-typography-label-md-line-height: 1.4286; --tui-typography-label-xl: var(--tui-typography-label-xl-font-weight) var(--tui-typography-label-xl-font-size)/var(--tui-typography-label-xl-line-height) var(--tui-typography-label-xl-font-family); --tui-typography-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-label-xl-font-size: var(--tui-font-size-200); --tui-typography-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-xl-letter-spacing: 0px; --tui-typography-label-xl-line-height: 1.4; } } } @layer tokens { :root[data-color-scheme="dark"][data-sub-theme="digestive"] { --tui-color-background-accent-green: var(--tui-color-green-500); --tui-color-background-accent-green-bold: var(--tui-color-green-700); --tui-color-background-accent-green-subtle: var(--tui-color-green-100); --tui-color-background-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-background-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-background-accent-steel-subtle: var(--tui-color-rexall-steel-500); --tui-color-background-accent-teal: var(--tui-color-teal-500); --tui-color-background-accent-teal-bold: var(--tui-color-teal-700); --tui-color-background-accent-teal-subtle: var(--tui-color-teal-500); --tui-color-background-brand: var(--tui-color-teal-500); --tui-color-background-brand-bold: var(--tui-color-teal-700); --tui-color-background-brand-bold-hovered: var(--tui-color-teal-800); --tui-color-background-brand-bold-pressed: var(--tui-color-teal-900); --tui-color-background-brand-subtle: var(--tui-color-teal-100); --tui-color-background-brand-subtle-hovered: var(--tui-color-teal-200); --tui-color-background-brand-subtle-pressed: var(--tui-color-teal-300); --tui-color-background-danger: var(--tui-color-red-700); --tui-color-background-danger-bold: var(--tui-color-red-700); --tui-color-background-danger-hovered: var(--tui-color-red-800); --tui-color-background-danger-pressed: var(--tui-color-red-900); --tui-color-background-danger-subtle: var(--tui-color-red-100); --tui-color-background-danger-subtle-hovered: var(--tui-color-red-200); --tui-color-background-danger-subtle-pressed: var(--tui-color-red-300); --tui-color-background-disabled: var(--tui-color-neutral-100); --tui-color-background-hovered: var(--tui-color-neutral-100); --tui-color-background-information: var(--tui-color-rexall-steel-500); --tui-color-background-information-bold: var(--tui-color-rexall-steel-700); --tui-color-background-information-subtle: var(--tui-color-rexall-steel-100); --tui-color-background-inverse: var(--tui-color-neutral-900); --tui-color-background-inverse-hovered: var(--tui-color-neutral-1000); --tui-color-background-inverse-pressed: var(--tui-color-neutral-800); --tui-color-background-neutral: var(--tui-color-neutral-400); --tui-color-background-neutral-bold: var(--tui-color-neutral-700); --tui-color-background-neutral-hovered: var(--tui-color-neutral-300); --tui-color-background-neutral-pressed: var(--tui-color-neutral-500); --tui-color-background-neutral-subtle: var(--tui-color-neutral-200); --tui-color-background-neutral-subtle-hovered: var(--tui-color-neutral-100); --tui-color-background-neutral-subtle-pressed: var(--tui-color-neutral-300); --tui-color-background-pressed: var(--tui-color-neutral-200); --tui-color-background-selected: var(--tui-color-teal-100); --tui-color-background-success: var(--tui-color-green-500); --tui-color-background-success-bold: var(--tui-color-green-700); --tui-color-background-success-subtle: var(--tui-color-green-100); --tui-color-background-warning: var(--tui-color-yellow-300); --tui-color-background-warning-bold: var(--tui-color-yellow-300); --tui-color-background-warning-subtle: var(--tui-color-yellow-100); --tui-color-black: oklch(0% 0 0); --tui-color-blanket-background: var(--tui-color-neutral-900); --tui-color-border: var(--tui-color-neutral-300); --tui-color-border-accent-green: var(--tui-color-green-500); --tui-color-border-accent-green-bold: var(--tui-color-green-700); --tui-color-border-accent-green-subtle: var(--tui-color-green-300); --tui-color-border-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-border-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-border-accent-steel-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-accent-teal: var(--tui-color-teal-500); --tui-color-border-accent-teal-bold: var(--tui-color-teal-700); --tui-color-border-accent-teal-subtle: var(--tui-color-teal-300); --tui-color-border-brand: var(--tui-color-teal-700); --tui-color-border-brand-bold: var(--tui-color-teal-700); --tui-color-border-brand-hovered: var(--tui-color-teal-800); --tui-color-border-brand-pressed: var(--tui-color-teal-900); --tui-color-border-brand-subtle: var(--tui-color-teal-300); --tui-color-border-danger: var(--tui-color-red-600); --tui-color-border-danger-bold: var(--tui-color-red-700); --tui-color-border-danger-hovered: var(--tui-color-red-700); --tui-color-border-danger-pressed: var(--tui-color-red-800); --tui-color-border-danger-subtle: var(--tui-color-red-300); --tui-color-border-disabled: var(--tui-color-neutral-200); --tui-color-border-focus: var(--tui-color-neutral-1000); --tui-color-border-information: var(--tui-color-rexall-steel-600); --tui-color-border-information-bold: var(--tui-color-rexall-steel-700); --tui-color-border-information-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-inverse-focus: var(--tui-color-white); --tui-color-border-neutral: var(--tui-color-neutral-300); --tui-color-border-neutral-bold: var(--tui-color-neutral-600); --tui-color-border-neutral-bold-hovered: var(--tui-color-neutral-700); --tui-color-border-neutral-bold-pressed: var(--tui-color-neutral-800); --tui-color-border-neutral-hovered: var(--tui-color-neutral-200); --tui-color-border-neutral-pressed: var(--tui-color-neutral-400); --tui-color-border-neutral-subtle: var(--tui-color-neutral-300); --tui-color-border-neutral-subtlest: var(--tui-color-neutral-200); --tui-color-border-selected: var(--tui-color-teal-700); --tui-color-border-success: var(--tui-color-green-700); --tui-color-border-success-bold: var(--tui-color-green-700); --tui-color-border-success-subtle: var(--tui-color-green-300); --tui-color-border-warning: var(--tui-color-yellow-600); --tui-color-border-warning-bold: var(--tui-color-yellow-700); --tui-color-border-warning-subtle: var(--tui-color-yellow-300); --tui-color-container-background: var(--tui-color-white); --tui-color-container-background-accent-green: var(--tui-color-background-accent-green); --tui-color-container-background-accent-green-bold: var(--tui-color-background-accent-green-bold); --tui-color-container-background-accent-green-subtle: var(--tui-color-background-accent-green-subtle); --tui-color-container-background-accent-steel: var(--tui-color-background-accent-steel); --tui-color-container-background-accent-steel-bold: var(--tui-color-background-accent-steel-bold); --tui-color-container-background-accent-steel-subtle: var(--tui-color-background-accent-steel-subtle); --tui-color-container-background-accent-teal: var(--tui-color-background-accent-teal); --tui-color-container-background-accent-teal-bold: var(--tui-color-background-accent-teal-bold); --tui-color-container-background-accent-teal-subtle: var(--tui-color-background-accent-teal-subtle); --tui-color-container-background-brand: var(--tui-color-background-brand); --tui-color-container-background-brand-bold: var(--tui-color-background-brand-bold); --tui-color-container-background-brand-subtle: var(--tui-color-background-brand-subtle); --tui-color-container-background-danger: var(--tui-color-background-danger); --tui-color-container-background-danger-bold: var(--tui-color-background-danger-bold); --tui-color-container-background-danger-subtle: var(--tui-color-background-danger-subtle); --tui-color-container-background-information: var(--tui-color-background-information); --tui-color-container-background-information-bold: var(--tui-color-background-information-bold); --tui-color-container-background-information-subtle: var(--tui-color-background-information-subtle); --tui-color-container-background-neutral: var(--tui-color-background-neutral); --tui-color-container-background-neutral-bold: var(--tui-color-background-inverse); --tui-color-container-background-neutral-subtle: var(--tui-color-surface-background-neutral-subtle); --tui-color-container-background-success: var(--tui-color-background-success); --tui-color-container-background-success-bold: var(--tui-color-background-success-bold); --tui-color-container-background-success-subtle: var(--tui-color-background-success-subtle); --tui-color-container-background-warning: var(--tui-color-background-warning); --tui-color-container-background-warning-bold: var(--tui-color-background-warning-bold); --tui-color-container-background-warning-subtle: var(--tui-color-background-warning-subtle); --tui-color-container-border: var(--tui-color-neutral-300); --tui-color-container-border-accent-green: var(--tui-color-border-accent-green); --tui-color-container-border-accent-green-bold: var(--tui-color-border-accent-green-bold); --tui-color-container-border-accent-green-subtle: var(--tui-color-border-accent-green-subtle); --tui-color-container-border-accent-steel: var(--tui-color-border-accent-steel); --tui-color-container-border-accent-steel-bold: var(--tui-color-border-accent-steel-bold); --tui-color-container-border-accent-steel-subtle: var(--tui-color-border-accent-steel-subtle); --tui-color-container-border-accent-teal: var(--tui-color-border-accent-teal); --tui-color-container-border-accent-teal-bold: var(--tui-color-border-accent-teal-bold); --tui-color-container-border-accent-teal-subtle: var(--tui-color-border-accent-teal-subtle); --tui-color-container-border-brand: var(--tui-color-border-brand); --tui-color-container-border-brand-bold: var(--tui-color-border-brand-bold); --tui-color-container-border-brand-subtle: var(--tui-color-border-brand-subtle); --tui-color-container-border-danger: var(--tui-color-border-danger); --tui-color-container-border-danger-bold: var(--tui-color-border-danger-bold); --tui-color-container-border-danger-subtle: var(--tui-color-border-danger-subtle); --tui-color-container-border-information: var(--tui-color-border-information); --tui-color-container-border-information-bold: var(--tui-color-border-information-bold); --tui-color-container-border-information-subtle: var(--tui-color-border-information-subtle); --tui-color-container-border-neutral: var(--tui-color-border-neutral); --tui-color-container-border-neutral-bold: var(--tui-color-border-neutral-bold); --tui-color-container-border-neutral-subtle: var(--tui-color-border-neutral-subtle); --tui-color-container-border-success: var(--tui-color-border-success); --tui-color-container-border-success-bold: var(--tui-color-border-success-bold); --tui-color-container-border-success-subtle: var(--tui-color-border-success-subtle); --tui-color-container-border-warning: var(--tui-color-border-warning); --tui-color-container-border-warning-bold: var(--tui-color-border-warning-bold); --tui-color-container-border-warning-subtle: var(--tui-color-border-warning-subtle); /* Text inside a box that holds content, such as a card. */ --tui-color-container-text: var(--tui-color-text); /* Secondary text inside a box that holds content. */ --tui-color-container-text-neutral-subtle: var(--tui-color-text-neutral-subtle); --tui-color-green-100: oklch(95.8% 0.0339 134); --tui-color-green-200: oklch(91% 0.0654 134); --tui-color-green-300: oklch(86% 0.0956 134); --tui-color-green-400: oklch(79.5% 0.1328 134); --tui-color-green-500: var(--tui-color-rexall-well-green); --tui-color-green-600: oklch(63.5% 0.1512 134); --tui-color-green-700: oklch(54.5% 0.1328 134); --tui-color-green-800: oklch(45.5% 0.1139 134); --tui-color-green-900: oklch(36.5% 0.0944 134); --tui-color-green-1000: oklch(27% 0.0731 134); --tui-color-icon: var(--tui-color-neutral-900); --tui-color-icon-brand: var(--tui-color-teal-700); --tui-color-icon-danger: var(--tui-color-red-700); --tui-color-icon-disabled: var(--tui-color-neutral-600); --tui-color-icon-information: var(--tui-color-rexall-steel-700); --tui-color-icon-inverse: var(--tui-color-white); --tui-color-icon-neutral-subtle: var(--tui-color-neutral-700); --tui-color-icon-success: var(--tui-color-green-700); --tui-color-icon-warning: var(--tui-color-yellow-700); --tui-color-input-background: var(--tui-color-white); --tui-color-input-background-disabled: var(--tui-color-neutral-100); --tui-color-input-border: var(--tui-color-neutral-600); --tui-color-link-text: var(--tui-color-teal-700); --tui-color-link-text-hovered: var(--tui-color-teal-800); --tui-color-link-text-inverse: var(--tui-color-text-inverse); --tui-color-link-text-inverse-hovered: var(--tui-color-text-inverse); --tui-color-link-text-inverse-pressed: var(--tui-color-text-inverse); --tui-color-link-text-inverse-visited: var(--tui-color-text-inverse); --tui-color-link-text-neutral: var(--tui-color-text-neutral); --tui-color-link-text-neutral-hovered: var(--tui-color-text-neutral-hovered); --tui-color-link-text-neutral-pressed: var(--tui-color-text-neutral-pressed); --tui-color-link-text-neutral-visited: var(--tui-color-text-neutral); --tui-color-link-text-pressed: var(--tui-color-teal-800); --tui-color-link-text-visited: var(--tui-color-magenta-700); --tui-color-magenta-100: oklch(95.8% 0.0241 351.2); --tui-color-magenta-200: oklch(91% 0.0541 351.2); --tui-color-magenta-300: oklch(86% 0.0816 351.2); --tui-color-magenta-400: oklch(79.5% 0.1047 351.2); --tui-color-magenta-500: oklch(71.5% 0.13 351.2); --tui-color-magenta-600: oklch(63.5% 0.153 351.2); --tui-color-magenta-700: var(--tui-color-rexall-berry-purple); --tui-color-magenta-800: oklch(45.5% 0.1676 351.2); --tui-color-magenta-900: oklch(36.5% 0.1389 351.2); --tui-color-magenta-1000: oklch(27% 0.1075 351.2); --tui-color-neutral-100: oklch(95.8% 0 0); --tui-color-neutral-200: oklch(91% 0 0); --tui-color-neutral-300: oklch(86% 0 0); --tui-color-neutral-400: oklch(79.5% 0 0); --tui-color-neutral-500: oklch(71.5% 0 0); --tui-color-neutral-600: oklch(63.5% 0 0); --tui-color-neutral-700: oklch(54.5% 0 0); --tui-color-neutral-800: oklch(45.5% 0 0); --tui-color-neutral-900: var(--tui-color-rexall-charcoal-grey); --tui-color-neutral-1000: oklch(27% 0 0); --tui-color-neutral-A100: oklch(10.78% 0 0 / 0.056); --tui-color-neutral-A200: oklch(7.66% 0 0 / 0.118); --tui-color-neutral-A300: oklch(6.76% 0 0 / 0.182); --tui-color-neutral-A400: oklch(6.59% 0 0 / 0.264); --tui-color-neutral-A500: oklch(5.18% 0 0 / 0.362); --tui-color-neutral-A600: oklch(1.98% 0 0 / 0.457); --tui-color-neutral-A700: oklch(0% 0 0 / 0.561); --tui-color-neutral-A800: oklch(3.14% 0 0 / 0.661); --tui-color-neutral-A900: oklch(4.4% 0 0 / 0.797); --tui-color-neutral-A1000: oklch(3.14% 0 0 / 0.85); --tui-color-orange-100: oklch(95.8% 0.023 48.9); --tui-color-orange-200: oklch(91% 0.0514 48.9); --tui-color-orange-300: oklch(86% 0.0834 48.9); --tui-color-orange-400: oklch(79.5% 0.1188 48.9); --tui-color-orange-500: oklch(71.5% 0.1528 48.9); --tui-color-orange-600: var(--tui-color-rexall-terracotta-orange); --tui-color-orange-700: oklch(54.5% 0.1463 48.9); --tui-color-orange-800: oklch(45.5% 0.1222 48.9); --tui-color-orange-900: oklch(36.5% 0.098 48.9); --tui-color-orange-1000: oklch(27% 0.0725 48.9); --tui-color-pink-100: oklch(95.8% 0.0216 5); --tui-color-pink-200: oklch(91% 0.0485 5); --tui-color-pink-300: oklch(86% 0.0792 5); --tui-color-pink-400: oklch(79.5% 0.1241 5); --tui-color-pink-500: oklch(71.5% 0.1644 5); --tui-color-pink-600: var(--tui-color-rexall-tulip-pink); --tui-color-pink-700: oklch(54.5% 0.1544 5); --tui-color-pink-800: oklch(45.5% 0.1324 5); --tui-color-pink-900: oklch(36.5% 0.1098 5); --tui-color-pink-1000: oklch(27% 0.085 5); --tui-color-red-100: oklch(95.8% 0.0206 23.7); --tui-color-red-200: oklch(91% 0.0462 23.7); --tui-color-red-300: oklch(86% 0.0754 23.7); --tui-color-red-400: oklch(79.5% 0.1177 23.7); --tui-color-red-500: oklch(71.5% 0.1783 23.7); --tui-color-red-600: var(--tui-color-rexall-ladybug-red); --tui-color-red-700: oklch(54.5% 0.2142 23.7); --tui-color-red-800: oklch(45.5% 0.1837 23.7); --tui-color-red-900: oklch(36.5% 0.1475 23.7); --tui-color-red-1000: oklch(27% 0.1091 23.7); /* Be Well */ --tui-color-rexall-apricot-orange: oklch(71.4% 0.1525 56.134); /* Skin Health */ --tui-color-rexall-ash: oklch(90% 0.0027 106.45); /* Rexall */ --tui-color-rexall-banana-yellow: oklch(95.33% 0.0757 95.318); /* Berry Purple — magenta anchor */ --tui-color-rexall-berry-purple: oklch(51.17% 0.1852 351.18); /* Rexall */ --tui-color-rexall-blush-pink: oklch(58.59% 0.1586 4.6101); /* Be Well promo */ --tui-color-rexall-blush-red: oklch(86.8% 0.055 21.054); /* Be Well promo */ --tui-color-rexall-burgundy-red: oklch(45.44% 0.1821 28.716); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-calming-blue-haze: oklch(80.84% 0.0387 249.54); /* Charcoal Grey — neutral anchor */ --tui-color-rexall-charcoal-grey: oklch(32.5% 0 0); /* Rexall */ --tui-color-rexall-cloud-grey: oklch(84.52% 0 0); /* Be Well promo */ --tui-color-rexall-cream-yellow: oklch(99.23% 0.0159 98.986); /* Be Well promo */ --tui-color-rexall-daisy-yellow: oklch(92.84% 0.1204 106.48); /* Rexall AODA */ --tui-color-rexall-deep-ocean: oklch(42.34% 0.0723 194.8); /* Be Well promo */ --tui-color-rexall-dusty-red: oklch(50.13% 0.1755 23.713); /* Be Well */ --tui-color-rexall-evergreen: oklch(51.19% 0.0835 138.17); /* Rexall */ --tui-color-rexall-fog-grey: oklch(97.91% 0 0); /* Be Well */ --tui-color-rexall-forest-green: oklch(45.31% 0.073 146.02); /* Be Well */ --tui-color-rexall-garden-green: oklch(54.77% 0.0953 138.22); /* Be Well */ --tui-color-rexall-granite-grey: oklch(53.49% 0.005 17.313); /* Rexall */ --tui-color-rexall-grapefruit: oklch(95.01% 0.0848 98.329); /* Rexall */ --tui-color-rexall-grass-green: oklch(78.93% 0.1268 133.59); /* Be Well */ --tui-color-rexall-grey-blue: oklch(59.99% 0.0929 185.62); /* Be Well promo */ --tui-color-rexall-highlighter-yellow: oklch(92.14% 0.1824 105.41); /* Digestive */ --tui-color-rexall-immunity-orange: oklch(71.08% 0.1395 51.737); /* Ladybug Red — red anchor */ --tui-color-rexall-ladybug-red: oklch(60.41% 0.2338 23.742); /* Rexall AODA */ --tui-color-rexall-lakeside-blue: oklch(52.74% 0.0872 187.63); /* Be Well */ --tui-color-rexall-lavender-purple: oklch(89.47% 0.0375 342.55); /* Rexall */ --tui-color-rexall-lemon-yellow: oklch(88.28% 0.1811 94.46); /* Rexall */ --tui-color-rexall-light-blush-pink: oklch(85.56% 0.0673 10.506); /* Rexall */ --tui-color-rexall-light-drizzle: oklch(91.04% 0.0336 191.96); /* Be Well promo */ --tui-color-rexall-light-red: oklch(94.46% 0.0142 12.025); /* Be Well */ --tui-color-rexall-lime-green: oklch(75.39% 0.152 134.81); /* Be Well promo */ --tui-color-rexall-lipstick-red: oklch(62.76% 0.2141 23.004); /* Be Well */ --tui-color-rexall-melon-orange: oklch(85.06% 0.0788 62.059); /* Rexall */ --tui-color-rexall-mist-blue: oklch(95.8% 0.0169 192.36); /* Be Well */ --tui-color-rexall-moss-green: oklch(64.94% 0.1505 133.89); /* Be Well */ --tui-color-rexall-night-grey: oklch(42.18% 0.0031 48.66); /* Be Well */ --tui-color-rexall-pansy-purple: oklch(79.17% 0.0759 344.13); /* Be Well */ --tui-color-rexall-peachy-orange: oklch(92.38% 0.0385 63.533); /* Be Well promo */ --tui-color-rexall-pinky-red: oklch(96.91% 0.0151 17.418); /* Be Well */ --tui-color-rexall-plum-purple: oklch(59.35% 0.1561 347.67); /* Poolside Blue — teal anchor */ --tui-color-rexall-poolside-blue: oklch(68.76% 0.1147 188.23); /* Rexall */ --tui-color-rexall-rain-blue: oklch(87.81% 0.0553 193.35); /* Be Well promo */ --tui-color-rexall-rosy-red: oklch(69.56% 0.183 23.103); /* Rexall */ --tui-color-rexall-ruby-red: oklch(57.73% 0.2098 23.23); /* Rexall */ --tui-color-rexall-sage-green: oklch(88.81% 0.0662 132.17); /* Be Well */ --tui-color-rexall-seaside-blue: oklch(49.86% 0.0891 182.42); /* Rexall AODA */ --tui-color-rexall-shoreline-blue: oklch(63.95% 0.1102 188.54); /* Be Well */ --tui-color-rexall-silver-grey: oklch(66.37% 0.0049 0.0752); /* Be Well */ --tui-color-rexall-sky-blue: oklch(84.85% 0.0638 193.53); /* Rexall */ --tui-color-rexall-slate-grey: oklch(53.82% 0 0); --tui-color-rexall-steel: oklch(52.12% 0.0301 259.03); --tui-color-rexall-steel-100: oklch(95.8% 0.0077 249.5); --tui-color-rexall-steel-200: oklch(91% 0.0173 249.5); --tui-color-rexall-steel-300: oklch(86% 0.0277 249.5); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-steel-400: var(--tui-color-rexall-calming-blue-haze); --tui-color-rexall-steel-500: oklch(71.5% 0.0348 249.5); --tui-color-rexall-steel-600: oklch(63.5% 0.0315 249.5); --tui-color-rexall-steel-700: oklch(54.5% 0.0276 249.5); --tui-color-rexall-steel-800: oklch(45.5% 0.0237 249.5); --tui-color-rexall-steel-900: oklch(36.5% 0.0196 249.5); --tui-color-rexall-steel-1000: oklch(27% 0.0152 249.5); /* Sunshine Yellow — yellow anchor */ --tui-color-rexall-sunshine-yellow: oklch(86.72% 0.1773 90.85); /* Be Well promo */ --tui-color-rexall-taupe-red: oklch(75.68% 0.0781 13.998); /* Rexall */ --tui-color-rexall-tea-green: oklch(95.59% 0.0563 131.52); /* Be Well */ --tui-color-rexall-teal-blue: oklch(68.53% 0.0897 185.9); /* Terracotta Orange — orange anchor */ --tui-color-rexall-terracotta-orange: oklch(65.65% 0.1764 48.889); /* Tulip Pink — pink anchor */ --tui-color-rexall-tulip-pink: oklch(67.04% 0.1842 5.0399); /* Be Well promo */ --tui-color-rexall-vanilla-yellow: oklch(95.6% 0.072 105.12); /* Be Well */ --tui-color-rexall-venice-blue: oklch(40.54% 0.0851 236.88); /* Be Well */ --tui-color-rexall-washed-blue: oklch(78.7% 0.0619 185.5); /* Well Green — green anchor */ --tui-color-rexall-well-green: oklch(72.73% 0.1698 134.03); /* Digestive */ --tui-color-rexall-well-green-deep: oklch(50.28% 0.1219 142.99); --tui-color-surface-background: var(--tui-color-white); --tui-color-surface-background-brand: var(--tui-color-rexall-shoreline-blue); /* A page or section tinted with the brand. Plain surface unless a brand sets a tint. */ --tui-color-surface-background-brand-subtle: var(--tui-color-surface-background); --tui-color-surface-background-neutral-subtle: var(--tui-color-neutral-100); --tui-color-tag-background-accent-green: var(--tui-color-green-100); --tui-color-tag-background-accent-magenta: var(--tui-color-magenta-100); --tui-color-tag-background-accent-neutral: var(--tui-color-neutral-100); --tui-color-tag-background-accent-orange: var(--tui-color-orange-100); --tui-color-tag-background-accent-pink: var(--tui-color-pink-100); --tui-color-tag-background-accent-steel: var(--tui-color-rexall-steel-100); --tui-color-tag-background-accent-teal: var(--tui-color-teal-100); --tui-color-tag-background-accent-yellow: var(--tui-color-yellow-100); --tui-color-tag-text-accent-green: var(--tui-color-green-800); --tui-color-tag-text-accent-magenta: var(--tui-color-magenta-800); --tui-color-tag-text-accent-neutral: var(--tui-color-neutral-800); --tui-color-tag-text-accent-orange: var(--tui-color-orange-800); --tui-color-tag-text-accent-pink: var(--tui-color-pink-800); --tui-color-tag-text-accent-steel: var(--tui-color-rexall-steel-800); --tui-color-tag-text-accent-teal: var(--tui-color-teal-800); --tui-color-tag-text-accent-yellow: var(--tui-color-yellow-800); --tui-color-teal-100: oklch(95.8% 0.0229 188.2); --tui-color-teal-200: oklch(91% 0.0422 188.2); --tui-color-teal-300: oklch(86% 0.0602 188.2); --tui-color-teal-400: oklch(79.5% 0.0818 188.2); /* Poolside Blue — teal anchor */ --tui-color-teal-500: var(--tui-color-rexall-poolside-blue); --tui-color-teal-600: oklch(63.5% 0.1071 188.2); --tui-color-teal-700: oklch(54.5% 0.0941 188.2); --tui-color-teal-800: oklch(45.5% 0.079 188.2); --tui-color-teal-900: oklch(36.5% 0.0634 188.2); --tui-color-teal-1000: oklch(27% 0.0469 188.2); --tui-color-text: var(--tui-color-neutral-900); --tui-color-text-brand: var(--tui-color-teal-800); --tui-color-text-brand-hovered: var(--tui-color-teal-900); --tui-color-text-brand-pressed: var(--tui-color-teal-900); --tui-color-text-danger: var(--tui-color-red-700); --tui-color-text-danger-hovered: var(--tui-color-red-800); --tui-color-text-danger-pressed: var(--tui-color-red-800); --tui-color-text-disabled: var(--tui-color-neutral-600); --tui-color-text-information: var(--tui-color-rexall-steel-700); --tui-color-text-inverse: var(--tui-color-white); --tui-color-text-neutral: var(--tui-color-neutral-900); --tui-color-text-neutral-hovered: var(--tui-color-neutral-800); --tui-color-text-neutral-pressed: var(--tui-color-neutral-1000); --tui-color-text-neutral-subtle: var(--tui-color-neutral-800); --tui-color-text-success: var(--tui-color-green-700); --tui-color-text-warning: var(--tui-color-yellow-700); --tui-color-transparent: oklch(0% 0 0 / 0); --tui-color-white: oklch(100% 0 0); --tui-color-yellow-100: oklch(95.8% 0.0354 90.8); --tui-color-yellow-200: oklch(91% 0.1029 90.8); /* Sunshine Yellow — yellow anchor */ --tui-color-yellow-300: var(--tui-color-rexall-sunshine-yellow); --tui-color-yellow-400: oklch(79.5% 0.1624 88.3); --tui-color-yellow-500: oklch(71.5% 0.1463 85.7); --tui-color-yellow-600: oklch(63.5% 0.1305 83.1); --tui-color-yellow-700: oklch(54.5% 0.1126 80.6); --tui-color-yellow-800: oklch(45.5% 0.0948 78); --tui-color-yellow-900: oklch(36.5% 0.0768 75.4); --tui-color-yellow-1000: oklch(27% 0.0575 72.8); --tui-elevation-shadow-overflow: 0px 0px 8px 0px oklch(27% 0 0 / 0.16), 0px 0px 1px 0px oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-perimeter: oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-spread: oklch(27% 0 0 / 0.16); --tui-elevation-shadow-overlay: 0px 8px 12px 0px oklch(27% 0 0 / 0.15), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-shadow-raised: 0px 1px 1px 0px oklch(27% 0 0 / 0.25), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-surface: var(--tui-color-transparent); --tui-elevation-surface-container: var(--tui-color-neutral-A100); --tui-elevation-surface-container-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-container-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay: var(--tui-color-transparent); --tui-elevation-surface-overlay-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-raised: var(--tui-color-transparent); --tui-elevation-surface-raised-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-raised-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-sunken: var(--tui-color-neutral-A100); --tui-font-family-mono: "Source Code Pro", ui-monospace, "Consolas", "Menlo", monospace; --tui-font-family-sans: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --tui-font-leading-050: 16px; --tui-font-leading-075: 20px; --tui-font-leading-100: 24px; --tui-font-leading-200: 28px; --tui-font-leading-300: 28px; --tui-font-leading-400: 32px; --tui-font-leading-500: 40px; --tui-font-leading-600: 48px; --tui-font-leading-700: 56px; --tui-font-leading-800: 68px; --tui-font-leading-900: 96px; --tui-font-leading-1000: 116px; --tui-font-size-050: 12px; --tui-font-size-075: 14px; --tui-font-size-100: 16px; --tui-font-size-200: 20px; --tui-font-size-300: 24px; --tui-font-size-400: 28px; --tui-font-size-500: 32px; --tui-font-size-600: 40px; --tui-font-size-700: 48px; --tui-font-size-800: 56px; --tui-font-size-900: 80px; --tui-font-size-1000: 96px; --tui-font-tracking-default: 0rem; --tui-font-weight-bold: 700; --tui-font-weight-medium: 500; --tui-font-weight-regular: 400; --tui-font-weight-semibold: 600; --tui-layer-0: 0; --tui-layer-10: 10; --tui-layer-20: 20; --tui-layer-30: 30; --tui-layer-40: 40; --tui-layer-50: 50; --tui-layer-60: 60; --tui-layer-base: var(--tui-layer-0); --tui-layer-modal: var(--tui-layer-50); --tui-layer-navigation: var(--tui-layer-10); --tui-layer-notification: var(--tui-layer-60); --tui-layer-overlay: var(--tui-layer-40); --tui-layer-popover: var(--tui-layer-30); --tui-layer-sticky: var(--tui-layer-20); --tui-motion-action-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-action-pressed: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-blanket-enter: var(--tui-motion-duration-long) 0ms var(--tui-motion-easing-inout-bold); --tui-motion-blanket-exit: var(--tui-motion-duration-medium) 0ms var(--tui-motion-easing-in-practical); --tui-motion-control-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-selected: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-toggle: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-curve-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6); --tui-motion-curve-inout-bold: cubic-bezier(0.4, 0, 0, 1); --tui-motion-curve-out-bold: cubic-bezier(0, 0.4, 0, 1); --tui-motion-curve-out-practical: cubic-bezier(0.4, 1, 0.6, 1); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-curve-spring: cubic-bezier(0.363, 1.102, 0.089, 1.043); --tui-motion-duration-0: 0ms; --tui-motion-duration-050: 50ms; --tui-motion-duration-100: 100ms; --tui-motion-duration-150: 150ms; --tui-motion-duration-200: 200ms; --tui-motion-duration-250: 250ms; --tui-motion-duration-400: 400ms; --tui-motion-duration-600: 600ms; --tui-motion-duration-instant: var(--tui-motion-duration-0); --tui-motion-duration-long: var(--tui-motion-duration-250); --tui-motion-duration-medium: var(--tui-motion-duration-200); --tui-motion-duration-short: var(--tui-motion-duration-150); --tui-motion-duration-xlong: var(--tui-motion-duration-400); --tui-motion-duration-xshort: var(--tui-motion-duration-100); --tui-motion-duration-xxlong: var(--tui-motion-duration-600); --tui-motion-duration-xxshort: var(--tui-motion-duration-050); --tui-motion-easing-in-practical: var(--tui-motion-curve-in-practical); --tui-motion-easing-inout-bold: var(--tui-motion-curve-inout-bold); --tui-motion-easing-out-bold: var(--tui-motion-curve-out-bold); --tui-motion-easing-out-practical: var(--tui-motion-curve-out-practical); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-easing-spring: var(--tui-motion-curve-spring); /* Corners of a small action (Button sm). */ --tui-shape-action-round: var(--tui-size-radius-lg); /* Corners of a medium action (Button md). */ --tui-shape-action-rounder: var(--tui-size-radius-xl); /* Corners of a large action (Button lg). The roundest action, not always a pill. */ --tui-shape-action-roundest: var(--tui-size-radius-2xl); /* Corners of a box that holds content, such as a card. Follows the surface corners unless a brand sets its own. */ --tui-shape-container-rounder: var(--tui-shape-surface-rounder); --tui-shape-rounder: var(--tui-size-radius-lg); --tui-shape-surface-rounder: var(--tui-size-radius-2xl); --tui-size-border-hairline: var(--tui-size-border-sm); --tui-size-border-md: 2px; --tui-size-border-narrow: var(--tui-size-border-md); --tui-size-border-sm: 1px; --tui-size-icon-lg: var(--tui-space-300); --tui-size-icon-md: var(--tui-space-250); --tui-size-icon-sm: var(--tui-space-200); --tui-size-icon-xs: var(--tui-space-100); --tui-size-radius-2xl: 16px; --tui-size-radius-3xl: 20px; --tui-size-radius-4xl: 24px; --tui-size-radius-full: 9999px; --tui-size-radius-lg: 8px; --tui-size-radius-md: 6px; --tui-size-radius-none: 0px; --tui-size-radius-sm: 4px; --tui-size-radius-xl: 12px; --tui-size-radius-xs: 2px; --tui-space-0: 0px; --tui-space-025: 2px; --tui-space-050: 4px; --tui-space-075: 6px; --tui-space-100: 8px; --tui-space-125: 10px; --tui-space-150: 12px; --tui-space-200: 16px; --tui-space-250: 20px; --tui-space-300: 24px; --tui-space-400: 32px; --tui-space-500: 40px; --tui-space-600: 48px; --tui-space-700: 56px; --tui-space-800: 64px; --tui-space-900: 72px; --tui-space-1000: 80px; --tui-space-1100: 88px; --tui-space-1200: 96px; --tui-space-1300: 104px; --tui-space-1400: 112px; --tui-space-1500: 120px; --tui-space-inline: var(--tui-space-100); --tui-space-inline-dense: var(--tui-space-050); --tui-space-inline-loose: var(--tui-space-150); --tui-space-inline-looser: var(--tui-space-250); --tui-space-inset: var(--tui-space-200); --tui-space-inset-dense: var(--tui-space-100); --tui-space-inset-loose: var(--tui-space-250); --tui-space-inset-looser: var(--tui-space-400); --tui-space-inset-squish: 12px 24px; --tui-space-inset-squish-dense: 8px 24px; --tui-space-inset-squish-loose: 16px 24px; --tui-space-inset-stretch: 8px 16px; --tui-space-inset-stretch-loosest: 16px 16px; --tui-space-negative-025: -2px; --tui-space-negative-050: -4px; --tui-space-negative-075: -6px; --tui-space-negative-100: -8px; --tui-space-negative-150: -12px; --tui-space-negative-200: -16px; --tui-space-negative-250: -20px; --tui-space-negative-300: -24px; --tui-space-negative-400: -32px; --tui-space-stack: var(--tui-space-200); --tui-space-stack-dense: var(--tui-space-100); --tui-space-stack-denser: var(--tui-space-050); --tui-space-stack-loose: var(--tui-space-300); --tui-space-stack-looser: var(--tui-space-400); --tui-space-stack-loosest: var(--tui-space-600); --tui-typography-action-label-lg: var(--tui-typography-action-label-lg-font-weight) var(--tui-typography-action-label-lg-font-size)/var(--tui-typography-action-label-lg-line-height) var(--tui-typography-action-label-lg-font-family); --tui-typography-action-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-action-label-lg-font-size: var(--tui-font-size-100); --tui-typography-action-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-lg-letter-spacing: 0px; --tui-typography-action-label-lg-line-height: 1.5; --tui-typography-action-label-md: var(--tui-typography-action-label-md-font-weight) var(--tui-typography-action-label-md-font-size)/var(--tui-typography-action-label-md-line-height) var(--tui-typography-action-label-md-font-family); --tui-typography-action-label-md-font-family: var(--tui-font-family-sans); --tui-typography-action-label-md-font-size: var(--tui-font-size-075); --tui-typography-action-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-md-letter-spacing: 0px; --tui-typography-action-label-md-line-height: 1.4286; --tui-typography-action-label-xl: var(--tui-typography-action-label-xl-font-weight) var(--tui-typography-action-label-xl-font-size)/var(--tui-typography-action-label-xl-line-height) var(--tui-typography-action-label-xl-font-family); --tui-typography-action-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-action-label-xl-font-size: var(--tui-font-size-200); --tui-typography-action-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-xl-letter-spacing: 0px; --tui-typography-action-label-xl-line-height: 1.4; --tui-typography-body-lg: var(--tui-typography-body-lg-font-weight) var(--tui-typography-body-lg-font-size)/var(--tui-typography-body-lg-line-height) var(--tui-typography-body-lg-font-family); --tui-typography-body-lg-font-family: var(--tui-font-family-sans); --tui-typography-body-lg-font-size: var(--tui-font-size-200); --tui-typography-body-lg-font-weight: var(--tui-font-weight-regular); --tui-typography-body-lg-letter-spacing: 0px; --tui-typography-body-lg-line-height: 1.4; --tui-typography-body-md: var(--tui-typography-body-md-font-weight) var(--tui-typography-body-md-font-size)/var(--tui-typography-body-md-line-height) var(--tui-typography-body-md-font-family); --tui-typography-body-md-font-family: var(--tui-font-family-sans); --tui-typography-body-md-font-size: var(--tui-font-size-100); --tui-typography-body-md-font-weight: var(--tui-font-weight-regular); --tui-typography-body-md-letter-spacing: 0px; --tui-typography-body-md-line-height: 1.5; --tui-typography-body-sm: var(--tui-typography-body-sm-font-weight) var(--tui-typography-body-sm-font-size)/var(--tui-typography-body-sm-line-height) var(--tui-typography-body-sm-font-family); --tui-typography-body-sm-font-family: var(--tui-font-family-sans); --tui-typography-body-sm-font-size: var(--tui-font-size-075); --tui-typography-body-sm-font-weight: var(--tui-font-weight-regular); --tui-typography-body-sm-letter-spacing: 0px; --tui-typography-body-sm-line-height: 1.4286; --tui-typography-body-xs: var(--tui-typography-body-xs-font-weight) var(--tui-typography-body-xs-font-size)/var(--tui-typography-body-xs-line-height) var(--tui-typography-body-xs-font-family); --tui-typography-body-xs-font-family: var(--tui-font-family-sans); --tui-typography-body-xs-font-size: var(--tui-font-size-050); --tui-typography-body-xs-font-weight: var(--tui-font-weight-regular); --tui-typography-body-xs-letter-spacing: 0px; --tui-typography-body-xs-line-height: 1.3333; --tui-typography-code-md: var(--tui-typography-code-md-font-weight) var(--tui-typography-code-md-font-size)/var(--tui-typography-code-md-line-height) var(--tui-typography-code-md-font-family); --tui-typography-code-md-font-family: var(--tui-font-family-mono); --tui-typography-code-md-font-size: var(--tui-font-size-075); --tui-typography-code-md-font-weight: var(--tui-font-weight-regular); --tui-typography-code-md-letter-spacing: 0px; --tui-typography-code-md-line-height: 1.4286; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md: var(--tui-typography-container-heading-md-font-weight) var(--tui-typography-container-heading-md-font-size)/var(--tui-typography-container-heading-md-line-height) var(--tui-typography-container-heading-md-font-family); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-family: var(--tui-font-family-sans); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-size: var(--tui-font-size-200); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-weight: var(--tui-font-weight-bold); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-letter-spacing: 0px; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-line-height: 1.4; --tui-typography-display-lg: var(--tui-typography-display-lg-font-weight) var(--tui-typography-display-lg-font-size)/var(--tui-typography-display-lg-line-height) var(--tui-typography-display-lg-font-family); --tui-typography-display-lg-font-family: var(--tui-font-family-sans); --tui-typography-display-lg-font-size: var(--tui-font-size-900); --tui-typography-display-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-display-lg-letter-spacing: -0.8px; --tui-typography-display-lg-line-height: 1.2; --tui-typography-display-md: var(--tui-typography-display-md-font-weight) var(--tui-typography-display-md-font-size)/var(--tui-typography-display-md-line-height) var(--tui-typography-display-md-font-family); --tui-typography-display-md-font-family: var(--tui-font-family-sans); --tui-typography-display-md-font-size: var(--tui-font-size-800); --tui-typography-display-md-font-weight: var(--tui-font-weight-bold); --tui-typography-display-md-letter-spacing: -0.56px; --tui-typography-display-md-line-height: 1.2143; --tui-typography-display-xl: var(--tui-typography-display-xl-font-weight) var(--tui-typography-display-xl-font-size)/var(--tui-typography-display-xl-line-height) var(--tui-typography-display-xl-font-family); --tui-typography-display-xl-font-family: var(--tui-font-family-sans); --tui-typography-display-xl-font-size: var(--tui-font-size-1000); --tui-typography-display-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-display-xl-letter-spacing: -0.96px; --tui-typography-display-xl-line-height: 1.2083; --tui-typography-heading-lg: var(--tui-typography-heading-lg-font-weight) var(--tui-typography-heading-lg-font-size)/var(--tui-typography-heading-lg-line-height) var(--tui-typography-heading-lg-font-family); --tui-typography-heading-lg-font-family: var(--tui-font-family-sans); --tui-typography-heading-lg-font-size: var(--tui-font-size-400); --tui-typography-heading-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-lg-letter-spacing: -0.28px; --tui-typography-heading-lg-line-height: 1.1429; --tui-typography-heading-md: var(--tui-typography-heading-md-font-weight) var(--tui-typography-heading-md-font-size)/var(--tui-typography-heading-md-line-height) var(--tui-typography-heading-md-font-family); --tui-typography-heading-md-font-family: var(--tui-font-family-sans); --tui-typography-heading-md-font-size: var(--tui-font-size-300); --tui-typography-heading-md-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-md-letter-spacing: 0px; --tui-typography-heading-md-line-height: 1.1667; --tui-typography-heading-sm: var(--tui-typography-heading-sm-font-weight) var(--tui-typography-heading-sm-font-size)/var(--tui-typography-heading-sm-line-height) var(--tui-typography-heading-sm-font-family); --tui-typography-heading-sm-font-family: var(--tui-font-family-sans); --tui-typography-heading-sm-font-size: var(--tui-font-size-200); --tui-typography-heading-sm-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-sm-letter-spacing: 0px; --tui-typography-heading-sm-line-height: 1.4; --tui-typography-heading-xl: var(--tui-typography-heading-xl-font-weight) var(--tui-typography-heading-xl-font-size)/var(--tui-typography-heading-xl-line-height) var(--tui-typography-heading-xl-font-family); --tui-typography-heading-xl-font-family: var(--tui-font-family-sans); --tui-typography-heading-xl-font-size: var(--tui-font-size-500); --tui-typography-heading-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-xl-letter-spacing: -0.32px; --tui-typography-heading-xl-line-height: 1.25; --tui-typography-label-lg: var(--tui-typography-label-lg-font-weight) var(--tui-typography-label-lg-font-size)/var(--tui-typography-label-lg-line-height) var(--tui-typography-label-lg-font-family); --tui-typography-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-label-lg-font-size: var(--tui-font-size-100); --tui-typography-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-lg-letter-spacing: 0px; --tui-typography-label-lg-line-height: 1.5; --tui-typography-label-md: var(--tui-typography-label-md-font-weight) var(--tui-typography-label-md-font-size)/var(--tui-typography-label-md-line-height) var(--tui-typography-label-md-font-family); --tui-typography-label-md-font-family: var(--tui-font-family-sans); --tui-typography-label-md-font-size: var(--tui-font-size-075); --tui-typography-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-md-letter-spacing: 0px; --tui-typography-label-md-line-height: 1.4286; --tui-typography-label-xl: var(--tui-typography-label-xl-font-weight) var(--tui-typography-label-xl-font-size)/var(--tui-typography-label-xl-line-height) var(--tui-typography-label-xl-font-family); --tui-typography-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-label-xl-font-size: var(--tui-font-size-200); --tui-typography-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-xl-letter-spacing: 0px; --tui-typography-label-xl-line-height: 1.4; } } @layer tokens { @media (prefers-color-scheme: dark) { :root:not([data-color-scheme="light"])[data-sub-theme="digestive"] { --tui-color-background-accent-green: var(--tui-color-green-500); --tui-color-background-accent-green-bold: var(--tui-color-green-700); --tui-color-background-accent-green-subtle: var(--tui-color-green-100); --tui-color-background-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-background-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-background-accent-steel-subtle: var(--tui-color-rexall-steel-500); --tui-color-background-accent-teal: var(--tui-color-teal-500); --tui-color-background-accent-teal-bold: var(--tui-color-teal-700); --tui-color-background-accent-teal-subtle: var(--tui-color-teal-500); --tui-color-background-brand: var(--tui-color-teal-500); --tui-color-background-brand-bold: var(--tui-color-teal-700); --tui-color-background-brand-bold-hovered: var(--tui-color-teal-800); --tui-color-background-brand-bold-pressed: var(--tui-color-teal-900); --tui-color-background-brand-subtle: var(--tui-color-teal-100); --tui-color-background-brand-subtle-hovered: var(--tui-color-teal-200); --tui-color-background-brand-subtle-pressed: var(--tui-color-teal-300); --tui-color-background-danger: var(--tui-color-red-700); --tui-color-background-danger-bold: var(--tui-color-red-700); --tui-color-background-danger-hovered: var(--tui-color-red-800); --tui-color-background-danger-pressed: var(--tui-color-red-900); --tui-color-background-danger-subtle: var(--tui-color-red-100); --tui-color-background-danger-subtle-hovered: var(--tui-color-red-200); --tui-color-background-danger-subtle-pressed: var(--tui-color-red-300); --tui-color-background-disabled: var(--tui-color-neutral-100); --tui-color-background-hovered: var(--tui-color-neutral-100); --tui-color-background-information: var(--tui-color-rexall-steel-500); --tui-color-background-information-bold: var(--tui-color-rexall-steel-700); --tui-color-background-information-subtle: var(--tui-color-rexall-steel-100); --tui-color-background-inverse: var(--tui-color-neutral-900); --tui-color-background-inverse-hovered: var(--tui-color-neutral-1000); --tui-color-background-inverse-pressed: var(--tui-color-neutral-800); --tui-color-background-neutral: var(--tui-color-neutral-400); --tui-color-background-neutral-bold: var(--tui-color-neutral-700); --tui-color-background-neutral-hovered: var(--tui-color-neutral-300); --tui-color-background-neutral-pressed: var(--tui-color-neutral-500); --tui-color-background-neutral-subtle: var(--tui-color-neutral-200); --tui-color-background-neutral-subtle-hovered: var(--tui-color-neutral-100); --tui-color-background-neutral-subtle-pressed: var(--tui-color-neutral-300); --tui-color-background-pressed: var(--tui-color-neutral-200); --tui-color-background-selected: var(--tui-color-teal-100); --tui-color-background-success: var(--tui-color-green-500); --tui-color-background-success-bold: var(--tui-color-green-700); --tui-color-background-success-subtle: var(--tui-color-green-100); --tui-color-background-warning: var(--tui-color-yellow-300); --tui-color-background-warning-bold: var(--tui-color-yellow-300); --tui-color-background-warning-subtle: var(--tui-color-yellow-100); --tui-color-black: oklch(0% 0 0); --tui-color-blanket-background: var(--tui-color-neutral-900); --tui-color-border: var(--tui-color-neutral-300); --tui-color-border-accent-green: var(--tui-color-green-500); --tui-color-border-accent-green-bold: var(--tui-color-green-700); --tui-color-border-accent-green-subtle: var(--tui-color-green-300); --tui-color-border-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-border-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-border-accent-steel-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-accent-teal: var(--tui-color-teal-500); --tui-color-border-accent-teal-bold: var(--tui-color-teal-700); --tui-color-border-accent-teal-subtle: var(--tui-color-teal-300); --tui-color-border-brand: var(--tui-color-teal-700); --tui-color-border-brand-bold: var(--tui-color-teal-700); --tui-color-border-brand-hovered: var(--tui-color-teal-800); --tui-color-border-brand-pressed: var(--tui-color-teal-900); --tui-color-border-brand-subtle: var(--tui-color-teal-300); --tui-color-border-danger: var(--tui-color-red-600); --tui-color-border-danger-bold: var(--tui-color-red-700); --tui-color-border-danger-hovered: var(--tui-color-red-700); --tui-color-border-danger-pressed: var(--tui-color-red-800); --tui-color-border-danger-subtle: var(--tui-color-red-300); --tui-color-border-disabled: var(--tui-color-neutral-200); --tui-color-border-focus: var(--tui-color-neutral-1000); --tui-color-border-information: var(--tui-color-rexall-steel-600); --tui-color-border-information-bold: var(--tui-color-rexall-steel-700); --tui-color-border-information-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-inverse-focus: var(--tui-color-white); --tui-color-border-neutral: var(--tui-color-neutral-300); --tui-color-border-neutral-bold: var(--tui-color-neutral-600); --tui-color-border-neutral-bold-hovered: var(--tui-color-neutral-700); --tui-color-border-neutral-bold-pressed: var(--tui-color-neutral-800); --tui-color-border-neutral-hovered: var(--tui-color-neutral-200); --tui-color-border-neutral-pressed: var(--tui-color-neutral-400); --tui-color-border-neutral-subtle: var(--tui-color-neutral-300); --tui-color-border-neutral-subtlest: var(--tui-color-neutral-200); --tui-color-border-selected: var(--tui-color-teal-700); --tui-color-border-success: var(--tui-color-green-700); --tui-color-border-success-bold: var(--tui-color-green-700); --tui-color-border-success-subtle: var(--tui-color-green-300); --tui-color-border-warning: var(--tui-color-yellow-600); --tui-color-border-warning-bold: var(--tui-color-yellow-700); --tui-color-border-warning-subtle: var(--tui-color-yellow-300); --tui-color-container-background: var(--tui-color-white); --tui-color-container-background-accent-green: var(--tui-color-background-accent-green); --tui-color-container-background-accent-green-bold: var(--tui-color-background-accent-green-bold); --tui-color-container-background-accent-green-subtle: var(--tui-color-background-accent-green-subtle); --tui-color-container-background-accent-steel: var(--tui-color-background-accent-steel); --tui-color-container-background-accent-steel-bold: var(--tui-color-background-accent-steel-bold); --tui-color-container-background-accent-steel-subtle: var(--tui-color-background-accent-steel-subtle); --tui-color-container-background-accent-teal: var(--tui-color-background-accent-teal); --tui-color-container-background-accent-teal-bold: var(--tui-color-background-accent-teal-bold); --tui-color-container-background-accent-teal-subtle: var(--tui-color-background-accent-teal-subtle); --tui-color-container-background-brand: var(--tui-color-background-brand); --tui-color-container-background-brand-bold: var(--tui-color-background-brand-bold); --tui-color-container-background-brand-subtle: var(--tui-color-background-brand-subtle); --tui-color-container-background-danger: var(--tui-color-background-danger); --tui-color-container-background-danger-bold: var(--tui-color-background-danger-bold); --tui-color-container-background-danger-subtle: var(--tui-color-background-danger-subtle); --tui-color-container-background-information: var(--tui-color-background-information); --tui-color-container-background-information-bold: var(--tui-color-background-information-bold); --tui-color-container-background-information-subtle: var(--tui-color-background-information-subtle); --tui-color-container-background-neutral: var(--tui-color-background-neutral); --tui-color-container-background-neutral-bold: var(--tui-color-background-inverse); --tui-color-container-background-neutral-subtle: var(--tui-color-surface-background-neutral-subtle); --tui-color-container-background-success: var(--tui-color-background-success); --tui-color-container-background-success-bold: var(--tui-color-background-success-bold); --tui-color-container-background-success-subtle: var(--tui-color-background-success-subtle); --tui-color-container-background-warning: var(--tui-color-background-warning); --tui-color-container-background-warning-bold: var(--tui-color-background-warning-bold); --tui-color-container-background-warning-subtle: var(--tui-color-background-warning-subtle); --tui-color-container-border: var(--tui-color-neutral-300); --tui-color-container-border-accent-green: var(--tui-color-border-accent-green); --tui-color-container-border-accent-green-bold: var(--tui-color-border-accent-green-bold); --tui-color-container-border-accent-green-subtle: var(--tui-color-border-accent-green-subtle); --tui-color-container-border-accent-steel: var(--tui-color-border-accent-steel); --tui-color-container-border-accent-steel-bold: var(--tui-color-border-accent-steel-bold); --tui-color-container-border-accent-steel-subtle: var(--tui-color-border-accent-steel-subtle); --tui-color-container-border-accent-teal: var(--tui-color-border-accent-teal); --tui-color-container-border-accent-teal-bold: var(--tui-color-border-accent-teal-bold); --tui-color-container-border-accent-teal-subtle: var(--tui-color-border-accent-teal-subtle); --tui-color-container-border-brand: var(--tui-color-border-brand); --tui-color-container-border-brand-bold: var(--tui-color-border-brand-bold); --tui-color-container-border-brand-subtle: var(--tui-color-border-brand-subtle); --tui-color-container-border-danger: var(--tui-color-border-danger); --tui-color-container-border-danger-bold: var(--tui-color-border-danger-bold); --tui-color-container-border-danger-subtle: var(--tui-color-border-danger-subtle); --tui-color-container-border-information: var(--tui-color-border-information); --tui-color-container-border-information-bold: var(--tui-color-border-information-bold); --tui-color-container-border-information-subtle: var(--tui-color-border-information-subtle); --tui-color-container-border-neutral: var(--tui-color-border-neutral); --tui-color-container-border-neutral-bold: var(--tui-color-border-neutral-bold); --tui-color-container-border-neutral-subtle: var(--tui-color-border-neutral-subtle); --tui-color-container-border-success: var(--tui-color-border-success); --tui-color-container-border-success-bold: var(--tui-color-border-success-bold); --tui-color-container-border-success-subtle: var(--tui-color-border-success-subtle); --tui-color-container-border-warning: var(--tui-color-border-warning); --tui-color-container-border-warning-bold: var(--tui-color-border-warning-bold); --tui-color-container-border-warning-subtle: var(--tui-color-border-warning-subtle); /* Text inside a box that holds content, such as a card. */ --tui-color-container-text: var(--tui-color-text); /* Secondary text inside a box that holds content. */ --tui-color-container-text-neutral-subtle: var(--tui-color-text-neutral-subtle); --tui-color-green-100: oklch(95.8% 0.0339 134); --tui-color-green-200: oklch(91% 0.0654 134); --tui-color-green-300: oklch(86% 0.0956 134); --tui-color-green-400: oklch(79.5% 0.1328 134); --tui-color-green-500: var(--tui-color-rexall-well-green); --tui-color-green-600: oklch(63.5% 0.1512 134); --tui-color-green-700: oklch(54.5% 0.1328 134); --tui-color-green-800: oklch(45.5% 0.1139 134); --tui-color-green-900: oklch(36.5% 0.0944 134); --tui-color-green-1000: oklch(27% 0.0731 134); --tui-color-icon: var(--tui-color-neutral-900); --tui-color-icon-brand: var(--tui-color-teal-700); --tui-color-icon-danger: var(--tui-color-red-700); --tui-color-icon-disabled: var(--tui-color-neutral-600); --tui-color-icon-information: var(--tui-color-rexall-steel-700); --tui-color-icon-inverse: var(--tui-color-white); --tui-color-icon-neutral-subtle: var(--tui-color-neutral-700); --tui-color-icon-success: var(--tui-color-green-700); --tui-color-icon-warning: var(--tui-color-yellow-700); --tui-color-input-background: var(--tui-color-white); --tui-color-input-background-disabled: var(--tui-color-neutral-100); --tui-color-input-border: var(--tui-color-neutral-600); --tui-color-link-text: var(--tui-color-teal-700); --tui-color-link-text-hovered: var(--tui-color-teal-800); --tui-color-link-text-inverse: var(--tui-color-text-inverse); --tui-color-link-text-inverse-hovered: var(--tui-color-text-inverse); --tui-color-link-text-inverse-pressed: var(--tui-color-text-inverse); --tui-color-link-text-inverse-visited: var(--tui-color-text-inverse); --tui-color-link-text-neutral: var(--tui-color-text-neutral); --tui-color-link-text-neutral-hovered: var(--tui-color-text-neutral-hovered); --tui-color-link-text-neutral-pressed: var(--tui-color-text-neutral-pressed); --tui-color-link-text-neutral-visited: var(--tui-color-text-neutral); --tui-color-link-text-pressed: var(--tui-color-teal-800); --tui-color-link-text-visited: var(--tui-color-magenta-700); --tui-color-magenta-100: oklch(95.8% 0.0241 351.2); --tui-color-magenta-200: oklch(91% 0.0541 351.2); --tui-color-magenta-300: oklch(86% 0.0816 351.2); --tui-color-magenta-400: oklch(79.5% 0.1047 351.2); --tui-color-magenta-500: oklch(71.5% 0.13 351.2); --tui-color-magenta-600: oklch(63.5% 0.153 351.2); --tui-color-magenta-700: var(--tui-color-rexall-berry-purple); --tui-color-magenta-800: oklch(45.5% 0.1676 351.2); --tui-color-magenta-900: oklch(36.5% 0.1389 351.2); --tui-color-magenta-1000: oklch(27% 0.1075 351.2); --tui-color-neutral-100: oklch(95.8% 0 0); --tui-color-neutral-200: oklch(91% 0 0); --tui-color-neutral-300: oklch(86% 0 0); --tui-color-neutral-400: oklch(79.5% 0 0); --tui-color-neutral-500: oklch(71.5% 0 0); --tui-color-neutral-600: oklch(63.5% 0 0); --tui-color-neutral-700: oklch(54.5% 0 0); --tui-color-neutral-800: oklch(45.5% 0 0); --tui-color-neutral-900: var(--tui-color-rexall-charcoal-grey); --tui-color-neutral-1000: oklch(27% 0 0); --tui-color-neutral-A100: oklch(10.78% 0 0 / 0.056); --tui-color-neutral-A200: oklch(7.66% 0 0 / 0.118); --tui-color-neutral-A300: oklch(6.76% 0 0 / 0.182); --tui-color-neutral-A400: oklch(6.59% 0 0 / 0.264); --tui-color-neutral-A500: oklch(5.18% 0 0 / 0.362); --tui-color-neutral-A600: oklch(1.98% 0 0 / 0.457); --tui-color-neutral-A700: oklch(0% 0 0 / 0.561); --tui-color-neutral-A800: oklch(3.14% 0 0 / 0.661); --tui-color-neutral-A900: oklch(4.4% 0 0 / 0.797); --tui-color-neutral-A1000: oklch(3.14% 0 0 / 0.85); --tui-color-orange-100: oklch(95.8% 0.023 48.9); --tui-color-orange-200: oklch(91% 0.0514 48.9); --tui-color-orange-300: oklch(86% 0.0834 48.9); --tui-color-orange-400: oklch(79.5% 0.1188 48.9); --tui-color-orange-500: oklch(71.5% 0.1528 48.9); --tui-color-orange-600: var(--tui-color-rexall-terracotta-orange); --tui-color-orange-700: oklch(54.5% 0.1463 48.9); --tui-color-orange-800: oklch(45.5% 0.1222 48.9); --tui-color-orange-900: oklch(36.5% 0.098 48.9); --tui-color-orange-1000: oklch(27% 0.0725 48.9); --tui-color-pink-100: oklch(95.8% 0.0216 5); --tui-color-pink-200: oklch(91% 0.0485 5); --tui-color-pink-300: oklch(86% 0.0792 5); --tui-color-pink-400: oklch(79.5% 0.1241 5); --tui-color-pink-500: oklch(71.5% 0.1644 5); --tui-color-pink-600: var(--tui-color-rexall-tulip-pink); --tui-color-pink-700: oklch(54.5% 0.1544 5); --tui-color-pink-800: oklch(45.5% 0.1324 5); --tui-color-pink-900: oklch(36.5% 0.1098 5); --tui-color-pink-1000: oklch(27% 0.085 5); --tui-color-red-100: oklch(95.8% 0.0206 23.7); --tui-color-red-200: oklch(91% 0.0462 23.7); --tui-color-red-300: oklch(86% 0.0754 23.7); --tui-color-red-400: oklch(79.5% 0.1177 23.7); --tui-color-red-500: oklch(71.5% 0.1783 23.7); --tui-color-red-600: var(--tui-color-rexall-ladybug-red); --tui-color-red-700: oklch(54.5% 0.2142 23.7); --tui-color-red-800: oklch(45.5% 0.1837 23.7); --tui-color-red-900: oklch(36.5% 0.1475 23.7); --tui-color-red-1000: oklch(27% 0.1091 23.7); /* Be Well */ --tui-color-rexall-apricot-orange: oklch(71.4% 0.1525 56.134); /* Skin Health */ --tui-color-rexall-ash: oklch(90% 0.0027 106.45); /* Rexall */ --tui-color-rexall-banana-yellow: oklch(95.33% 0.0757 95.318); /* Berry Purple — magenta anchor */ --tui-color-rexall-berry-purple: oklch(51.17% 0.1852 351.18); /* Rexall */ --tui-color-rexall-blush-pink: oklch(58.59% 0.1586 4.6101); /* Be Well promo */ --tui-color-rexall-blush-red: oklch(86.8% 0.055 21.054); /* Be Well promo */ --tui-color-rexall-burgundy-red: oklch(45.44% 0.1821 28.716); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-calming-blue-haze: oklch(80.84% 0.0387 249.54); /* Charcoal Grey — neutral anchor */ --tui-color-rexall-charcoal-grey: oklch(32.5% 0 0); /* Rexall */ --tui-color-rexall-cloud-grey: oklch(84.52% 0 0); /* Be Well promo */ --tui-color-rexall-cream-yellow: oklch(99.23% 0.0159 98.986); /* Be Well promo */ --tui-color-rexall-daisy-yellow: oklch(92.84% 0.1204 106.48); /* Rexall AODA */ --tui-color-rexall-deep-ocean: oklch(42.34% 0.0723 194.8); /* Be Well promo */ --tui-color-rexall-dusty-red: oklch(50.13% 0.1755 23.713); /* Be Well */ --tui-color-rexall-evergreen: oklch(51.19% 0.0835 138.17); /* Rexall */ --tui-color-rexall-fog-grey: oklch(97.91% 0 0); /* Be Well */ --tui-color-rexall-forest-green: oklch(45.31% 0.073 146.02); /* Be Well */ --tui-color-rexall-garden-green: oklch(54.77% 0.0953 138.22); /* Be Well */ --tui-color-rexall-granite-grey: oklch(53.49% 0.005 17.313); /* Rexall */ --tui-color-rexall-grapefruit: oklch(95.01% 0.0848 98.329); /* Rexall */ --tui-color-rexall-grass-green: oklch(78.93% 0.1268 133.59); /* Be Well */ --tui-color-rexall-grey-blue: oklch(59.99% 0.0929 185.62); /* Be Well promo */ --tui-color-rexall-highlighter-yellow: oklch(92.14% 0.1824 105.41); /* Digestive */ --tui-color-rexall-immunity-orange: oklch(71.08% 0.1395 51.737); /* Ladybug Red — red anchor */ --tui-color-rexall-ladybug-red: oklch(60.41% 0.2338 23.742); /* Rexall AODA */ --tui-color-rexall-lakeside-blue: oklch(52.74% 0.0872 187.63); /* Be Well */ --tui-color-rexall-lavender-purple: oklch(89.47% 0.0375 342.55); /* Rexall */ --tui-color-rexall-lemon-yellow: oklch(88.28% 0.1811 94.46); /* Rexall */ --tui-color-rexall-light-blush-pink: oklch(85.56% 0.0673 10.506); /* Rexall */ --tui-color-rexall-light-drizzle: oklch(91.04% 0.0336 191.96); /* Be Well promo */ --tui-color-rexall-light-red: oklch(94.46% 0.0142 12.025); /* Be Well */ --tui-color-rexall-lime-green: oklch(75.39% 0.152 134.81); /* Be Well promo */ --tui-color-rexall-lipstick-red: oklch(62.76% 0.2141 23.004); /* Be Well */ --tui-color-rexall-melon-orange: oklch(85.06% 0.0788 62.059); /* Rexall */ --tui-color-rexall-mist-blue: oklch(95.8% 0.0169 192.36); /* Be Well */ --tui-color-rexall-moss-green: oklch(64.94% 0.1505 133.89); /* Be Well */ --tui-color-rexall-night-grey: oklch(42.18% 0.0031 48.66); /* Be Well */ --tui-color-rexall-pansy-purple: oklch(79.17% 0.0759 344.13); /* Be Well */ --tui-color-rexall-peachy-orange: oklch(92.38% 0.0385 63.533); /* Be Well promo */ --tui-color-rexall-pinky-red: oklch(96.91% 0.0151 17.418); /* Be Well */ --tui-color-rexall-plum-purple: oklch(59.35% 0.1561 347.67); /* Poolside Blue — teal anchor */ --tui-color-rexall-poolside-blue: oklch(68.76% 0.1147 188.23); /* Rexall */ --tui-color-rexall-rain-blue: oklch(87.81% 0.0553 193.35); /* Be Well promo */ --tui-color-rexall-rosy-red: oklch(69.56% 0.183 23.103); /* Rexall */ --tui-color-rexall-ruby-red: oklch(57.73% 0.2098 23.23); /* Rexall */ --tui-color-rexall-sage-green: oklch(88.81% 0.0662 132.17); /* Be Well */ --tui-color-rexall-seaside-blue: oklch(49.86% 0.0891 182.42); /* Rexall AODA */ --tui-color-rexall-shoreline-blue: oklch(63.95% 0.1102 188.54); /* Be Well */ --tui-color-rexall-silver-grey: oklch(66.37% 0.0049 0.0752); /* Be Well */ --tui-color-rexall-sky-blue: oklch(84.85% 0.0638 193.53); /* Rexall */ --tui-color-rexall-slate-grey: oklch(53.82% 0 0); --tui-color-rexall-steel: oklch(52.12% 0.0301 259.03); --tui-color-rexall-steel-100: oklch(95.8% 0.0077 249.5); --tui-color-rexall-steel-200: oklch(91% 0.0173 249.5); --tui-color-rexall-steel-300: oklch(86% 0.0277 249.5); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-steel-400: var(--tui-color-rexall-calming-blue-haze); --tui-color-rexall-steel-500: oklch(71.5% 0.0348 249.5); --tui-color-rexall-steel-600: oklch(63.5% 0.0315 249.5); --tui-color-rexall-steel-700: oklch(54.5% 0.0276 249.5); --tui-color-rexall-steel-800: oklch(45.5% 0.0237 249.5); --tui-color-rexall-steel-900: oklch(36.5% 0.0196 249.5); --tui-color-rexall-steel-1000: oklch(27% 0.0152 249.5); /* Sunshine Yellow — yellow anchor */ --tui-color-rexall-sunshine-yellow: oklch(86.72% 0.1773 90.85); /* Be Well promo */ --tui-color-rexall-taupe-red: oklch(75.68% 0.0781 13.998); /* Rexall */ --tui-color-rexall-tea-green: oklch(95.59% 0.0563 131.52); /* Be Well */ --tui-color-rexall-teal-blue: oklch(68.53% 0.0897 185.9); /* Terracotta Orange — orange anchor */ --tui-color-rexall-terracotta-orange: oklch(65.65% 0.1764 48.889); /* Tulip Pink — pink anchor */ --tui-color-rexall-tulip-pink: oklch(67.04% 0.1842 5.0399); /* Be Well promo */ --tui-color-rexall-vanilla-yellow: oklch(95.6% 0.072 105.12); /* Be Well */ --tui-color-rexall-venice-blue: oklch(40.54% 0.0851 236.88); /* Be Well */ --tui-color-rexall-washed-blue: oklch(78.7% 0.0619 185.5); /* Well Green — green anchor */ --tui-color-rexall-well-green: oklch(72.73% 0.1698 134.03); /* Digestive */ --tui-color-rexall-well-green-deep: oklch(50.28% 0.1219 142.99); --tui-color-surface-background: var(--tui-color-white); --tui-color-surface-background-brand: var(--tui-color-rexall-shoreline-blue); /* A page or section tinted with the brand. Plain surface unless a brand sets a tint. */ --tui-color-surface-background-brand-subtle: var(--tui-color-surface-background); --tui-color-surface-background-neutral-subtle: var(--tui-color-neutral-100); --tui-color-tag-background-accent-green: var(--tui-color-green-100); --tui-color-tag-background-accent-magenta: var(--tui-color-magenta-100); --tui-color-tag-background-accent-neutral: var(--tui-color-neutral-100); --tui-color-tag-background-accent-orange: var(--tui-color-orange-100); --tui-color-tag-background-accent-pink: var(--tui-color-pink-100); --tui-color-tag-background-accent-steel: var(--tui-color-rexall-steel-100); --tui-color-tag-background-accent-teal: var(--tui-color-teal-100); --tui-color-tag-background-accent-yellow: var(--tui-color-yellow-100); --tui-color-tag-text-accent-green: var(--tui-color-green-800); --tui-color-tag-text-accent-magenta: var(--tui-color-magenta-800); --tui-color-tag-text-accent-neutral: var(--tui-color-neutral-800); --tui-color-tag-text-accent-orange: var(--tui-color-orange-800); --tui-color-tag-text-accent-pink: var(--tui-color-pink-800); --tui-color-tag-text-accent-steel: var(--tui-color-rexall-steel-800); --tui-color-tag-text-accent-teal: var(--tui-color-teal-800); --tui-color-tag-text-accent-yellow: var(--tui-color-yellow-800); --tui-color-teal-100: oklch(95.8% 0.0229 188.2); --tui-color-teal-200: oklch(91% 0.0422 188.2); --tui-color-teal-300: oklch(86% 0.0602 188.2); --tui-color-teal-400: oklch(79.5% 0.0818 188.2); /* Poolside Blue — teal anchor */ --tui-color-teal-500: var(--tui-color-rexall-poolside-blue); --tui-color-teal-600: oklch(63.5% 0.1071 188.2); --tui-color-teal-700: oklch(54.5% 0.0941 188.2); --tui-color-teal-800: oklch(45.5% 0.079 188.2); --tui-color-teal-900: oklch(36.5% 0.0634 188.2); --tui-color-teal-1000: oklch(27% 0.0469 188.2); --tui-color-text: var(--tui-color-neutral-900); --tui-color-text-brand: var(--tui-color-teal-800); --tui-color-text-brand-hovered: var(--tui-color-teal-900); --tui-color-text-brand-pressed: var(--tui-color-teal-900); --tui-color-text-danger: var(--tui-color-red-700); --tui-color-text-danger-hovered: var(--tui-color-red-800); --tui-color-text-danger-pressed: var(--tui-color-red-800); --tui-color-text-disabled: var(--tui-color-neutral-600); --tui-color-text-information: var(--tui-color-rexall-steel-700); --tui-color-text-inverse: var(--tui-color-white); --tui-color-text-neutral: var(--tui-color-neutral-900); --tui-color-text-neutral-hovered: var(--tui-color-neutral-800); --tui-color-text-neutral-pressed: var(--tui-color-neutral-1000); --tui-color-text-neutral-subtle: var(--tui-color-neutral-800); --tui-color-text-success: var(--tui-color-green-700); --tui-color-text-warning: var(--tui-color-yellow-700); --tui-color-transparent: oklch(0% 0 0 / 0); --tui-color-white: oklch(100% 0 0); --tui-color-yellow-100: oklch(95.8% 0.0354 90.8); --tui-color-yellow-200: oklch(91% 0.1029 90.8); /* Sunshine Yellow — yellow anchor */ --tui-color-yellow-300: var(--tui-color-rexall-sunshine-yellow); --tui-color-yellow-400: oklch(79.5% 0.1624 88.3); --tui-color-yellow-500: oklch(71.5% 0.1463 85.7); --tui-color-yellow-600: oklch(63.5% 0.1305 83.1); --tui-color-yellow-700: oklch(54.5% 0.1126 80.6); --tui-color-yellow-800: oklch(45.5% 0.0948 78); --tui-color-yellow-900: oklch(36.5% 0.0768 75.4); --tui-color-yellow-1000: oklch(27% 0.0575 72.8); --tui-elevation-shadow-overflow: 0px 0px 8px 0px oklch(27% 0 0 / 0.16), 0px 0px 1px 0px oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-perimeter: oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-spread: oklch(27% 0 0 / 0.16); --tui-elevation-shadow-overlay: 0px 8px 12px 0px oklch(27% 0 0 / 0.15), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-shadow-raised: 0px 1px 1px 0px oklch(27% 0 0 / 0.25), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-surface: var(--tui-color-transparent); --tui-elevation-surface-container: var(--tui-color-neutral-A100); --tui-elevation-surface-container-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-container-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay: var(--tui-color-transparent); --tui-elevation-surface-overlay-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-raised: var(--tui-color-transparent); --tui-elevation-surface-raised-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-raised-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-sunken: var(--tui-color-neutral-A100); --tui-font-family-mono: "Source Code Pro", ui-monospace, "Consolas", "Menlo", monospace; --tui-font-family-sans: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --tui-font-leading-050: 16px; --tui-font-leading-075: 20px; --tui-font-leading-100: 24px; --tui-font-leading-200: 28px; --tui-font-leading-300: 28px; --tui-font-leading-400: 32px; --tui-font-leading-500: 40px; --tui-font-leading-600: 48px; --tui-font-leading-700: 56px; --tui-font-leading-800: 68px; --tui-font-leading-900: 96px; --tui-font-leading-1000: 116px; --tui-font-size-050: 12px; --tui-font-size-075: 14px; --tui-font-size-100: 16px; --tui-font-size-200: 20px; --tui-font-size-300: 24px; --tui-font-size-400: 28px; --tui-font-size-500: 32px; --tui-font-size-600: 40px; --tui-font-size-700: 48px; --tui-font-size-800: 56px; --tui-font-size-900: 80px; --tui-font-size-1000: 96px; --tui-font-tracking-default: 0rem; --tui-font-weight-bold: 700; --tui-font-weight-medium: 500; --tui-font-weight-regular: 400; --tui-font-weight-semibold: 600; --tui-layer-0: 0; --tui-layer-10: 10; --tui-layer-20: 20; --tui-layer-30: 30; --tui-layer-40: 40; --tui-layer-50: 50; --tui-layer-60: 60; --tui-layer-base: var(--tui-layer-0); --tui-layer-modal: var(--tui-layer-50); --tui-layer-navigation: var(--tui-layer-10); --tui-layer-notification: var(--tui-layer-60); --tui-layer-overlay: var(--tui-layer-40); --tui-layer-popover: var(--tui-layer-30); --tui-layer-sticky: var(--tui-layer-20); --tui-motion-action-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-action-pressed: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-blanket-enter: var(--tui-motion-duration-long) 0ms var(--tui-motion-easing-inout-bold); --tui-motion-blanket-exit: var(--tui-motion-duration-medium) 0ms var(--tui-motion-easing-in-practical); --tui-motion-control-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-selected: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-toggle: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-curve-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6); --tui-motion-curve-inout-bold: cubic-bezier(0.4, 0, 0, 1); --tui-motion-curve-out-bold: cubic-bezier(0, 0.4, 0, 1); --tui-motion-curve-out-practical: cubic-bezier(0.4, 1, 0.6, 1); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-curve-spring: cubic-bezier(0.363, 1.102, 0.089, 1.043); --tui-motion-duration-0: 0ms; --tui-motion-duration-050: 50ms; --tui-motion-duration-100: 100ms; --tui-motion-duration-150: 150ms; --tui-motion-duration-200: 200ms; --tui-motion-duration-250: 250ms; --tui-motion-duration-400: 400ms; --tui-motion-duration-600: 600ms; --tui-motion-duration-instant: var(--tui-motion-duration-0); --tui-motion-duration-long: var(--tui-motion-duration-250); --tui-motion-duration-medium: var(--tui-motion-duration-200); --tui-motion-duration-short: var(--tui-motion-duration-150); --tui-motion-duration-xlong: var(--tui-motion-duration-400); --tui-motion-duration-xshort: var(--tui-motion-duration-100); --tui-motion-duration-xxlong: var(--tui-motion-duration-600); --tui-motion-duration-xxshort: var(--tui-motion-duration-050); --tui-motion-easing-in-practical: var(--tui-motion-curve-in-practical); --tui-motion-easing-inout-bold: var(--tui-motion-curve-inout-bold); --tui-motion-easing-out-bold: var(--tui-motion-curve-out-bold); --tui-motion-easing-out-practical: var(--tui-motion-curve-out-practical); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-easing-spring: var(--tui-motion-curve-spring); /* Corners of a small action (Button sm). */ --tui-shape-action-round: var(--tui-size-radius-lg); /* Corners of a medium action (Button md). */ --tui-shape-action-rounder: var(--tui-size-radius-xl); /* Corners of a large action (Button lg). The roundest action, not always a pill. */ --tui-shape-action-roundest: var(--tui-size-radius-2xl); /* Corners of a box that holds content, such as a card. Follows the surface corners unless a brand sets its own. */ --tui-shape-container-rounder: var(--tui-shape-surface-rounder); --tui-shape-rounder: var(--tui-size-radius-lg); --tui-shape-surface-rounder: var(--tui-size-radius-2xl); --tui-size-border-hairline: var(--tui-size-border-sm); --tui-size-border-md: 2px; --tui-size-border-narrow: var(--tui-size-border-md); --tui-size-border-sm: 1px; --tui-size-icon-lg: var(--tui-space-300); --tui-size-icon-md: var(--tui-space-250); --tui-size-icon-sm: var(--tui-space-200); --tui-size-icon-xs: var(--tui-space-100); --tui-size-radius-2xl: 16px; --tui-size-radius-3xl: 20px; --tui-size-radius-4xl: 24px; --tui-size-radius-full: 9999px; --tui-size-radius-lg: 8px; --tui-size-radius-md: 6px; --tui-size-radius-none: 0px; --tui-size-radius-sm: 4px; --tui-size-radius-xl: 12px; --tui-size-radius-xs: 2px; --tui-space-0: 0px; --tui-space-025: 2px; --tui-space-050: 4px; --tui-space-075: 6px; --tui-space-100: 8px; --tui-space-125: 10px; --tui-space-150: 12px; --tui-space-200: 16px; --tui-space-250: 20px; --tui-space-300: 24px; --tui-space-400: 32px; --tui-space-500: 40px; --tui-space-600: 48px; --tui-space-700: 56px; --tui-space-800: 64px; --tui-space-900: 72px; --tui-space-1000: 80px; --tui-space-1100: 88px; --tui-space-1200: 96px; --tui-space-1300: 104px; --tui-space-1400: 112px; --tui-space-1500: 120px; --tui-space-inline: var(--tui-space-100); --tui-space-inline-dense: var(--tui-space-050); --tui-space-inline-loose: var(--tui-space-150); --tui-space-inline-looser: var(--tui-space-250); --tui-space-inset: var(--tui-space-200); --tui-space-inset-dense: var(--tui-space-100); --tui-space-inset-loose: var(--tui-space-250); --tui-space-inset-looser: var(--tui-space-400); --tui-space-inset-squish: 12px 24px; --tui-space-inset-squish-dense: 8px 24px; --tui-space-inset-squish-loose: 16px 24px; --tui-space-inset-stretch: 8px 16px; --tui-space-inset-stretch-loosest: 16px 16px; --tui-space-negative-025: -2px; --tui-space-negative-050: -4px; --tui-space-negative-075: -6px; --tui-space-negative-100: -8px; --tui-space-negative-150: -12px; --tui-space-negative-200: -16px; --tui-space-negative-250: -20px; --tui-space-negative-300: -24px; --tui-space-negative-400: -32px; --tui-space-stack: var(--tui-space-200); --tui-space-stack-dense: var(--tui-space-100); --tui-space-stack-denser: var(--tui-space-050); --tui-space-stack-loose: var(--tui-space-300); --tui-space-stack-looser: var(--tui-space-400); --tui-space-stack-loosest: var(--tui-space-600); --tui-typography-action-label-lg: var(--tui-typography-action-label-lg-font-weight) var(--tui-typography-action-label-lg-font-size)/var(--tui-typography-action-label-lg-line-height) var(--tui-typography-action-label-lg-font-family); --tui-typography-action-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-action-label-lg-font-size: var(--tui-font-size-100); --tui-typography-action-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-lg-letter-spacing: 0px; --tui-typography-action-label-lg-line-height: 1.5; --tui-typography-action-label-md: var(--tui-typography-action-label-md-font-weight) var(--tui-typography-action-label-md-font-size)/var(--tui-typography-action-label-md-line-height) var(--tui-typography-action-label-md-font-family); --tui-typography-action-label-md-font-family: var(--tui-font-family-sans); --tui-typography-action-label-md-font-size: var(--tui-font-size-075); --tui-typography-action-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-md-letter-spacing: 0px; --tui-typography-action-label-md-line-height: 1.4286; --tui-typography-action-label-xl: var(--tui-typography-action-label-xl-font-weight) var(--tui-typography-action-label-xl-font-size)/var(--tui-typography-action-label-xl-line-height) var(--tui-typography-action-label-xl-font-family); --tui-typography-action-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-action-label-xl-font-size: var(--tui-font-size-200); --tui-typography-action-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-xl-letter-spacing: 0px; --tui-typography-action-label-xl-line-height: 1.4; --tui-typography-body-lg: var(--tui-typography-body-lg-font-weight) var(--tui-typography-body-lg-font-size)/var(--tui-typography-body-lg-line-height) var(--tui-typography-body-lg-font-family); --tui-typography-body-lg-font-family: var(--tui-font-family-sans); --tui-typography-body-lg-font-size: var(--tui-font-size-200); --tui-typography-body-lg-font-weight: var(--tui-font-weight-regular); --tui-typography-body-lg-letter-spacing: 0px; --tui-typography-body-lg-line-height: 1.4; --tui-typography-body-md: var(--tui-typography-body-md-font-weight) var(--tui-typography-body-md-font-size)/var(--tui-typography-body-md-line-height) var(--tui-typography-body-md-font-family); --tui-typography-body-md-font-family: var(--tui-font-family-sans); --tui-typography-body-md-font-size: var(--tui-font-size-100); --tui-typography-body-md-font-weight: var(--tui-font-weight-regular); --tui-typography-body-md-letter-spacing: 0px; --tui-typography-body-md-line-height: 1.5; --tui-typography-body-sm: var(--tui-typography-body-sm-font-weight) var(--tui-typography-body-sm-font-size)/var(--tui-typography-body-sm-line-height) var(--tui-typography-body-sm-font-family); --tui-typography-body-sm-font-family: var(--tui-font-family-sans); --tui-typography-body-sm-font-size: var(--tui-font-size-075); --tui-typography-body-sm-font-weight: var(--tui-font-weight-regular); --tui-typography-body-sm-letter-spacing: 0px; --tui-typography-body-sm-line-height: 1.4286; --tui-typography-body-xs: var(--tui-typography-body-xs-font-weight) var(--tui-typography-body-xs-font-size)/var(--tui-typography-body-xs-line-height) var(--tui-typography-body-xs-font-family); --tui-typography-body-xs-font-family: var(--tui-font-family-sans); --tui-typography-body-xs-font-size: var(--tui-font-size-050); --tui-typography-body-xs-font-weight: var(--tui-font-weight-regular); --tui-typography-body-xs-letter-spacing: 0px; --tui-typography-body-xs-line-height: 1.3333; --tui-typography-code-md: var(--tui-typography-code-md-font-weight) var(--tui-typography-code-md-font-size)/var(--tui-typography-code-md-line-height) var(--tui-typography-code-md-font-family); --tui-typography-code-md-font-family: var(--tui-font-family-mono); --tui-typography-code-md-font-size: var(--tui-font-size-075); --tui-typography-code-md-font-weight: var(--tui-font-weight-regular); --tui-typography-code-md-letter-spacing: 0px; --tui-typography-code-md-line-height: 1.4286; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md: var(--tui-typography-container-heading-md-font-weight) var(--tui-typography-container-heading-md-font-size)/var(--tui-typography-container-heading-md-line-height) var(--tui-typography-container-heading-md-font-family); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-family: var(--tui-font-family-sans); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-size: var(--tui-font-size-200); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-weight: var(--tui-font-weight-bold); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-letter-spacing: 0px; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-line-height: 1.4; --tui-typography-display-lg: var(--tui-typography-display-lg-font-weight) var(--tui-typography-display-lg-font-size)/var(--tui-typography-display-lg-line-height) var(--tui-typography-display-lg-font-family); --tui-typography-display-lg-font-family: var(--tui-font-family-sans); --tui-typography-display-lg-font-size: var(--tui-font-size-900); --tui-typography-display-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-display-lg-letter-spacing: -0.8px; --tui-typography-display-lg-line-height: 1.2; --tui-typography-display-md: var(--tui-typography-display-md-font-weight) var(--tui-typography-display-md-font-size)/var(--tui-typography-display-md-line-height) var(--tui-typography-display-md-font-family); --tui-typography-display-md-font-family: var(--tui-font-family-sans); --tui-typography-display-md-font-size: var(--tui-font-size-800); --tui-typography-display-md-font-weight: var(--tui-font-weight-bold); --tui-typography-display-md-letter-spacing: -0.56px; --tui-typography-display-md-line-height: 1.2143; --tui-typography-display-xl: var(--tui-typography-display-xl-font-weight) var(--tui-typography-display-xl-font-size)/var(--tui-typography-display-xl-line-height) var(--tui-typography-display-xl-font-family); --tui-typography-display-xl-font-family: var(--tui-font-family-sans); --tui-typography-display-xl-font-size: var(--tui-font-size-1000); --tui-typography-display-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-display-xl-letter-spacing: -0.96px; --tui-typography-display-xl-line-height: 1.2083; --tui-typography-heading-lg: var(--tui-typography-heading-lg-font-weight) var(--tui-typography-heading-lg-font-size)/var(--tui-typography-heading-lg-line-height) var(--tui-typography-heading-lg-font-family); --tui-typography-heading-lg-font-family: var(--tui-font-family-sans); --tui-typography-heading-lg-font-size: var(--tui-font-size-400); --tui-typography-heading-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-lg-letter-spacing: -0.28px; --tui-typography-heading-lg-line-height: 1.1429; --tui-typography-heading-md: var(--tui-typography-heading-md-font-weight) var(--tui-typography-heading-md-font-size)/var(--tui-typography-heading-md-line-height) var(--tui-typography-heading-md-font-family); --tui-typography-heading-md-font-family: var(--tui-font-family-sans); --tui-typography-heading-md-font-size: var(--tui-font-size-300); --tui-typography-heading-md-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-md-letter-spacing: 0px; --tui-typography-heading-md-line-height: 1.1667; --tui-typography-heading-sm: var(--tui-typography-heading-sm-font-weight) var(--tui-typography-heading-sm-font-size)/var(--tui-typography-heading-sm-line-height) var(--tui-typography-heading-sm-font-family); --tui-typography-heading-sm-font-family: var(--tui-font-family-sans); --tui-typography-heading-sm-font-size: var(--tui-font-size-200); --tui-typography-heading-sm-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-sm-letter-spacing: 0px; --tui-typography-heading-sm-line-height: 1.4; --tui-typography-heading-xl: var(--tui-typography-heading-xl-font-weight) var(--tui-typography-heading-xl-font-size)/var(--tui-typography-heading-xl-line-height) var(--tui-typography-heading-xl-font-family); --tui-typography-heading-xl-font-family: var(--tui-font-family-sans); --tui-typography-heading-xl-font-size: var(--tui-font-size-500); --tui-typography-heading-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-xl-letter-spacing: -0.32px; --tui-typography-heading-xl-line-height: 1.25; --tui-typography-label-lg: var(--tui-typography-label-lg-font-weight) var(--tui-typography-label-lg-font-size)/var(--tui-typography-label-lg-line-height) var(--tui-typography-label-lg-font-family); --tui-typography-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-label-lg-font-size: var(--tui-font-size-100); --tui-typography-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-lg-letter-spacing: 0px; --tui-typography-label-lg-line-height: 1.5; --tui-typography-label-md: var(--tui-typography-label-md-font-weight) var(--tui-typography-label-md-font-size)/var(--tui-typography-label-md-line-height) var(--tui-typography-label-md-font-family); --tui-typography-label-md-font-family: var(--tui-font-family-sans); --tui-typography-label-md-font-size: var(--tui-font-size-075); --tui-typography-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-md-letter-spacing: 0px; --tui-typography-label-md-line-height: 1.4286; --tui-typography-label-xl: var(--tui-typography-label-xl-font-weight) var(--tui-typography-label-xl-font-size)/var(--tui-typography-label-xl-line-height) var(--tui-typography-label-xl-font-family); --tui-typography-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-label-xl-font-size: var(--tui-font-size-200); --tui-typography-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-xl-letter-spacing: 0px; --tui-typography-label-xl-line-height: 1.4; } } } @layer tokens { :root[data-color-scheme="dark"][data-sub-theme="bewell"] { --tui-color-background-accent-green: var(--tui-color-green-500); --tui-color-background-accent-green-bold: var(--tui-color-green-700); --tui-color-background-accent-green-subtle: var(--tui-color-green-100); --tui-color-background-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-background-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-background-accent-steel-subtle: var(--tui-color-rexall-steel-500); --tui-color-background-accent-teal: var(--tui-color-teal-500); --tui-color-background-accent-teal-bold: var(--tui-color-teal-700); --tui-color-background-accent-teal-subtle: var(--tui-color-teal-100); --tui-color-background-brand: var(--tui-color-teal-500); --tui-color-background-brand-bold: var(--tui-color-teal-700); --tui-color-background-brand-bold-hovered: var(--tui-color-teal-800); --tui-color-background-brand-bold-pressed: var(--tui-color-teal-900); --tui-color-background-brand-subtle: var(--tui-color-green-100); --tui-color-background-brand-subtle-hovered: var(--tui-color-green-200); --tui-color-background-brand-subtle-pressed: var(--tui-color-green-300); --tui-color-background-danger: var(--tui-color-red-700); --tui-color-background-danger-bold: var(--tui-color-red-700); --tui-color-background-danger-hovered: var(--tui-color-red-800); --tui-color-background-danger-pressed: var(--tui-color-red-900); --tui-color-background-danger-subtle: var(--tui-color-red-100); --tui-color-background-danger-subtle-hovered: var(--tui-color-red-200); --tui-color-background-danger-subtle-pressed: var(--tui-color-red-300); --tui-color-background-disabled: var(--tui-color-neutral-100); --tui-color-background-hovered: var(--tui-color-neutral-100); --tui-color-background-information: var(--tui-color-rexall-steel-500); --tui-color-background-information-bold: var(--tui-color-rexall-steel-700); --tui-color-background-information-subtle: var(--tui-color-rexall-steel-100); --tui-color-background-inverse: var(--tui-color-neutral-900); --tui-color-background-inverse-hovered: var(--tui-color-neutral-1000); --tui-color-background-inverse-pressed: var(--tui-color-neutral-800); --tui-color-background-neutral: var(--tui-color-neutral-400); --tui-color-background-neutral-bold: var(--tui-color-neutral-700); --tui-color-background-neutral-hovered: var(--tui-color-neutral-300); --tui-color-background-neutral-pressed: var(--tui-color-neutral-500); --tui-color-background-neutral-subtle: var(--tui-color-neutral-200); --tui-color-background-neutral-subtle-hovered: var(--tui-color-neutral-100); --tui-color-background-neutral-subtle-pressed: var(--tui-color-neutral-300); --tui-color-background-pressed: var(--tui-color-neutral-200); --tui-color-background-selected: var(--tui-color-teal-100); --tui-color-background-success: var(--tui-color-green-500); --tui-color-background-success-bold: var(--tui-color-green-700); --tui-color-background-success-subtle: var(--tui-color-green-100); --tui-color-background-warning: var(--tui-color-yellow-300); --tui-color-background-warning-bold: var(--tui-color-yellow-300); --tui-color-background-warning-subtle: var(--tui-color-yellow-100); --tui-color-black: oklch(0% 0 0); --tui-color-blanket-background: var(--tui-color-neutral-900); --tui-color-border: var(--tui-color-neutral-300); --tui-color-border-accent-green: var(--tui-color-green-500); --tui-color-border-accent-green-bold: var(--tui-color-green-700); --tui-color-border-accent-green-subtle: var(--tui-color-green-300); --tui-color-border-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-border-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-border-accent-steel-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-accent-teal: var(--tui-color-teal-500); --tui-color-border-accent-teal-bold: var(--tui-color-teal-700); --tui-color-border-accent-teal-subtle: var(--tui-color-teal-300); --tui-color-border-brand: var(--tui-color-teal-700); --tui-color-border-brand-bold: var(--tui-color-teal-700); --tui-color-border-brand-hovered: var(--tui-color-teal-800); --tui-color-border-brand-pressed: var(--tui-color-teal-900); --tui-color-border-brand-subtle: var(--tui-color-teal-300); --tui-color-border-danger: var(--tui-color-red-600); --tui-color-border-danger-bold: var(--tui-color-red-700); --tui-color-border-danger-hovered: var(--tui-color-red-700); --tui-color-border-danger-pressed: var(--tui-color-red-800); --tui-color-border-danger-subtle: var(--tui-color-red-300); --tui-color-border-disabled: var(--tui-color-neutral-200); --tui-color-border-focus: var(--tui-color-neutral-1000); --tui-color-border-information: var(--tui-color-rexall-steel-600); --tui-color-border-information-bold: var(--tui-color-rexall-steel-700); --tui-color-border-information-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-inverse-focus: var(--tui-color-white); --tui-color-border-neutral: var(--tui-color-neutral-300); --tui-color-border-neutral-bold: var(--tui-color-neutral-600); --tui-color-border-neutral-bold-hovered: var(--tui-color-neutral-700); --tui-color-border-neutral-bold-pressed: var(--tui-color-neutral-800); --tui-color-border-neutral-hovered: var(--tui-color-neutral-200); --tui-color-border-neutral-pressed: var(--tui-color-neutral-400); --tui-color-border-neutral-subtle: var(--tui-color-neutral-300); --tui-color-border-neutral-subtlest: var(--tui-color-neutral-200); --tui-color-border-selected: var(--tui-color-teal-700); --tui-color-border-success: var(--tui-color-green-700); --tui-color-border-success-bold: var(--tui-color-green-700); --tui-color-border-success-subtle: var(--tui-color-green-300); --tui-color-border-warning: var(--tui-color-yellow-600); --tui-color-border-warning-bold: var(--tui-color-yellow-700); --tui-color-border-warning-subtle: var(--tui-color-yellow-300); --tui-color-container-background: var(--tui-color-white); --tui-color-container-background-accent-green: var(--tui-color-background-accent-green); --tui-color-container-background-accent-green-bold: var(--tui-color-background-accent-green-bold); --tui-color-container-background-accent-green-subtle: var(--tui-color-background-accent-green-subtle); --tui-color-container-background-accent-steel: var(--tui-color-background-accent-steel); --tui-color-container-background-accent-steel-bold: var(--tui-color-background-accent-steel-bold); --tui-color-container-background-accent-steel-subtle: var(--tui-color-background-accent-steel-subtle); --tui-color-container-background-accent-teal: var(--tui-color-background-accent-teal); --tui-color-container-background-accent-teal-bold: var(--tui-color-background-accent-teal-bold); --tui-color-container-background-accent-teal-subtle: var(--tui-color-background-accent-teal-subtle); --tui-color-container-background-brand: var(--tui-color-background-brand); --tui-color-container-background-brand-bold: var(--tui-color-background-brand-bold); --tui-color-container-background-brand-subtle: var(--tui-color-background-brand-subtle); --tui-color-container-background-danger: var(--tui-color-background-danger); --tui-color-container-background-danger-bold: var(--tui-color-background-danger-bold); --tui-color-container-background-danger-subtle: var(--tui-color-background-danger-subtle); --tui-color-container-background-information: var(--tui-color-background-information); --tui-color-container-background-information-bold: var(--tui-color-background-information-bold); --tui-color-container-background-information-subtle: var(--tui-color-background-information-subtle); --tui-color-container-background-neutral: var(--tui-color-background-neutral); --tui-color-container-background-neutral-bold: var(--tui-color-background-inverse); --tui-color-container-background-neutral-subtle: var(--tui-color-surface-background-neutral-subtle); --tui-color-container-background-success: var(--tui-color-background-success); --tui-color-container-background-success-bold: var(--tui-color-background-success-bold); --tui-color-container-background-success-subtle: var(--tui-color-background-success-subtle); --tui-color-container-background-warning: var(--tui-color-background-warning); --tui-color-container-background-warning-bold: var(--tui-color-background-warning-bold); --tui-color-container-background-warning-subtle: var(--tui-color-background-warning-subtle); --tui-color-container-border: var(--tui-color-neutral-300); --tui-color-container-border-accent-green: var(--tui-color-border-accent-green); --tui-color-container-border-accent-green-bold: var(--tui-color-border-accent-green-bold); --tui-color-container-border-accent-green-subtle: var(--tui-color-border-accent-green-subtle); --tui-color-container-border-accent-steel: var(--tui-color-border-accent-steel); --tui-color-container-border-accent-steel-bold: var(--tui-color-border-accent-steel-bold); --tui-color-container-border-accent-steel-subtle: var(--tui-color-border-accent-steel-subtle); --tui-color-container-border-accent-teal: var(--tui-color-border-accent-teal); --tui-color-container-border-accent-teal-bold: var(--tui-color-border-accent-teal-bold); --tui-color-container-border-accent-teal-subtle: var(--tui-color-border-accent-teal-subtle); --tui-color-container-border-brand: var(--tui-color-border-brand); --tui-color-container-border-brand-bold: var(--tui-color-border-brand-bold); --tui-color-container-border-brand-subtle: var(--tui-color-border-brand-subtle); --tui-color-container-border-danger: var(--tui-color-border-danger); --tui-color-container-border-danger-bold: var(--tui-color-border-danger-bold); --tui-color-container-border-danger-subtle: var(--tui-color-border-danger-subtle); --tui-color-container-border-information: var(--tui-color-border-information); --tui-color-container-border-information-bold: var(--tui-color-border-information-bold); --tui-color-container-border-information-subtle: var(--tui-color-border-information-subtle); --tui-color-container-border-neutral: var(--tui-color-border-neutral); --tui-color-container-border-neutral-bold: var(--tui-color-border-neutral-bold); --tui-color-container-border-neutral-subtle: var(--tui-color-border-neutral-subtle); --tui-color-container-border-success: var(--tui-color-border-success); --tui-color-container-border-success-bold: var(--tui-color-border-success-bold); --tui-color-container-border-success-subtle: var(--tui-color-border-success-subtle); --tui-color-container-border-warning: var(--tui-color-border-warning); --tui-color-container-border-warning-bold: var(--tui-color-border-warning-bold); --tui-color-container-border-warning-subtle: var(--tui-color-border-warning-subtle); /* Text inside a box that holds content, such as a card. */ --tui-color-container-text: var(--tui-color-text); /* Secondary text inside a box that holds content. */ --tui-color-container-text-neutral-subtle: var(--tui-color-text-neutral-subtle); --tui-color-green-100: oklch(95.8% 0.0339 134); --tui-color-green-200: oklch(91% 0.0654 134); --tui-color-green-300: oklch(86% 0.0956 134); --tui-color-green-400: oklch(79.5% 0.1328 134); --tui-color-green-500: var(--tui-color-rexall-well-green); --tui-color-green-600: oklch(63.5% 0.1512 134); --tui-color-green-700: oklch(54.5% 0.1328 134); --tui-color-green-800: oklch(45.5% 0.1139 134); --tui-color-green-900: oklch(36.5% 0.0944 134); --tui-color-green-1000: oklch(27% 0.0731 134); --tui-color-icon: var(--tui-color-neutral-900); --tui-color-icon-brand: var(--tui-color-teal-700); --tui-color-icon-danger: var(--tui-color-red-700); --tui-color-icon-disabled: var(--tui-color-neutral-600); --tui-color-icon-information: var(--tui-color-rexall-steel-700); --tui-color-icon-inverse: var(--tui-color-white); --tui-color-icon-neutral-subtle: var(--tui-color-neutral-700); --tui-color-icon-success: var(--tui-color-green-700); --tui-color-icon-warning: var(--tui-color-yellow-700); --tui-color-input-background: var(--tui-color-white); --tui-color-input-background-disabled: var(--tui-color-neutral-100); --tui-color-input-border: var(--tui-color-neutral-600); --tui-color-link-text: var(--tui-color-teal-700); --tui-color-link-text-hovered: var(--tui-color-teal-800); --tui-color-link-text-inverse: var(--tui-color-text-inverse); --tui-color-link-text-inverse-hovered: var(--tui-color-text-inverse); --tui-color-link-text-inverse-pressed: var(--tui-color-text-inverse); --tui-color-link-text-inverse-visited: var(--tui-color-text-inverse); --tui-color-link-text-neutral: var(--tui-color-text-neutral); --tui-color-link-text-neutral-hovered: var(--tui-color-text-neutral-hovered); --tui-color-link-text-neutral-pressed: var(--tui-color-text-neutral-pressed); --tui-color-link-text-neutral-visited: var(--tui-color-text-neutral); --tui-color-link-text-pressed: var(--tui-color-teal-800); --tui-color-link-text-visited: var(--tui-color-magenta-700); --tui-color-magenta-100: oklch(95.8% 0.0241 351.2); --tui-color-magenta-200: oklch(91% 0.0541 351.2); --tui-color-magenta-300: oklch(86% 0.0816 351.2); --tui-color-magenta-400: oklch(79.5% 0.1047 351.2); --tui-color-magenta-500: oklch(71.5% 0.13 351.2); --tui-color-magenta-600: oklch(63.5% 0.153 351.2); --tui-color-magenta-700: var(--tui-color-rexall-berry-purple); --tui-color-magenta-800: oklch(45.5% 0.1676 351.2); --tui-color-magenta-900: oklch(36.5% 0.1389 351.2); --tui-color-magenta-1000: oklch(27% 0.1075 351.2); --tui-color-neutral-100: oklch(95.8% 0 0); --tui-color-neutral-200: oklch(91% 0 0); --tui-color-neutral-300: oklch(86% 0 0); --tui-color-neutral-400: oklch(79.5% 0 0); --tui-color-neutral-500: oklch(71.5% 0 0); --tui-color-neutral-600: oklch(63.5% 0 0); --tui-color-neutral-700: oklch(54.5% 0 0); --tui-color-neutral-800: oklch(45.5% 0 0); --tui-color-neutral-900: var(--tui-color-rexall-charcoal-grey); --tui-color-neutral-1000: oklch(27% 0 0); --tui-color-neutral-A100: oklch(10.78% 0 0 / 0.056); --tui-color-neutral-A200: oklch(7.66% 0 0 / 0.118); --tui-color-neutral-A300: oklch(6.76% 0 0 / 0.182); --tui-color-neutral-A400: oklch(6.59% 0 0 / 0.264); --tui-color-neutral-A500: oklch(5.18% 0 0 / 0.362); --tui-color-neutral-A600: oklch(1.98% 0 0 / 0.457); --tui-color-neutral-A700: oklch(0% 0 0 / 0.561); --tui-color-neutral-A800: oklch(3.14% 0 0 / 0.661); --tui-color-neutral-A900: oklch(4.4% 0 0 / 0.797); --tui-color-neutral-A1000: oklch(3.14% 0 0 / 0.85); --tui-color-orange-100: oklch(95.8% 0.023 48.9); --tui-color-orange-200: oklch(91% 0.0514 48.9); --tui-color-orange-300: oklch(86% 0.0834 48.9); --tui-color-orange-400: oklch(79.5% 0.1188 48.9); --tui-color-orange-500: oklch(71.5% 0.1528 48.9); --tui-color-orange-600: var(--tui-color-rexall-terracotta-orange); --tui-color-orange-700: oklch(54.5% 0.1463 48.9); --tui-color-orange-800: oklch(45.5% 0.1222 48.9); --tui-color-orange-900: oklch(36.5% 0.098 48.9); --tui-color-orange-1000: oklch(27% 0.0725 48.9); --tui-color-pink-100: oklch(95.8% 0.0216 5); --tui-color-pink-200: oklch(91% 0.0485 5); --tui-color-pink-300: oklch(86% 0.0792 5); --tui-color-pink-400: oklch(79.5% 0.1241 5); --tui-color-pink-500: oklch(71.5% 0.1644 5); --tui-color-pink-600: var(--tui-color-rexall-tulip-pink); --tui-color-pink-700: oklch(54.5% 0.1544 5); --tui-color-pink-800: oklch(45.5% 0.1324 5); --tui-color-pink-900: oklch(36.5% 0.1098 5); --tui-color-pink-1000: oklch(27% 0.085 5); --tui-color-red-100: oklch(95.8% 0.0206 23.7); --tui-color-red-200: oklch(91% 0.0462 23.7); --tui-color-red-300: oklch(86% 0.0754 23.7); --tui-color-red-400: oklch(79.5% 0.1177 23.7); --tui-color-red-500: oklch(71.5% 0.1783 23.7); --tui-color-red-600: var(--tui-color-rexall-ladybug-red); --tui-color-red-700: oklch(54.5% 0.2142 23.7); --tui-color-red-800: oklch(45.5% 0.1837 23.7); --tui-color-red-900: oklch(36.5% 0.1475 23.7); --tui-color-red-1000: oklch(27% 0.1091 23.7); /* Be Well */ --tui-color-rexall-apricot-orange: oklch(71.4% 0.1525 56.134); /* Skin Health */ --tui-color-rexall-ash: oklch(90% 0.0027 106.45); /* Rexall */ --tui-color-rexall-banana-yellow: oklch(95.33% 0.0757 95.318); /* Berry Purple — magenta anchor */ --tui-color-rexall-berry-purple: oklch(51.17% 0.1852 351.18); /* Rexall */ --tui-color-rexall-blush-pink: oklch(58.59% 0.1586 4.6101); /* Be Well promo */ --tui-color-rexall-blush-red: oklch(86.8% 0.055 21.054); /* Be Well promo */ --tui-color-rexall-burgundy-red: oklch(45.44% 0.1821 28.716); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-calming-blue-haze: oklch(80.84% 0.0387 249.54); /* Charcoal Grey — neutral anchor */ --tui-color-rexall-charcoal-grey: oklch(32.5% 0 0); /* Rexall */ --tui-color-rexall-cloud-grey: oklch(84.52% 0 0); /* Be Well promo */ --tui-color-rexall-cream-yellow: oklch(99.23% 0.0159 98.986); /* Be Well promo */ --tui-color-rexall-daisy-yellow: oklch(92.84% 0.1204 106.48); /* Rexall AODA */ --tui-color-rexall-deep-ocean: oklch(42.34% 0.0723 194.8); /* Be Well promo */ --tui-color-rexall-dusty-red: oklch(50.13% 0.1755 23.713); /* Be Well */ --tui-color-rexall-evergreen: oklch(51.19% 0.0835 138.17); /* Rexall */ --tui-color-rexall-fog-grey: oklch(97.91% 0 0); /* Be Well */ --tui-color-rexall-forest-green: oklch(45.31% 0.073 146.02); /* Be Well */ --tui-color-rexall-garden-green: oklch(54.77% 0.0953 138.22); /* Be Well */ --tui-color-rexall-granite-grey: oklch(53.49% 0.005 17.313); /* Rexall */ --tui-color-rexall-grapefruit: oklch(95.01% 0.0848 98.329); /* Rexall */ --tui-color-rexall-grass-green: oklch(78.93% 0.1268 133.59); /* Be Well */ --tui-color-rexall-grey-blue: oklch(59.99% 0.0929 185.62); /* Be Well promo */ --tui-color-rexall-highlighter-yellow: oklch(92.14% 0.1824 105.41); /* Digestive */ --tui-color-rexall-immunity-orange: oklch(71.08% 0.1395 51.737); /* Ladybug Red — red anchor */ --tui-color-rexall-ladybug-red: oklch(60.41% 0.2338 23.742); /* Rexall AODA */ --tui-color-rexall-lakeside-blue: oklch(52.74% 0.0872 187.63); /* Be Well */ --tui-color-rexall-lavender-purple: oklch(89.47% 0.0375 342.55); /* Rexall */ --tui-color-rexall-lemon-yellow: oklch(88.28% 0.1811 94.46); /* Rexall */ --tui-color-rexall-light-blush-pink: oklch(85.56% 0.0673 10.506); /* Rexall */ --tui-color-rexall-light-drizzle: oklch(91.04% 0.0336 191.96); /* Be Well promo */ --tui-color-rexall-light-red: oklch(94.46% 0.0142 12.025); /* Be Well */ --tui-color-rexall-lime-green: oklch(75.39% 0.152 134.81); /* Be Well promo */ --tui-color-rexall-lipstick-red: oklch(62.76% 0.2141 23.004); /* Be Well */ --tui-color-rexall-melon-orange: oklch(85.06% 0.0788 62.059); /* Rexall */ --tui-color-rexall-mist-blue: oklch(95.8% 0.0169 192.36); /* Be Well */ --tui-color-rexall-moss-green: oklch(64.94% 0.1505 133.89); /* Be Well */ --tui-color-rexall-night-grey: oklch(42.18% 0.0031 48.66); /* Be Well */ --tui-color-rexall-pansy-purple: oklch(79.17% 0.0759 344.13); /* Be Well */ --tui-color-rexall-peachy-orange: oklch(92.38% 0.0385 63.533); /* Be Well promo */ --tui-color-rexall-pinky-red: oklch(96.91% 0.0151 17.418); /* Be Well */ --tui-color-rexall-plum-purple: oklch(59.35% 0.1561 347.67); /* Poolside Blue — teal anchor */ --tui-color-rexall-poolside-blue: oklch(68.76% 0.1147 188.23); /* Rexall */ --tui-color-rexall-rain-blue: oklch(87.81% 0.0553 193.35); /* Be Well promo */ --tui-color-rexall-rosy-red: oklch(69.56% 0.183 23.103); /* Rexall */ --tui-color-rexall-ruby-red: oklch(57.73% 0.2098 23.23); /* Rexall */ --tui-color-rexall-sage-green: oklch(88.81% 0.0662 132.17); /* Be Well */ --tui-color-rexall-seaside-blue: oklch(49.86% 0.0891 182.42); /* Rexall AODA */ --tui-color-rexall-shoreline-blue: oklch(63.95% 0.1102 188.54); /* Be Well */ --tui-color-rexall-silver-grey: oklch(66.37% 0.0049 0.0752); /* Be Well */ --tui-color-rexall-sky-blue: oklch(84.85% 0.0638 193.53); /* Rexall */ --tui-color-rexall-slate-grey: oklch(53.82% 0 0); --tui-color-rexall-steel: oklch(52.12% 0.0301 259.03); --tui-color-rexall-steel-100: oklch(95.8% 0.0077 249.5); --tui-color-rexall-steel-200: oklch(91% 0.0173 249.5); --tui-color-rexall-steel-300: oklch(86% 0.0277 249.5); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-steel-400: var(--tui-color-rexall-calming-blue-haze); --tui-color-rexall-steel-500: oklch(71.5% 0.0348 249.5); --tui-color-rexall-steel-600: oklch(63.5% 0.0315 249.5); --tui-color-rexall-steel-700: oklch(54.5% 0.0276 249.5); --tui-color-rexall-steel-800: oklch(45.5% 0.0237 249.5); --tui-color-rexall-steel-900: oklch(36.5% 0.0196 249.5); --tui-color-rexall-steel-1000: oklch(27% 0.0152 249.5); /* Sunshine Yellow — yellow anchor */ --tui-color-rexall-sunshine-yellow: oklch(86.72% 0.1773 90.85); /* Be Well promo */ --tui-color-rexall-taupe-red: oklch(75.68% 0.0781 13.998); /* Rexall */ --tui-color-rexall-tea-green: oklch(95.59% 0.0563 131.52); /* Be Well */ --tui-color-rexall-teal-blue: oklch(68.53% 0.0897 185.9); /* Terracotta Orange — orange anchor */ --tui-color-rexall-terracotta-orange: oklch(65.65% 0.1764 48.889); /* Tulip Pink — pink anchor */ --tui-color-rexall-tulip-pink: oklch(67.04% 0.1842 5.0399); /* Be Well promo */ --tui-color-rexall-vanilla-yellow: oklch(95.6% 0.072 105.12); /* Be Well */ --tui-color-rexall-venice-blue: oklch(40.54% 0.0851 236.88); /* Be Well */ --tui-color-rexall-washed-blue: oklch(78.7% 0.0619 185.5); /* Well Green — green anchor */ --tui-color-rexall-well-green: oklch(72.73% 0.1698 134.03); /* Digestive */ --tui-color-rexall-well-green-deep: oklch(50.28% 0.1219 142.99); --tui-color-surface-background: var(--tui-color-white); --tui-color-surface-background-brand: var(--tui-color-green-400); /* A page or section tinted with the brand. Plain surface unless a brand sets a tint. */ --tui-color-surface-background-brand-subtle: var(--tui-color-surface-background); --tui-color-surface-background-neutral-subtle: var(--tui-color-neutral-100); --tui-color-tag-background-accent-green: var(--tui-color-green-100); --tui-color-tag-background-accent-magenta: var(--tui-color-magenta-100); --tui-color-tag-background-accent-neutral: var(--tui-color-neutral-100); --tui-color-tag-background-accent-orange: var(--tui-color-orange-100); --tui-color-tag-background-accent-pink: var(--tui-color-pink-100); --tui-color-tag-background-accent-steel: var(--tui-color-rexall-steel-100); --tui-color-tag-background-accent-teal: var(--tui-color-teal-100); --tui-color-tag-background-accent-yellow: var(--tui-color-yellow-100); --tui-color-tag-text-accent-green: var(--tui-color-green-800); --tui-color-tag-text-accent-magenta: var(--tui-color-magenta-800); --tui-color-tag-text-accent-neutral: var(--tui-color-neutral-800); --tui-color-tag-text-accent-orange: var(--tui-color-orange-800); --tui-color-tag-text-accent-pink: var(--tui-color-pink-800); --tui-color-tag-text-accent-steel: var(--tui-color-rexall-steel-800); --tui-color-tag-text-accent-teal: var(--tui-color-teal-800); --tui-color-tag-text-accent-yellow: var(--tui-color-yellow-800); --tui-color-teal-100: oklch(95.8% 0.0229 188.2); --tui-color-teal-200: oklch(91% 0.0422 188.2); --tui-color-teal-300: oklch(86% 0.0602 188.2); --tui-color-teal-400: oklch(79.5% 0.0818 188.2); /* Poolside Blue — teal anchor */ --tui-color-teal-500: var(--tui-color-rexall-poolside-blue); --tui-color-teal-600: oklch(63.5% 0.1071 188.2); --tui-color-teal-700: oklch(54.5% 0.0941 188.2); --tui-color-teal-800: oklch(45.5% 0.079 188.2); --tui-color-teal-900: oklch(36.5% 0.0634 188.2); --tui-color-teal-1000: oklch(27% 0.0469 188.2); --tui-color-text: var(--tui-color-neutral-900); --tui-color-text-brand: var(--tui-color-teal-800); --tui-color-text-brand-hovered: var(--tui-color-teal-900); --tui-color-text-brand-pressed: var(--tui-color-teal-900); --tui-color-text-danger: var(--tui-color-red-700); --tui-color-text-danger-hovered: var(--tui-color-red-800); --tui-color-text-danger-pressed: var(--tui-color-red-800); --tui-color-text-disabled: var(--tui-color-neutral-600); --tui-color-text-information: var(--tui-color-rexall-steel-700); --tui-color-text-inverse: var(--tui-color-white); --tui-color-text-neutral: var(--tui-color-neutral-900); --tui-color-text-neutral-hovered: var(--tui-color-neutral-800); --tui-color-text-neutral-pressed: var(--tui-color-neutral-1000); --tui-color-text-neutral-subtle: var(--tui-color-neutral-800); --tui-color-text-success: var(--tui-color-green-700); --tui-color-text-warning: var(--tui-color-yellow-700); --tui-color-transparent: oklch(0% 0 0 / 0); --tui-color-white: oklch(100% 0 0); --tui-color-yellow-100: oklch(95.8% 0.0354 90.8); --tui-color-yellow-200: oklch(91% 0.1029 90.8); /* Sunshine Yellow — yellow anchor */ --tui-color-yellow-300: var(--tui-color-rexall-sunshine-yellow); --tui-color-yellow-400: oklch(79.5% 0.1624 88.3); --tui-color-yellow-500: oklch(71.5% 0.1463 85.7); --tui-color-yellow-600: oklch(63.5% 0.1305 83.1); --tui-color-yellow-700: oklch(54.5% 0.1126 80.6); --tui-color-yellow-800: oklch(45.5% 0.0948 78); --tui-color-yellow-900: oklch(36.5% 0.0768 75.4); --tui-color-yellow-1000: oklch(27% 0.0575 72.8); --tui-elevation-shadow-overflow: 0px 0px 8px 0px oklch(27% 0 0 / 0.16), 0px 0px 1px 0px oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-perimeter: oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-spread: oklch(27% 0 0 / 0.16); --tui-elevation-shadow-overlay: 0px 8px 12px 0px oklch(27% 0 0 / 0.15), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-shadow-raised: 0px 1px 1px 0px oklch(27% 0 0 / 0.25), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-surface: var(--tui-color-transparent); --tui-elevation-surface-container: var(--tui-color-neutral-A100); --tui-elevation-surface-container-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-container-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay: var(--tui-color-transparent); --tui-elevation-surface-overlay-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-raised: var(--tui-color-transparent); --tui-elevation-surface-raised-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-raised-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-sunken: var(--tui-color-neutral-A100); --tui-font-family-mono: "Source Code Pro", ui-monospace, "Consolas", "Menlo", monospace; --tui-font-family-sans: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --tui-font-leading-050: 16px; --tui-font-leading-075: 20px; --tui-font-leading-100: 24px; --tui-font-leading-200: 28px; --tui-font-leading-300: 28px; --tui-font-leading-400: 32px; --tui-font-leading-500: 40px; --tui-font-leading-600: 48px; --tui-font-leading-700: 56px; --tui-font-leading-800: 68px; --tui-font-leading-900: 96px; --tui-font-leading-1000: 116px; --tui-font-size-050: 12px; --tui-font-size-075: 14px; --tui-font-size-100: 16px; --tui-font-size-200: 20px; --tui-font-size-300: 24px; --tui-font-size-400: 28px; --tui-font-size-500: 32px; --tui-font-size-600: 40px; --tui-font-size-700: 48px; --tui-font-size-800: 56px; --tui-font-size-900: 80px; --tui-font-size-1000: 96px; --tui-font-tracking-default: 0rem; --tui-font-weight-bold: 700; --tui-font-weight-medium: 500; --tui-font-weight-regular: 400; --tui-font-weight-semibold: 600; --tui-layer-0: 0; --tui-layer-10: 10; --tui-layer-20: 20; --tui-layer-30: 30; --tui-layer-40: 40; --tui-layer-50: 50; --tui-layer-60: 60; --tui-layer-base: var(--tui-layer-0); --tui-layer-modal: var(--tui-layer-50); --tui-layer-navigation: var(--tui-layer-10); --tui-layer-notification: var(--tui-layer-60); --tui-layer-overlay: var(--tui-layer-40); --tui-layer-popover: var(--tui-layer-30); --tui-layer-sticky: var(--tui-layer-20); --tui-motion-action-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-action-pressed: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-blanket-enter: var(--tui-motion-duration-long) 0ms var(--tui-motion-easing-inout-bold); --tui-motion-blanket-exit: var(--tui-motion-duration-medium) 0ms var(--tui-motion-easing-in-practical); --tui-motion-control-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-selected: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-toggle: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-curve-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6); --tui-motion-curve-inout-bold: cubic-bezier(0.4, 0, 0, 1); --tui-motion-curve-out-bold: cubic-bezier(0, 0.4, 0, 1); --tui-motion-curve-out-practical: cubic-bezier(0.4, 1, 0.6, 1); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-curve-spring: cubic-bezier(0.363, 1.102, 0.089, 1.043); --tui-motion-duration-0: 0ms; --tui-motion-duration-050: 50ms; --tui-motion-duration-100: 100ms; --tui-motion-duration-150: 150ms; --tui-motion-duration-200: 200ms; --tui-motion-duration-250: 250ms; --tui-motion-duration-400: 400ms; --tui-motion-duration-600: 600ms; --tui-motion-duration-instant: var(--tui-motion-duration-0); --tui-motion-duration-long: var(--tui-motion-duration-250); --tui-motion-duration-medium: var(--tui-motion-duration-200); --tui-motion-duration-short: var(--tui-motion-duration-150); --tui-motion-duration-xlong: var(--tui-motion-duration-400); --tui-motion-duration-xshort: var(--tui-motion-duration-100); --tui-motion-duration-xxlong: var(--tui-motion-duration-600); --tui-motion-duration-xxshort: var(--tui-motion-duration-050); --tui-motion-easing-in-practical: var(--tui-motion-curve-in-practical); --tui-motion-easing-inout-bold: var(--tui-motion-curve-inout-bold); --tui-motion-easing-out-bold: var(--tui-motion-curve-out-bold); --tui-motion-easing-out-practical: var(--tui-motion-curve-out-practical); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-easing-spring: var(--tui-motion-curve-spring); /* Corners of a small action (Button sm). */ --tui-shape-action-round: var(--tui-size-radius-lg); /* Corners of a medium action (Button md). */ --tui-shape-action-rounder: var(--tui-size-radius-xl); /* Corners of a large action (Button lg). The roundest action, not always a pill. */ --tui-shape-action-roundest: var(--tui-size-radius-2xl); /* Corners of a box that holds content, such as a card. Follows the surface corners unless a brand sets its own. */ --tui-shape-container-rounder: var(--tui-shape-surface-rounder); --tui-shape-rounder: var(--tui-size-radius-lg); --tui-shape-surface-rounder: var(--tui-size-radius-2xl); --tui-size-border-hairline: var(--tui-size-border-sm); --tui-size-border-md: 2px; --tui-size-border-narrow: var(--tui-size-border-md); --tui-size-border-sm: 1px; --tui-size-icon-lg: var(--tui-space-300); --tui-size-icon-md: var(--tui-space-250); --tui-size-icon-sm: var(--tui-space-200); --tui-size-icon-xs: var(--tui-space-100); --tui-size-radius-2xl: 16px; --tui-size-radius-3xl: 20px; --tui-size-radius-4xl: 24px; --tui-size-radius-full: 9999px; --tui-size-radius-lg: 8px; --tui-size-radius-md: 6px; --tui-size-radius-none: 0px; --tui-size-radius-sm: 4px; --tui-size-radius-xl: 12px; --tui-size-radius-xs: 2px; --tui-space-0: 0px; --tui-space-025: 2px; --tui-space-050: 4px; --tui-space-075: 6px; --tui-space-100: 8px; --tui-space-125: 10px; --tui-space-150: 12px; --tui-space-200: 16px; --tui-space-250: 20px; --tui-space-300: 24px; --tui-space-400: 32px; --tui-space-500: 40px; --tui-space-600: 48px; --tui-space-700: 56px; --tui-space-800: 64px; --tui-space-900: 72px; --tui-space-1000: 80px; --tui-space-1100: 88px; --tui-space-1200: 96px; --tui-space-1300: 104px; --tui-space-1400: 112px; --tui-space-1500: 120px; --tui-space-inline: var(--tui-space-100); --tui-space-inline-dense: var(--tui-space-050); --tui-space-inline-loose: var(--tui-space-150); --tui-space-inline-looser: var(--tui-space-250); --tui-space-inset: var(--tui-space-200); --tui-space-inset-dense: var(--tui-space-100); --tui-space-inset-loose: var(--tui-space-250); --tui-space-inset-looser: var(--tui-space-400); --tui-space-inset-squish: 12px 24px; --tui-space-inset-squish-dense: 8px 24px; --tui-space-inset-squish-loose: 16px 24px; --tui-space-inset-stretch: 8px 16px; --tui-space-inset-stretch-loosest: 16px 16px; --tui-space-negative-025: -2px; --tui-space-negative-050: -4px; --tui-space-negative-075: -6px; --tui-space-negative-100: -8px; --tui-space-negative-150: -12px; --tui-space-negative-200: -16px; --tui-space-negative-250: -20px; --tui-space-negative-300: -24px; --tui-space-negative-400: -32px; --tui-space-stack: var(--tui-space-200); --tui-space-stack-dense: var(--tui-space-100); --tui-space-stack-denser: var(--tui-space-050); --tui-space-stack-loose: var(--tui-space-300); --tui-space-stack-looser: var(--tui-space-400); --tui-space-stack-loosest: var(--tui-space-600); --tui-typography-action-label-lg: var(--tui-typography-action-label-lg-font-weight) var(--tui-typography-action-label-lg-font-size)/var(--tui-typography-action-label-lg-line-height) var(--tui-typography-action-label-lg-font-family); --tui-typography-action-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-action-label-lg-font-size: var(--tui-font-size-100); --tui-typography-action-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-lg-letter-spacing: 0px; --tui-typography-action-label-lg-line-height: 1.5; --tui-typography-action-label-md: var(--tui-typography-action-label-md-font-weight) var(--tui-typography-action-label-md-font-size)/var(--tui-typography-action-label-md-line-height) var(--tui-typography-action-label-md-font-family); --tui-typography-action-label-md-font-family: var(--tui-font-family-sans); --tui-typography-action-label-md-font-size: var(--tui-font-size-075); --tui-typography-action-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-md-letter-spacing: 0px; --tui-typography-action-label-md-line-height: 1.4286; --tui-typography-action-label-xl: var(--tui-typography-action-label-xl-font-weight) var(--tui-typography-action-label-xl-font-size)/var(--tui-typography-action-label-xl-line-height) var(--tui-typography-action-label-xl-font-family); --tui-typography-action-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-action-label-xl-font-size: var(--tui-font-size-200); --tui-typography-action-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-xl-letter-spacing: 0px; --tui-typography-action-label-xl-line-height: 1.4; --tui-typography-body-lg: var(--tui-typography-body-lg-font-weight) var(--tui-typography-body-lg-font-size)/var(--tui-typography-body-lg-line-height) var(--tui-typography-body-lg-font-family); --tui-typography-body-lg-font-family: var(--tui-font-family-sans); --tui-typography-body-lg-font-size: var(--tui-font-size-200); --tui-typography-body-lg-font-weight: var(--tui-font-weight-regular); --tui-typography-body-lg-letter-spacing: 0px; --tui-typography-body-lg-line-height: 1.4; --tui-typography-body-md: var(--tui-typography-body-md-font-weight) var(--tui-typography-body-md-font-size)/var(--tui-typography-body-md-line-height) var(--tui-typography-body-md-font-family); --tui-typography-body-md-font-family: var(--tui-font-family-sans); --tui-typography-body-md-font-size: var(--tui-font-size-100); --tui-typography-body-md-font-weight: var(--tui-font-weight-regular); --tui-typography-body-md-letter-spacing: 0px; --tui-typography-body-md-line-height: 1.5; --tui-typography-body-sm: var(--tui-typography-body-sm-font-weight) var(--tui-typography-body-sm-font-size)/var(--tui-typography-body-sm-line-height) var(--tui-typography-body-sm-font-family); --tui-typography-body-sm-font-family: var(--tui-font-family-sans); --tui-typography-body-sm-font-size: var(--tui-font-size-075); --tui-typography-body-sm-font-weight: var(--tui-font-weight-regular); --tui-typography-body-sm-letter-spacing: 0px; --tui-typography-body-sm-line-height: 1.4286; --tui-typography-body-xs: var(--tui-typography-body-xs-font-weight) var(--tui-typography-body-xs-font-size)/var(--tui-typography-body-xs-line-height) var(--tui-typography-body-xs-font-family); --tui-typography-body-xs-font-family: var(--tui-font-family-sans); --tui-typography-body-xs-font-size: var(--tui-font-size-050); --tui-typography-body-xs-font-weight: var(--tui-font-weight-regular); --tui-typography-body-xs-letter-spacing: 0px; --tui-typography-body-xs-line-height: 1.3333; --tui-typography-code-md: var(--tui-typography-code-md-font-weight) var(--tui-typography-code-md-font-size)/var(--tui-typography-code-md-line-height) var(--tui-typography-code-md-font-family); --tui-typography-code-md-font-family: var(--tui-font-family-mono); --tui-typography-code-md-font-size: var(--tui-font-size-075); --tui-typography-code-md-font-weight: var(--tui-font-weight-regular); --tui-typography-code-md-letter-spacing: 0px; --tui-typography-code-md-line-height: 1.4286; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md: var(--tui-typography-container-heading-md-font-weight) var(--tui-typography-container-heading-md-font-size)/var(--tui-typography-container-heading-md-line-height) var(--tui-typography-container-heading-md-font-family); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-family: var(--tui-font-family-sans); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-size: var(--tui-font-size-200); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-weight: var(--tui-font-weight-bold); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-letter-spacing: 0px; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-line-height: 1.4; --tui-typography-display-lg: var(--tui-typography-display-lg-font-weight) var(--tui-typography-display-lg-font-size)/var(--tui-typography-display-lg-line-height) var(--tui-typography-display-lg-font-family); --tui-typography-display-lg-font-family: var(--tui-font-family-sans); --tui-typography-display-lg-font-size: var(--tui-font-size-900); --tui-typography-display-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-display-lg-letter-spacing: -0.8px; --tui-typography-display-lg-line-height: 1.2; --tui-typography-display-md: var(--tui-typography-display-md-font-weight) var(--tui-typography-display-md-font-size)/var(--tui-typography-display-md-line-height) var(--tui-typography-display-md-font-family); --tui-typography-display-md-font-family: var(--tui-font-family-sans); --tui-typography-display-md-font-size: var(--tui-font-size-800); --tui-typography-display-md-font-weight: var(--tui-font-weight-bold); --tui-typography-display-md-letter-spacing: -0.56px; --tui-typography-display-md-line-height: 1.2143; --tui-typography-display-xl: var(--tui-typography-display-xl-font-weight) var(--tui-typography-display-xl-font-size)/var(--tui-typography-display-xl-line-height) var(--tui-typography-display-xl-font-family); --tui-typography-display-xl-font-family: var(--tui-font-family-sans); --tui-typography-display-xl-font-size: var(--tui-font-size-1000); --tui-typography-display-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-display-xl-letter-spacing: -0.96px; --tui-typography-display-xl-line-height: 1.2083; --tui-typography-heading-lg: var(--tui-typography-heading-lg-font-weight) var(--tui-typography-heading-lg-font-size)/var(--tui-typography-heading-lg-line-height) var(--tui-typography-heading-lg-font-family); --tui-typography-heading-lg-font-family: var(--tui-font-family-sans); --tui-typography-heading-lg-font-size: var(--tui-font-size-400); --tui-typography-heading-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-lg-letter-spacing: -0.28px; --tui-typography-heading-lg-line-height: 1.1429; --tui-typography-heading-md: var(--tui-typography-heading-md-font-weight) var(--tui-typography-heading-md-font-size)/var(--tui-typography-heading-md-line-height) var(--tui-typography-heading-md-font-family); --tui-typography-heading-md-font-family: var(--tui-font-family-sans); --tui-typography-heading-md-font-size: var(--tui-font-size-300); --tui-typography-heading-md-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-md-letter-spacing: 0px; --tui-typography-heading-md-line-height: 1.1667; --tui-typography-heading-sm: var(--tui-typography-heading-sm-font-weight) var(--tui-typography-heading-sm-font-size)/var(--tui-typography-heading-sm-line-height) var(--tui-typography-heading-sm-font-family); --tui-typography-heading-sm-font-family: var(--tui-font-family-sans); --tui-typography-heading-sm-font-size: var(--tui-font-size-200); --tui-typography-heading-sm-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-sm-letter-spacing: 0px; --tui-typography-heading-sm-line-height: 1.4; --tui-typography-heading-xl: var(--tui-typography-heading-xl-font-weight) var(--tui-typography-heading-xl-font-size)/var(--tui-typography-heading-xl-line-height) var(--tui-typography-heading-xl-font-family); --tui-typography-heading-xl-font-family: var(--tui-font-family-sans); --tui-typography-heading-xl-font-size: var(--tui-font-size-500); --tui-typography-heading-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-xl-letter-spacing: -0.32px; --tui-typography-heading-xl-line-height: 1.25; --tui-typography-label-lg: var(--tui-typography-label-lg-font-weight) var(--tui-typography-label-lg-font-size)/var(--tui-typography-label-lg-line-height) var(--tui-typography-label-lg-font-family); --tui-typography-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-label-lg-font-size: var(--tui-font-size-100); --tui-typography-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-lg-letter-spacing: 0px; --tui-typography-label-lg-line-height: 1.5; --tui-typography-label-md: var(--tui-typography-label-md-font-weight) var(--tui-typography-label-md-font-size)/var(--tui-typography-label-md-line-height) var(--tui-typography-label-md-font-family); --tui-typography-label-md-font-family: var(--tui-font-family-sans); --tui-typography-label-md-font-size: var(--tui-font-size-075); --tui-typography-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-md-letter-spacing: 0px; --tui-typography-label-md-line-height: 1.4286; --tui-typography-label-xl: var(--tui-typography-label-xl-font-weight) var(--tui-typography-label-xl-font-size)/var(--tui-typography-label-xl-line-height) var(--tui-typography-label-xl-font-family); --tui-typography-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-label-xl-font-size: var(--tui-font-size-200); --tui-typography-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-xl-letter-spacing: 0px; --tui-typography-label-xl-line-height: 1.4; } } @layer tokens { @media (prefers-color-scheme: dark) { :root:not([data-color-scheme="light"])[data-sub-theme="bewell"] { --tui-color-background-accent-green: var(--tui-color-green-500); --tui-color-background-accent-green-bold: var(--tui-color-green-700); --tui-color-background-accent-green-subtle: var(--tui-color-green-100); --tui-color-background-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-background-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-background-accent-steel-subtle: var(--tui-color-rexall-steel-500); --tui-color-background-accent-teal: var(--tui-color-teal-500); --tui-color-background-accent-teal-bold: var(--tui-color-teal-700); --tui-color-background-accent-teal-subtle: var(--tui-color-teal-100); --tui-color-background-brand: var(--tui-color-teal-500); --tui-color-background-brand-bold: var(--tui-color-teal-700); --tui-color-background-brand-bold-hovered: var(--tui-color-teal-800); --tui-color-background-brand-bold-pressed: var(--tui-color-teal-900); --tui-color-background-brand-subtle: var(--tui-color-green-100); --tui-color-background-brand-subtle-hovered: var(--tui-color-green-200); --tui-color-background-brand-subtle-pressed: var(--tui-color-green-300); --tui-color-background-danger: var(--tui-color-red-700); --tui-color-background-danger-bold: var(--tui-color-red-700); --tui-color-background-danger-hovered: var(--tui-color-red-800); --tui-color-background-danger-pressed: var(--tui-color-red-900); --tui-color-background-danger-subtle: var(--tui-color-red-100); --tui-color-background-danger-subtle-hovered: var(--tui-color-red-200); --tui-color-background-danger-subtle-pressed: var(--tui-color-red-300); --tui-color-background-disabled: var(--tui-color-neutral-100); --tui-color-background-hovered: var(--tui-color-neutral-100); --tui-color-background-information: var(--tui-color-rexall-steel-500); --tui-color-background-information-bold: var(--tui-color-rexall-steel-700); --tui-color-background-information-subtle: var(--tui-color-rexall-steel-100); --tui-color-background-inverse: var(--tui-color-neutral-900); --tui-color-background-inverse-hovered: var(--tui-color-neutral-1000); --tui-color-background-inverse-pressed: var(--tui-color-neutral-800); --tui-color-background-neutral: var(--tui-color-neutral-400); --tui-color-background-neutral-bold: var(--tui-color-neutral-700); --tui-color-background-neutral-hovered: var(--tui-color-neutral-300); --tui-color-background-neutral-pressed: var(--tui-color-neutral-500); --tui-color-background-neutral-subtle: var(--tui-color-neutral-200); --tui-color-background-neutral-subtle-hovered: var(--tui-color-neutral-100); --tui-color-background-neutral-subtle-pressed: var(--tui-color-neutral-300); --tui-color-background-pressed: var(--tui-color-neutral-200); --tui-color-background-selected: var(--tui-color-teal-100); --tui-color-background-success: var(--tui-color-green-500); --tui-color-background-success-bold: var(--tui-color-green-700); --tui-color-background-success-subtle: var(--tui-color-green-100); --tui-color-background-warning: var(--tui-color-yellow-300); --tui-color-background-warning-bold: var(--tui-color-yellow-300); --tui-color-background-warning-subtle: var(--tui-color-yellow-100); --tui-color-black: oklch(0% 0 0); --tui-color-blanket-background: var(--tui-color-neutral-900); --tui-color-border: var(--tui-color-neutral-300); --tui-color-border-accent-green: var(--tui-color-green-500); --tui-color-border-accent-green-bold: var(--tui-color-green-700); --tui-color-border-accent-green-subtle: var(--tui-color-green-300); --tui-color-border-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-border-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-border-accent-steel-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-accent-teal: var(--tui-color-teal-500); --tui-color-border-accent-teal-bold: var(--tui-color-teal-700); --tui-color-border-accent-teal-subtle: var(--tui-color-teal-300); --tui-color-border-brand: var(--tui-color-teal-700); --tui-color-border-brand-bold: var(--tui-color-teal-700); --tui-color-border-brand-hovered: var(--tui-color-teal-800); --tui-color-border-brand-pressed: var(--tui-color-teal-900); --tui-color-border-brand-subtle: var(--tui-color-teal-300); --tui-color-border-danger: var(--tui-color-red-600); --tui-color-border-danger-bold: var(--tui-color-red-700); --tui-color-border-danger-hovered: var(--tui-color-red-700); --tui-color-border-danger-pressed: var(--tui-color-red-800); --tui-color-border-danger-subtle: var(--tui-color-red-300); --tui-color-border-disabled: var(--tui-color-neutral-200); --tui-color-border-focus: var(--tui-color-neutral-1000); --tui-color-border-information: var(--tui-color-rexall-steel-600); --tui-color-border-information-bold: var(--tui-color-rexall-steel-700); --tui-color-border-information-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-inverse-focus: var(--tui-color-white); --tui-color-border-neutral: var(--tui-color-neutral-300); --tui-color-border-neutral-bold: var(--tui-color-neutral-600); --tui-color-border-neutral-bold-hovered: var(--tui-color-neutral-700); --tui-color-border-neutral-bold-pressed: var(--tui-color-neutral-800); --tui-color-border-neutral-hovered: var(--tui-color-neutral-200); --tui-color-border-neutral-pressed: var(--tui-color-neutral-400); --tui-color-border-neutral-subtle: var(--tui-color-neutral-300); --tui-color-border-neutral-subtlest: var(--tui-color-neutral-200); --tui-color-border-selected: var(--tui-color-teal-700); --tui-color-border-success: var(--tui-color-green-700); --tui-color-border-success-bold: var(--tui-color-green-700); --tui-color-border-success-subtle: var(--tui-color-green-300); --tui-color-border-warning: var(--tui-color-yellow-600); --tui-color-border-warning-bold: var(--tui-color-yellow-700); --tui-color-border-warning-subtle: var(--tui-color-yellow-300); --tui-color-container-background: var(--tui-color-white); --tui-color-container-background-accent-green: var(--tui-color-background-accent-green); --tui-color-container-background-accent-green-bold: var(--tui-color-background-accent-green-bold); --tui-color-container-background-accent-green-subtle: var(--tui-color-background-accent-green-subtle); --tui-color-container-background-accent-steel: var(--tui-color-background-accent-steel); --tui-color-container-background-accent-steel-bold: var(--tui-color-background-accent-steel-bold); --tui-color-container-background-accent-steel-subtle: var(--tui-color-background-accent-steel-subtle); --tui-color-container-background-accent-teal: var(--tui-color-background-accent-teal); --tui-color-container-background-accent-teal-bold: var(--tui-color-background-accent-teal-bold); --tui-color-container-background-accent-teal-subtle: var(--tui-color-background-accent-teal-subtle); --tui-color-container-background-brand: var(--tui-color-background-brand); --tui-color-container-background-brand-bold: var(--tui-color-background-brand-bold); --tui-color-container-background-brand-subtle: var(--tui-color-background-brand-subtle); --tui-color-container-background-danger: var(--tui-color-background-danger); --tui-color-container-background-danger-bold: var(--tui-color-background-danger-bold); --tui-color-container-background-danger-subtle: var(--tui-color-background-danger-subtle); --tui-color-container-background-information: var(--tui-color-background-information); --tui-color-container-background-information-bold: var(--tui-color-background-information-bold); --tui-color-container-background-information-subtle: var(--tui-color-background-information-subtle); --tui-color-container-background-neutral: var(--tui-color-background-neutral); --tui-color-container-background-neutral-bold: var(--tui-color-background-inverse); --tui-color-container-background-neutral-subtle: var(--tui-color-surface-background-neutral-subtle); --tui-color-container-background-success: var(--tui-color-background-success); --tui-color-container-background-success-bold: var(--tui-color-background-success-bold); --tui-color-container-background-success-subtle: var(--tui-color-background-success-subtle); --tui-color-container-background-warning: var(--tui-color-background-warning); --tui-color-container-background-warning-bold: var(--tui-color-background-warning-bold); --tui-color-container-background-warning-subtle: var(--tui-color-background-warning-subtle); --tui-color-container-border: var(--tui-color-neutral-300); --tui-color-container-border-accent-green: var(--tui-color-border-accent-green); --tui-color-container-border-accent-green-bold: var(--tui-color-border-accent-green-bold); --tui-color-container-border-accent-green-subtle: var(--tui-color-border-accent-green-subtle); --tui-color-container-border-accent-steel: var(--tui-color-border-accent-steel); --tui-color-container-border-accent-steel-bold: var(--tui-color-border-accent-steel-bold); --tui-color-container-border-accent-steel-subtle: var(--tui-color-border-accent-steel-subtle); --tui-color-container-border-accent-teal: var(--tui-color-border-accent-teal); --tui-color-container-border-accent-teal-bold: var(--tui-color-border-accent-teal-bold); --tui-color-container-border-accent-teal-subtle: var(--tui-color-border-accent-teal-subtle); --tui-color-container-border-brand: var(--tui-color-border-brand); --tui-color-container-border-brand-bold: var(--tui-color-border-brand-bold); --tui-color-container-border-brand-subtle: var(--tui-color-border-brand-subtle); --tui-color-container-border-danger: var(--tui-color-border-danger); --tui-color-container-border-danger-bold: var(--tui-color-border-danger-bold); --tui-color-container-border-danger-subtle: var(--tui-color-border-danger-subtle); --tui-color-container-border-information: var(--tui-color-border-information); --tui-color-container-border-information-bold: var(--tui-color-border-information-bold); --tui-color-container-border-information-subtle: var(--tui-color-border-information-subtle); --tui-color-container-border-neutral: var(--tui-color-border-neutral); --tui-color-container-border-neutral-bold: var(--tui-color-border-neutral-bold); --tui-color-container-border-neutral-subtle: var(--tui-color-border-neutral-subtle); --tui-color-container-border-success: var(--tui-color-border-success); --tui-color-container-border-success-bold: var(--tui-color-border-success-bold); --tui-color-container-border-success-subtle: var(--tui-color-border-success-subtle); --tui-color-container-border-warning: var(--tui-color-border-warning); --tui-color-container-border-warning-bold: var(--tui-color-border-warning-bold); --tui-color-container-border-warning-subtle: var(--tui-color-border-warning-subtle); /* Text inside a box that holds content, such as a card. */ --tui-color-container-text: var(--tui-color-text); /* Secondary text inside a box that holds content. */ --tui-color-container-text-neutral-subtle: var(--tui-color-text-neutral-subtle); --tui-color-green-100: oklch(95.8% 0.0339 134); --tui-color-green-200: oklch(91% 0.0654 134); --tui-color-green-300: oklch(86% 0.0956 134); --tui-color-green-400: oklch(79.5% 0.1328 134); --tui-color-green-500: var(--tui-color-rexall-well-green); --tui-color-green-600: oklch(63.5% 0.1512 134); --tui-color-green-700: oklch(54.5% 0.1328 134); --tui-color-green-800: oklch(45.5% 0.1139 134); --tui-color-green-900: oklch(36.5% 0.0944 134); --tui-color-green-1000: oklch(27% 0.0731 134); --tui-color-icon: var(--tui-color-neutral-900); --tui-color-icon-brand: var(--tui-color-teal-700); --tui-color-icon-danger: var(--tui-color-red-700); --tui-color-icon-disabled: var(--tui-color-neutral-600); --tui-color-icon-information: var(--tui-color-rexall-steel-700); --tui-color-icon-inverse: var(--tui-color-white); --tui-color-icon-neutral-subtle: var(--tui-color-neutral-700); --tui-color-icon-success: var(--tui-color-green-700); --tui-color-icon-warning: var(--tui-color-yellow-700); --tui-color-input-background: var(--tui-color-white); --tui-color-input-background-disabled: var(--tui-color-neutral-100); --tui-color-input-border: var(--tui-color-neutral-600); --tui-color-link-text: var(--tui-color-teal-700); --tui-color-link-text-hovered: var(--tui-color-teal-800); --tui-color-link-text-inverse: var(--tui-color-text-inverse); --tui-color-link-text-inverse-hovered: var(--tui-color-text-inverse); --tui-color-link-text-inverse-pressed: var(--tui-color-text-inverse); --tui-color-link-text-inverse-visited: var(--tui-color-text-inverse); --tui-color-link-text-neutral: var(--tui-color-text-neutral); --tui-color-link-text-neutral-hovered: var(--tui-color-text-neutral-hovered); --tui-color-link-text-neutral-pressed: var(--tui-color-text-neutral-pressed); --tui-color-link-text-neutral-visited: var(--tui-color-text-neutral); --tui-color-link-text-pressed: var(--tui-color-teal-800); --tui-color-link-text-visited: var(--tui-color-magenta-700); --tui-color-magenta-100: oklch(95.8% 0.0241 351.2); --tui-color-magenta-200: oklch(91% 0.0541 351.2); --tui-color-magenta-300: oklch(86% 0.0816 351.2); --tui-color-magenta-400: oklch(79.5% 0.1047 351.2); --tui-color-magenta-500: oklch(71.5% 0.13 351.2); --tui-color-magenta-600: oklch(63.5% 0.153 351.2); --tui-color-magenta-700: var(--tui-color-rexall-berry-purple); --tui-color-magenta-800: oklch(45.5% 0.1676 351.2); --tui-color-magenta-900: oklch(36.5% 0.1389 351.2); --tui-color-magenta-1000: oklch(27% 0.1075 351.2); --tui-color-neutral-100: oklch(95.8% 0 0); --tui-color-neutral-200: oklch(91% 0 0); --tui-color-neutral-300: oklch(86% 0 0); --tui-color-neutral-400: oklch(79.5% 0 0); --tui-color-neutral-500: oklch(71.5% 0 0); --tui-color-neutral-600: oklch(63.5% 0 0); --tui-color-neutral-700: oklch(54.5% 0 0); --tui-color-neutral-800: oklch(45.5% 0 0); --tui-color-neutral-900: var(--tui-color-rexall-charcoal-grey); --tui-color-neutral-1000: oklch(27% 0 0); --tui-color-neutral-A100: oklch(10.78% 0 0 / 0.056); --tui-color-neutral-A200: oklch(7.66% 0 0 / 0.118); --tui-color-neutral-A300: oklch(6.76% 0 0 / 0.182); --tui-color-neutral-A400: oklch(6.59% 0 0 / 0.264); --tui-color-neutral-A500: oklch(5.18% 0 0 / 0.362); --tui-color-neutral-A600: oklch(1.98% 0 0 / 0.457); --tui-color-neutral-A700: oklch(0% 0 0 / 0.561); --tui-color-neutral-A800: oklch(3.14% 0 0 / 0.661); --tui-color-neutral-A900: oklch(4.4% 0 0 / 0.797); --tui-color-neutral-A1000: oklch(3.14% 0 0 / 0.85); --tui-color-orange-100: oklch(95.8% 0.023 48.9); --tui-color-orange-200: oklch(91% 0.0514 48.9); --tui-color-orange-300: oklch(86% 0.0834 48.9); --tui-color-orange-400: oklch(79.5% 0.1188 48.9); --tui-color-orange-500: oklch(71.5% 0.1528 48.9); --tui-color-orange-600: var(--tui-color-rexall-terracotta-orange); --tui-color-orange-700: oklch(54.5% 0.1463 48.9); --tui-color-orange-800: oklch(45.5% 0.1222 48.9); --tui-color-orange-900: oklch(36.5% 0.098 48.9); --tui-color-orange-1000: oklch(27% 0.0725 48.9); --tui-color-pink-100: oklch(95.8% 0.0216 5); --tui-color-pink-200: oklch(91% 0.0485 5); --tui-color-pink-300: oklch(86% 0.0792 5); --tui-color-pink-400: oklch(79.5% 0.1241 5); --tui-color-pink-500: oklch(71.5% 0.1644 5); --tui-color-pink-600: var(--tui-color-rexall-tulip-pink); --tui-color-pink-700: oklch(54.5% 0.1544 5); --tui-color-pink-800: oklch(45.5% 0.1324 5); --tui-color-pink-900: oklch(36.5% 0.1098 5); --tui-color-pink-1000: oklch(27% 0.085 5); --tui-color-red-100: oklch(95.8% 0.0206 23.7); --tui-color-red-200: oklch(91% 0.0462 23.7); --tui-color-red-300: oklch(86% 0.0754 23.7); --tui-color-red-400: oklch(79.5% 0.1177 23.7); --tui-color-red-500: oklch(71.5% 0.1783 23.7); --tui-color-red-600: var(--tui-color-rexall-ladybug-red); --tui-color-red-700: oklch(54.5% 0.2142 23.7); --tui-color-red-800: oklch(45.5% 0.1837 23.7); --tui-color-red-900: oklch(36.5% 0.1475 23.7); --tui-color-red-1000: oklch(27% 0.1091 23.7); /* Be Well */ --tui-color-rexall-apricot-orange: oklch(71.4% 0.1525 56.134); /* Skin Health */ --tui-color-rexall-ash: oklch(90% 0.0027 106.45); /* Rexall */ --tui-color-rexall-banana-yellow: oklch(95.33% 0.0757 95.318); /* Berry Purple — magenta anchor */ --tui-color-rexall-berry-purple: oklch(51.17% 0.1852 351.18); /* Rexall */ --tui-color-rexall-blush-pink: oklch(58.59% 0.1586 4.6101); /* Be Well promo */ --tui-color-rexall-blush-red: oklch(86.8% 0.055 21.054); /* Be Well promo */ --tui-color-rexall-burgundy-red: oklch(45.44% 0.1821 28.716); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-calming-blue-haze: oklch(80.84% 0.0387 249.54); /* Charcoal Grey — neutral anchor */ --tui-color-rexall-charcoal-grey: oklch(32.5% 0 0); /* Rexall */ --tui-color-rexall-cloud-grey: oklch(84.52% 0 0); /* Be Well promo */ --tui-color-rexall-cream-yellow: oklch(99.23% 0.0159 98.986); /* Be Well promo */ --tui-color-rexall-daisy-yellow: oklch(92.84% 0.1204 106.48); /* Rexall AODA */ --tui-color-rexall-deep-ocean: oklch(42.34% 0.0723 194.8); /* Be Well promo */ --tui-color-rexall-dusty-red: oklch(50.13% 0.1755 23.713); /* Be Well */ --tui-color-rexall-evergreen: oklch(51.19% 0.0835 138.17); /* Rexall */ --tui-color-rexall-fog-grey: oklch(97.91% 0 0); /* Be Well */ --tui-color-rexall-forest-green: oklch(45.31% 0.073 146.02); /* Be Well */ --tui-color-rexall-garden-green: oklch(54.77% 0.0953 138.22); /* Be Well */ --tui-color-rexall-granite-grey: oklch(53.49% 0.005 17.313); /* Rexall */ --tui-color-rexall-grapefruit: oklch(95.01% 0.0848 98.329); /* Rexall */ --tui-color-rexall-grass-green: oklch(78.93% 0.1268 133.59); /* Be Well */ --tui-color-rexall-grey-blue: oklch(59.99% 0.0929 185.62); /* Be Well promo */ --tui-color-rexall-highlighter-yellow: oklch(92.14% 0.1824 105.41); /* Digestive */ --tui-color-rexall-immunity-orange: oklch(71.08% 0.1395 51.737); /* Ladybug Red — red anchor */ --tui-color-rexall-ladybug-red: oklch(60.41% 0.2338 23.742); /* Rexall AODA */ --tui-color-rexall-lakeside-blue: oklch(52.74% 0.0872 187.63); /* Be Well */ --tui-color-rexall-lavender-purple: oklch(89.47% 0.0375 342.55); /* Rexall */ --tui-color-rexall-lemon-yellow: oklch(88.28% 0.1811 94.46); /* Rexall */ --tui-color-rexall-light-blush-pink: oklch(85.56% 0.0673 10.506); /* Rexall */ --tui-color-rexall-light-drizzle: oklch(91.04% 0.0336 191.96); /* Be Well promo */ --tui-color-rexall-light-red: oklch(94.46% 0.0142 12.025); /* Be Well */ --tui-color-rexall-lime-green: oklch(75.39% 0.152 134.81); /* Be Well promo */ --tui-color-rexall-lipstick-red: oklch(62.76% 0.2141 23.004); /* Be Well */ --tui-color-rexall-melon-orange: oklch(85.06% 0.0788 62.059); /* Rexall */ --tui-color-rexall-mist-blue: oklch(95.8% 0.0169 192.36); /* Be Well */ --tui-color-rexall-moss-green: oklch(64.94% 0.1505 133.89); /* Be Well */ --tui-color-rexall-night-grey: oklch(42.18% 0.0031 48.66); /* Be Well */ --tui-color-rexall-pansy-purple: oklch(79.17% 0.0759 344.13); /* Be Well */ --tui-color-rexall-peachy-orange: oklch(92.38% 0.0385 63.533); /* Be Well promo */ --tui-color-rexall-pinky-red: oklch(96.91% 0.0151 17.418); /* Be Well */ --tui-color-rexall-plum-purple: oklch(59.35% 0.1561 347.67); /* Poolside Blue — teal anchor */ --tui-color-rexall-poolside-blue: oklch(68.76% 0.1147 188.23); /* Rexall */ --tui-color-rexall-rain-blue: oklch(87.81% 0.0553 193.35); /* Be Well promo */ --tui-color-rexall-rosy-red: oklch(69.56% 0.183 23.103); /* Rexall */ --tui-color-rexall-ruby-red: oklch(57.73% 0.2098 23.23); /* Rexall */ --tui-color-rexall-sage-green: oklch(88.81% 0.0662 132.17); /* Be Well */ --tui-color-rexall-seaside-blue: oklch(49.86% 0.0891 182.42); /* Rexall AODA */ --tui-color-rexall-shoreline-blue: oklch(63.95% 0.1102 188.54); /* Be Well */ --tui-color-rexall-silver-grey: oklch(66.37% 0.0049 0.0752); /* Be Well */ --tui-color-rexall-sky-blue: oklch(84.85% 0.0638 193.53); /* Rexall */ --tui-color-rexall-slate-grey: oklch(53.82% 0 0); --tui-color-rexall-steel: oklch(52.12% 0.0301 259.03); --tui-color-rexall-steel-100: oklch(95.8% 0.0077 249.5); --tui-color-rexall-steel-200: oklch(91% 0.0173 249.5); --tui-color-rexall-steel-300: oklch(86% 0.0277 249.5); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-steel-400: var(--tui-color-rexall-calming-blue-haze); --tui-color-rexall-steel-500: oklch(71.5% 0.0348 249.5); --tui-color-rexall-steel-600: oklch(63.5% 0.0315 249.5); --tui-color-rexall-steel-700: oklch(54.5% 0.0276 249.5); --tui-color-rexall-steel-800: oklch(45.5% 0.0237 249.5); --tui-color-rexall-steel-900: oklch(36.5% 0.0196 249.5); --tui-color-rexall-steel-1000: oklch(27% 0.0152 249.5); /* Sunshine Yellow — yellow anchor */ --tui-color-rexall-sunshine-yellow: oklch(86.72% 0.1773 90.85); /* Be Well promo */ --tui-color-rexall-taupe-red: oklch(75.68% 0.0781 13.998); /* Rexall */ --tui-color-rexall-tea-green: oklch(95.59% 0.0563 131.52); /* Be Well */ --tui-color-rexall-teal-blue: oklch(68.53% 0.0897 185.9); /* Terracotta Orange — orange anchor */ --tui-color-rexall-terracotta-orange: oklch(65.65% 0.1764 48.889); /* Tulip Pink — pink anchor */ --tui-color-rexall-tulip-pink: oklch(67.04% 0.1842 5.0399); /* Be Well promo */ --tui-color-rexall-vanilla-yellow: oklch(95.6% 0.072 105.12); /* Be Well */ --tui-color-rexall-venice-blue: oklch(40.54% 0.0851 236.88); /* Be Well */ --tui-color-rexall-washed-blue: oklch(78.7% 0.0619 185.5); /* Well Green — green anchor */ --tui-color-rexall-well-green: oklch(72.73% 0.1698 134.03); /* Digestive */ --tui-color-rexall-well-green-deep: oklch(50.28% 0.1219 142.99); --tui-color-surface-background: var(--tui-color-white); --tui-color-surface-background-brand: var(--tui-color-green-400); /* A page or section tinted with the brand. Plain surface unless a brand sets a tint. */ --tui-color-surface-background-brand-subtle: var(--tui-color-surface-background); --tui-color-surface-background-neutral-subtle: var(--tui-color-neutral-100); --tui-color-tag-background-accent-green: var(--tui-color-green-100); --tui-color-tag-background-accent-magenta: var(--tui-color-magenta-100); --tui-color-tag-background-accent-neutral: var(--tui-color-neutral-100); --tui-color-tag-background-accent-orange: var(--tui-color-orange-100); --tui-color-tag-background-accent-pink: var(--tui-color-pink-100); --tui-color-tag-background-accent-steel: var(--tui-color-rexall-steel-100); --tui-color-tag-background-accent-teal: var(--tui-color-teal-100); --tui-color-tag-background-accent-yellow: var(--tui-color-yellow-100); --tui-color-tag-text-accent-green: var(--tui-color-green-800); --tui-color-tag-text-accent-magenta: var(--tui-color-magenta-800); --tui-color-tag-text-accent-neutral: var(--tui-color-neutral-800); --tui-color-tag-text-accent-orange: var(--tui-color-orange-800); --tui-color-tag-text-accent-pink: var(--tui-color-pink-800); --tui-color-tag-text-accent-steel: var(--tui-color-rexall-steel-800); --tui-color-tag-text-accent-teal: var(--tui-color-teal-800); --tui-color-tag-text-accent-yellow: var(--tui-color-yellow-800); --tui-color-teal-100: oklch(95.8% 0.0229 188.2); --tui-color-teal-200: oklch(91% 0.0422 188.2); --tui-color-teal-300: oklch(86% 0.0602 188.2); --tui-color-teal-400: oklch(79.5% 0.0818 188.2); /* Poolside Blue — teal anchor */ --tui-color-teal-500: var(--tui-color-rexall-poolside-blue); --tui-color-teal-600: oklch(63.5% 0.1071 188.2); --tui-color-teal-700: oklch(54.5% 0.0941 188.2); --tui-color-teal-800: oklch(45.5% 0.079 188.2); --tui-color-teal-900: oklch(36.5% 0.0634 188.2); --tui-color-teal-1000: oklch(27% 0.0469 188.2); --tui-color-text: var(--tui-color-neutral-900); --tui-color-text-brand: var(--tui-color-teal-800); --tui-color-text-brand-hovered: var(--tui-color-teal-900); --tui-color-text-brand-pressed: var(--tui-color-teal-900); --tui-color-text-danger: var(--tui-color-red-700); --tui-color-text-danger-hovered: var(--tui-color-red-800); --tui-color-text-danger-pressed: var(--tui-color-red-800); --tui-color-text-disabled: var(--tui-color-neutral-600); --tui-color-text-information: var(--tui-color-rexall-steel-700); --tui-color-text-inverse: var(--tui-color-white); --tui-color-text-neutral: var(--tui-color-neutral-900); --tui-color-text-neutral-hovered: var(--tui-color-neutral-800); --tui-color-text-neutral-pressed: var(--tui-color-neutral-1000); --tui-color-text-neutral-subtle: var(--tui-color-neutral-800); --tui-color-text-success: var(--tui-color-green-700); --tui-color-text-warning: var(--tui-color-yellow-700); --tui-color-transparent: oklch(0% 0 0 / 0); --tui-color-white: oklch(100% 0 0); --tui-color-yellow-100: oklch(95.8% 0.0354 90.8); --tui-color-yellow-200: oklch(91% 0.1029 90.8); /* Sunshine Yellow — yellow anchor */ --tui-color-yellow-300: var(--tui-color-rexall-sunshine-yellow); --tui-color-yellow-400: oklch(79.5% 0.1624 88.3); --tui-color-yellow-500: oklch(71.5% 0.1463 85.7); --tui-color-yellow-600: oklch(63.5% 0.1305 83.1); --tui-color-yellow-700: oklch(54.5% 0.1126 80.6); --tui-color-yellow-800: oklch(45.5% 0.0948 78); --tui-color-yellow-900: oklch(36.5% 0.0768 75.4); --tui-color-yellow-1000: oklch(27% 0.0575 72.8); --tui-elevation-shadow-overflow: 0px 0px 8px 0px oklch(27% 0 0 / 0.16), 0px 0px 1px 0px oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-perimeter: oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-spread: oklch(27% 0 0 / 0.16); --tui-elevation-shadow-overlay: 0px 8px 12px 0px oklch(27% 0 0 / 0.15), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-shadow-raised: 0px 1px 1px 0px oklch(27% 0 0 / 0.25), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-surface: var(--tui-color-transparent); --tui-elevation-surface-container: var(--tui-color-neutral-A100); --tui-elevation-surface-container-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-container-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay: var(--tui-color-transparent); --tui-elevation-surface-overlay-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-raised: var(--tui-color-transparent); --tui-elevation-surface-raised-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-raised-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-sunken: var(--tui-color-neutral-A100); --tui-font-family-mono: "Source Code Pro", ui-monospace, "Consolas", "Menlo", monospace; --tui-font-family-sans: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --tui-font-leading-050: 16px; --tui-font-leading-075: 20px; --tui-font-leading-100: 24px; --tui-font-leading-200: 28px; --tui-font-leading-300: 28px; --tui-font-leading-400: 32px; --tui-font-leading-500: 40px; --tui-font-leading-600: 48px; --tui-font-leading-700: 56px; --tui-font-leading-800: 68px; --tui-font-leading-900: 96px; --tui-font-leading-1000: 116px; --tui-font-size-050: 12px; --tui-font-size-075: 14px; --tui-font-size-100: 16px; --tui-font-size-200: 20px; --tui-font-size-300: 24px; --tui-font-size-400: 28px; --tui-font-size-500: 32px; --tui-font-size-600: 40px; --tui-font-size-700: 48px; --tui-font-size-800: 56px; --tui-font-size-900: 80px; --tui-font-size-1000: 96px; --tui-font-tracking-default: 0rem; --tui-font-weight-bold: 700; --tui-font-weight-medium: 500; --tui-font-weight-regular: 400; --tui-font-weight-semibold: 600; --tui-layer-0: 0; --tui-layer-10: 10; --tui-layer-20: 20; --tui-layer-30: 30; --tui-layer-40: 40; --tui-layer-50: 50; --tui-layer-60: 60; --tui-layer-base: var(--tui-layer-0); --tui-layer-modal: var(--tui-layer-50); --tui-layer-navigation: var(--tui-layer-10); --tui-layer-notification: var(--tui-layer-60); --tui-layer-overlay: var(--tui-layer-40); --tui-layer-popover: var(--tui-layer-30); --tui-layer-sticky: var(--tui-layer-20); --tui-motion-action-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-action-pressed: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-blanket-enter: var(--tui-motion-duration-long) 0ms var(--tui-motion-easing-inout-bold); --tui-motion-blanket-exit: var(--tui-motion-duration-medium) 0ms var(--tui-motion-easing-in-practical); --tui-motion-control-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-selected: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-toggle: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-curve-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6); --tui-motion-curve-inout-bold: cubic-bezier(0.4, 0, 0, 1); --tui-motion-curve-out-bold: cubic-bezier(0, 0.4, 0, 1); --tui-motion-curve-out-practical: cubic-bezier(0.4, 1, 0.6, 1); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-curve-spring: cubic-bezier(0.363, 1.102, 0.089, 1.043); --tui-motion-duration-0: 0ms; --tui-motion-duration-050: 50ms; --tui-motion-duration-100: 100ms; --tui-motion-duration-150: 150ms; --tui-motion-duration-200: 200ms; --tui-motion-duration-250: 250ms; --tui-motion-duration-400: 400ms; --tui-motion-duration-600: 600ms; --tui-motion-duration-instant: var(--tui-motion-duration-0); --tui-motion-duration-long: var(--tui-motion-duration-250); --tui-motion-duration-medium: var(--tui-motion-duration-200); --tui-motion-duration-short: var(--tui-motion-duration-150); --tui-motion-duration-xlong: var(--tui-motion-duration-400); --tui-motion-duration-xshort: var(--tui-motion-duration-100); --tui-motion-duration-xxlong: var(--tui-motion-duration-600); --tui-motion-duration-xxshort: var(--tui-motion-duration-050); --tui-motion-easing-in-practical: var(--tui-motion-curve-in-practical); --tui-motion-easing-inout-bold: var(--tui-motion-curve-inout-bold); --tui-motion-easing-out-bold: var(--tui-motion-curve-out-bold); --tui-motion-easing-out-practical: var(--tui-motion-curve-out-practical); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-easing-spring: var(--tui-motion-curve-spring); /* Corners of a small action (Button sm). */ --tui-shape-action-round: var(--tui-size-radius-lg); /* Corners of a medium action (Button md). */ --tui-shape-action-rounder: var(--tui-size-radius-xl); /* Corners of a large action (Button lg). The roundest action, not always a pill. */ --tui-shape-action-roundest: var(--tui-size-radius-2xl); /* Corners of a box that holds content, such as a card. Follows the surface corners unless a brand sets its own. */ --tui-shape-container-rounder: var(--tui-shape-surface-rounder); --tui-shape-rounder: var(--tui-size-radius-lg); --tui-shape-surface-rounder: var(--tui-size-radius-2xl); --tui-size-border-hairline: var(--tui-size-border-sm); --tui-size-border-md: 2px; --tui-size-border-narrow: var(--tui-size-border-md); --tui-size-border-sm: 1px; --tui-size-icon-lg: var(--tui-space-300); --tui-size-icon-md: var(--tui-space-250); --tui-size-icon-sm: var(--tui-space-200); --tui-size-icon-xs: var(--tui-space-100); --tui-size-radius-2xl: 16px; --tui-size-radius-3xl: 20px; --tui-size-radius-4xl: 24px; --tui-size-radius-full: 9999px; --tui-size-radius-lg: 8px; --tui-size-radius-md: 6px; --tui-size-radius-none: 0px; --tui-size-radius-sm: 4px; --tui-size-radius-xl: 12px; --tui-size-radius-xs: 2px; --tui-space-0: 0px; --tui-space-025: 2px; --tui-space-050: 4px; --tui-space-075: 6px; --tui-space-100: 8px; --tui-space-125: 10px; --tui-space-150: 12px; --tui-space-200: 16px; --tui-space-250: 20px; --tui-space-300: 24px; --tui-space-400: 32px; --tui-space-500: 40px; --tui-space-600: 48px; --tui-space-700: 56px; --tui-space-800: 64px; --tui-space-900: 72px; --tui-space-1000: 80px; --tui-space-1100: 88px; --tui-space-1200: 96px; --tui-space-1300: 104px; --tui-space-1400: 112px; --tui-space-1500: 120px; --tui-space-inline: var(--tui-space-100); --tui-space-inline-dense: var(--tui-space-050); --tui-space-inline-loose: var(--tui-space-150); --tui-space-inline-looser: var(--tui-space-250); --tui-space-inset: var(--tui-space-200); --tui-space-inset-dense: var(--tui-space-100); --tui-space-inset-loose: var(--tui-space-250); --tui-space-inset-looser: var(--tui-space-400); --tui-space-inset-squish: 12px 24px; --tui-space-inset-squish-dense: 8px 24px; --tui-space-inset-squish-loose: 16px 24px; --tui-space-inset-stretch: 8px 16px; --tui-space-inset-stretch-loosest: 16px 16px; --tui-space-negative-025: -2px; --tui-space-negative-050: -4px; --tui-space-negative-075: -6px; --tui-space-negative-100: -8px; --tui-space-negative-150: -12px; --tui-space-negative-200: -16px; --tui-space-negative-250: -20px; --tui-space-negative-300: -24px; --tui-space-negative-400: -32px; --tui-space-stack: var(--tui-space-200); --tui-space-stack-dense: var(--tui-space-100); --tui-space-stack-denser: var(--tui-space-050); --tui-space-stack-loose: var(--tui-space-300); --tui-space-stack-looser: var(--tui-space-400); --tui-space-stack-loosest: var(--tui-space-600); --tui-typography-action-label-lg: var(--tui-typography-action-label-lg-font-weight) var(--tui-typography-action-label-lg-font-size)/var(--tui-typography-action-label-lg-line-height) var(--tui-typography-action-label-lg-font-family); --tui-typography-action-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-action-label-lg-font-size: var(--tui-font-size-100); --tui-typography-action-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-lg-letter-spacing: 0px; --tui-typography-action-label-lg-line-height: 1.5; --tui-typography-action-label-md: var(--tui-typography-action-label-md-font-weight) var(--tui-typography-action-label-md-font-size)/var(--tui-typography-action-label-md-line-height) var(--tui-typography-action-label-md-font-family); --tui-typography-action-label-md-font-family: var(--tui-font-family-sans); --tui-typography-action-label-md-font-size: var(--tui-font-size-075); --tui-typography-action-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-md-letter-spacing: 0px; --tui-typography-action-label-md-line-height: 1.4286; --tui-typography-action-label-xl: var(--tui-typography-action-label-xl-font-weight) var(--tui-typography-action-label-xl-font-size)/var(--tui-typography-action-label-xl-line-height) var(--tui-typography-action-label-xl-font-family); --tui-typography-action-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-action-label-xl-font-size: var(--tui-font-size-200); --tui-typography-action-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-xl-letter-spacing: 0px; --tui-typography-action-label-xl-line-height: 1.4; --tui-typography-body-lg: var(--tui-typography-body-lg-font-weight) var(--tui-typography-body-lg-font-size)/var(--tui-typography-body-lg-line-height) var(--tui-typography-body-lg-font-family); --tui-typography-body-lg-font-family: var(--tui-font-family-sans); --tui-typography-body-lg-font-size: var(--tui-font-size-200); --tui-typography-body-lg-font-weight: var(--tui-font-weight-regular); --tui-typography-body-lg-letter-spacing: 0px; --tui-typography-body-lg-line-height: 1.4; --tui-typography-body-md: var(--tui-typography-body-md-font-weight) var(--tui-typography-body-md-font-size)/var(--tui-typography-body-md-line-height) var(--tui-typography-body-md-font-family); --tui-typography-body-md-font-family: var(--tui-font-family-sans); --tui-typography-body-md-font-size: var(--tui-font-size-100); --tui-typography-body-md-font-weight: var(--tui-font-weight-regular); --tui-typography-body-md-letter-spacing: 0px; --tui-typography-body-md-line-height: 1.5; --tui-typography-body-sm: var(--tui-typography-body-sm-font-weight) var(--tui-typography-body-sm-font-size)/var(--tui-typography-body-sm-line-height) var(--tui-typography-body-sm-font-family); --tui-typography-body-sm-font-family: var(--tui-font-family-sans); --tui-typography-body-sm-font-size: var(--tui-font-size-075); --tui-typography-body-sm-font-weight: var(--tui-font-weight-regular); --tui-typography-body-sm-letter-spacing: 0px; --tui-typography-body-sm-line-height: 1.4286; --tui-typography-body-xs: var(--tui-typography-body-xs-font-weight) var(--tui-typography-body-xs-font-size)/var(--tui-typography-body-xs-line-height) var(--tui-typography-body-xs-font-family); --tui-typography-body-xs-font-family: var(--tui-font-family-sans); --tui-typography-body-xs-font-size: var(--tui-font-size-050); --tui-typography-body-xs-font-weight: var(--tui-font-weight-regular); --tui-typography-body-xs-letter-spacing: 0px; --tui-typography-body-xs-line-height: 1.3333; --tui-typography-code-md: var(--tui-typography-code-md-font-weight) var(--tui-typography-code-md-font-size)/var(--tui-typography-code-md-line-height) var(--tui-typography-code-md-font-family); --tui-typography-code-md-font-family: var(--tui-font-family-mono); --tui-typography-code-md-font-size: var(--tui-font-size-075); --tui-typography-code-md-font-weight: var(--tui-font-weight-regular); --tui-typography-code-md-letter-spacing: 0px; --tui-typography-code-md-line-height: 1.4286; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md: var(--tui-typography-container-heading-md-font-weight) var(--tui-typography-container-heading-md-font-size)/var(--tui-typography-container-heading-md-line-height) var(--tui-typography-container-heading-md-font-family); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-family: var(--tui-font-family-sans); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-size: var(--tui-font-size-200); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-weight: var(--tui-font-weight-bold); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-letter-spacing: 0px; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-line-height: 1.4; --tui-typography-display-lg: var(--tui-typography-display-lg-font-weight) var(--tui-typography-display-lg-font-size)/var(--tui-typography-display-lg-line-height) var(--tui-typography-display-lg-font-family); --tui-typography-display-lg-font-family: var(--tui-font-family-sans); --tui-typography-display-lg-font-size: var(--tui-font-size-900); --tui-typography-display-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-display-lg-letter-spacing: -0.8px; --tui-typography-display-lg-line-height: 1.2; --tui-typography-display-md: var(--tui-typography-display-md-font-weight) var(--tui-typography-display-md-font-size)/var(--tui-typography-display-md-line-height) var(--tui-typography-display-md-font-family); --tui-typography-display-md-font-family: var(--tui-font-family-sans); --tui-typography-display-md-font-size: var(--tui-font-size-800); --tui-typography-display-md-font-weight: var(--tui-font-weight-bold); --tui-typography-display-md-letter-spacing: -0.56px; --tui-typography-display-md-line-height: 1.2143; --tui-typography-display-xl: var(--tui-typography-display-xl-font-weight) var(--tui-typography-display-xl-font-size)/var(--tui-typography-display-xl-line-height) var(--tui-typography-display-xl-font-family); --tui-typography-display-xl-font-family: var(--tui-font-family-sans); --tui-typography-display-xl-font-size: var(--tui-font-size-1000); --tui-typography-display-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-display-xl-letter-spacing: -0.96px; --tui-typography-display-xl-line-height: 1.2083; --tui-typography-heading-lg: var(--tui-typography-heading-lg-font-weight) var(--tui-typography-heading-lg-font-size)/var(--tui-typography-heading-lg-line-height) var(--tui-typography-heading-lg-font-family); --tui-typography-heading-lg-font-family: var(--tui-font-family-sans); --tui-typography-heading-lg-font-size: var(--tui-font-size-400); --tui-typography-heading-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-lg-letter-spacing: -0.28px; --tui-typography-heading-lg-line-height: 1.1429; --tui-typography-heading-md: var(--tui-typography-heading-md-font-weight) var(--tui-typography-heading-md-font-size)/var(--tui-typography-heading-md-line-height) var(--tui-typography-heading-md-font-family); --tui-typography-heading-md-font-family: var(--tui-font-family-sans); --tui-typography-heading-md-font-size: var(--tui-font-size-300); --tui-typography-heading-md-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-md-letter-spacing: 0px; --tui-typography-heading-md-line-height: 1.1667; --tui-typography-heading-sm: var(--tui-typography-heading-sm-font-weight) var(--tui-typography-heading-sm-font-size)/var(--tui-typography-heading-sm-line-height) var(--tui-typography-heading-sm-font-family); --tui-typography-heading-sm-font-family: var(--tui-font-family-sans); --tui-typography-heading-sm-font-size: var(--tui-font-size-200); --tui-typography-heading-sm-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-sm-letter-spacing: 0px; --tui-typography-heading-sm-line-height: 1.4; --tui-typography-heading-xl: var(--tui-typography-heading-xl-font-weight) var(--tui-typography-heading-xl-font-size)/var(--tui-typography-heading-xl-line-height) var(--tui-typography-heading-xl-font-family); --tui-typography-heading-xl-font-family: var(--tui-font-family-sans); --tui-typography-heading-xl-font-size: var(--tui-font-size-500); --tui-typography-heading-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-xl-letter-spacing: -0.32px; --tui-typography-heading-xl-line-height: 1.25; --tui-typography-label-lg: var(--tui-typography-label-lg-font-weight) var(--tui-typography-label-lg-font-size)/var(--tui-typography-label-lg-line-height) var(--tui-typography-label-lg-font-family); --tui-typography-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-label-lg-font-size: var(--tui-font-size-100); --tui-typography-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-lg-letter-spacing: 0px; --tui-typography-label-lg-line-height: 1.5; --tui-typography-label-md: var(--tui-typography-label-md-font-weight) var(--tui-typography-label-md-font-size)/var(--tui-typography-label-md-line-height) var(--tui-typography-label-md-font-family); --tui-typography-label-md-font-family: var(--tui-font-family-sans); --tui-typography-label-md-font-size: var(--tui-font-size-075); --tui-typography-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-md-letter-spacing: 0px; --tui-typography-label-md-line-height: 1.4286; --tui-typography-label-xl: var(--tui-typography-label-xl-font-weight) var(--tui-typography-label-xl-font-size)/var(--tui-typography-label-xl-line-height) var(--tui-typography-label-xl-font-family); --tui-typography-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-label-xl-font-size: var(--tui-font-size-200); --tui-typography-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-xl-letter-spacing: 0px; --tui-typography-label-xl-line-height: 1.4; } } } @layer tokens { :root[data-color-scheme="dark"][data-sub-theme="beauty"] { --tui-color-background-accent-green: var(--tui-color-green-500); --tui-color-background-accent-green-bold: var(--tui-color-green-700); --tui-color-background-accent-green-subtle: var(--tui-color-green-500); --tui-color-background-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-background-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-background-accent-steel-subtle: var(--tui-color-rexall-steel-500); --tui-color-background-accent-teal: var(--tui-color-teal-500); --tui-color-background-accent-teal-bold: var(--tui-color-teal-700); --tui-color-background-accent-teal-subtle: var(--tui-color-teal-500); --tui-color-background-brand: var(--tui-color-teal-500); --tui-color-background-brand-bold: var(--tui-color-teal-700); --tui-color-background-brand-bold-hovered: var(--tui-color-teal-800); --tui-color-background-brand-bold-pressed: var(--tui-color-teal-900); --tui-color-background-brand-subtle: var(--tui-color-teal-100); --tui-color-background-brand-subtle-hovered: var(--tui-color-teal-200); --tui-color-background-brand-subtle-pressed: var(--tui-color-teal-300); --tui-color-background-danger: var(--tui-color-red-700); --tui-color-background-danger-bold: var(--tui-color-red-700); --tui-color-background-danger-hovered: var(--tui-color-red-800); --tui-color-background-danger-pressed: var(--tui-color-red-900); --tui-color-background-danger-subtle: var(--tui-color-red-100); --tui-color-background-danger-subtle-hovered: var(--tui-color-red-200); --tui-color-background-danger-subtle-pressed: var(--tui-color-red-300); --tui-color-background-disabled: var(--tui-color-neutral-100); --tui-color-background-hovered: var(--tui-color-neutral-100); --tui-color-background-information: var(--tui-color-rexall-steel-500); --tui-color-background-information-bold: var(--tui-color-rexall-steel-700); --tui-color-background-information-subtle: var(--tui-color-rexall-steel-100); --tui-color-background-inverse: var(--tui-color-neutral-900); --tui-color-background-inverse-hovered: var(--tui-color-neutral-1000); --tui-color-background-inverse-pressed: var(--tui-color-neutral-800); --tui-color-background-neutral: var(--tui-color-neutral-400); --tui-color-background-neutral-bold: var(--tui-color-neutral-700); --tui-color-background-neutral-hovered: var(--tui-color-neutral-300); --tui-color-background-neutral-pressed: var(--tui-color-neutral-500); --tui-color-background-neutral-subtle: var(--tui-color-neutral-200); --tui-color-background-neutral-subtle-hovered: var(--tui-color-neutral-100); --tui-color-background-neutral-subtle-pressed: var(--tui-color-neutral-300); --tui-color-background-pressed: var(--tui-color-neutral-200); --tui-color-background-selected: var(--tui-color-teal-100); --tui-color-background-success: var(--tui-color-green-500); --tui-color-background-success-bold: var(--tui-color-green-700); --tui-color-background-success-subtle: var(--tui-color-green-100); --tui-color-background-warning: var(--tui-color-yellow-300); --tui-color-background-warning-bold: var(--tui-color-yellow-300); --tui-color-background-warning-subtle: var(--tui-color-yellow-100); --tui-color-black: oklch(0% 0 0); --tui-color-blanket-background: var(--tui-color-neutral-900); --tui-color-border: var(--tui-color-neutral-300); --tui-color-border-accent-green: var(--tui-color-green-500); --tui-color-border-accent-green-bold: var(--tui-color-green-700); --tui-color-border-accent-green-subtle: var(--tui-color-green-300); --tui-color-border-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-border-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-border-accent-steel-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-accent-teal: var(--tui-color-teal-500); --tui-color-border-accent-teal-bold: var(--tui-color-teal-700); --tui-color-border-accent-teal-subtle: var(--tui-color-teal-300); --tui-color-border-brand: var(--tui-color-teal-700); --tui-color-border-brand-bold: var(--tui-color-teal-700); --tui-color-border-brand-hovered: var(--tui-color-teal-800); --tui-color-border-brand-pressed: var(--tui-color-teal-900); --tui-color-border-brand-subtle: var(--tui-color-teal-300); --tui-color-border-danger: var(--tui-color-red-600); --tui-color-border-danger-bold: var(--tui-color-red-700); --tui-color-border-danger-hovered: var(--tui-color-red-700); --tui-color-border-danger-pressed: var(--tui-color-red-800); --tui-color-border-danger-subtle: var(--tui-color-red-300); --tui-color-border-disabled: var(--tui-color-neutral-200); --tui-color-border-focus: var(--tui-color-neutral-1000); --tui-color-border-information: var(--tui-color-rexall-steel-600); --tui-color-border-information-bold: var(--tui-color-rexall-steel-700); --tui-color-border-information-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-inverse-focus: var(--tui-color-white); --tui-color-border-neutral: var(--tui-color-neutral-300); --tui-color-border-neutral-bold: var(--tui-color-neutral-600); --tui-color-border-neutral-bold-hovered: var(--tui-color-neutral-700); --tui-color-border-neutral-bold-pressed: var(--tui-color-neutral-800); --tui-color-border-neutral-hovered: var(--tui-color-neutral-200); --tui-color-border-neutral-pressed: var(--tui-color-neutral-400); --tui-color-border-neutral-subtle: var(--tui-color-neutral-300); --tui-color-border-neutral-subtlest: var(--tui-color-neutral-200); --tui-color-border-selected: var(--tui-color-teal-700); --tui-color-border-success: var(--tui-color-green-700); --tui-color-border-success-bold: var(--tui-color-green-700); --tui-color-border-success-subtle: var(--tui-color-green-300); --tui-color-border-warning: var(--tui-color-yellow-600); --tui-color-border-warning-bold: var(--tui-color-yellow-700); --tui-color-border-warning-subtle: var(--tui-color-yellow-300); --tui-color-container-background: var(--tui-color-white); --tui-color-container-background-accent-green: var(--tui-color-background-accent-green); --tui-color-container-background-accent-green-bold: var(--tui-color-background-accent-green-bold); --tui-color-container-background-accent-green-subtle: var(--tui-color-background-accent-green-subtle); --tui-color-container-background-accent-steel: var(--tui-color-background-accent-steel); --tui-color-container-background-accent-steel-bold: var(--tui-color-background-accent-steel-bold); --tui-color-container-background-accent-steel-subtle: var(--tui-color-background-accent-steel-subtle); --tui-color-container-background-accent-teal: var(--tui-color-background-accent-teal); --tui-color-container-background-accent-teal-bold: var(--tui-color-background-accent-teal-bold); --tui-color-container-background-accent-teal-subtle: var(--tui-color-background-accent-teal-subtle); --tui-color-container-background-brand: var(--tui-color-background-brand); --tui-color-container-background-brand-bold: var(--tui-color-background-brand-bold); --tui-color-container-background-brand-subtle: var(--tui-color-background-brand-subtle); --tui-color-container-background-danger: var(--tui-color-background-danger); --tui-color-container-background-danger-bold: var(--tui-color-background-danger-bold); --tui-color-container-background-danger-subtle: var(--tui-color-background-danger-subtle); --tui-color-container-background-information: var(--tui-color-background-information); --tui-color-container-background-information-bold: var(--tui-color-background-information-bold); --tui-color-container-background-information-subtle: var(--tui-color-background-information-subtle); --tui-color-container-background-neutral: var(--tui-color-background-neutral); --tui-color-container-background-neutral-bold: var(--tui-color-background-inverse); --tui-color-container-background-neutral-subtle: var(--tui-color-surface-background-neutral-subtle); --tui-color-container-background-success: var(--tui-color-background-success); --tui-color-container-background-success-bold: var(--tui-color-background-success-bold); --tui-color-container-background-success-subtle: var(--tui-color-background-success-subtle); --tui-color-container-background-warning: var(--tui-color-background-warning); --tui-color-container-background-warning-bold: var(--tui-color-background-warning-bold); --tui-color-container-background-warning-subtle: var(--tui-color-background-warning-subtle); --tui-color-container-border: var(--tui-color-neutral-300); --tui-color-container-border-accent-green: var(--tui-color-border-accent-green); --tui-color-container-border-accent-green-bold: var(--tui-color-border-accent-green-bold); --tui-color-container-border-accent-green-subtle: var(--tui-color-border-accent-green-subtle); --tui-color-container-border-accent-steel: var(--tui-color-border-accent-steel); --tui-color-container-border-accent-steel-bold: var(--tui-color-border-accent-steel-bold); --tui-color-container-border-accent-steel-subtle: var(--tui-color-border-accent-steel-subtle); --tui-color-container-border-accent-teal: var(--tui-color-border-accent-teal); --tui-color-container-border-accent-teal-bold: var(--tui-color-border-accent-teal-bold); --tui-color-container-border-accent-teal-subtle: var(--tui-color-border-accent-teal-subtle); --tui-color-container-border-brand: var(--tui-color-border-brand); --tui-color-container-border-brand-bold: var(--tui-color-border-brand-bold); --tui-color-container-border-brand-subtle: var(--tui-color-border-brand-subtle); --tui-color-container-border-danger: var(--tui-color-border-danger); --tui-color-container-border-danger-bold: var(--tui-color-border-danger-bold); --tui-color-container-border-danger-subtle: var(--tui-color-border-danger-subtle); --tui-color-container-border-information: var(--tui-color-border-information); --tui-color-container-border-information-bold: var(--tui-color-border-information-bold); --tui-color-container-border-information-subtle: var(--tui-color-border-information-subtle); --tui-color-container-border-neutral: var(--tui-color-border-neutral); --tui-color-container-border-neutral-bold: var(--tui-color-border-neutral-bold); --tui-color-container-border-neutral-subtle: var(--tui-color-border-neutral-subtle); --tui-color-container-border-success: var(--tui-color-border-success); --tui-color-container-border-success-bold: var(--tui-color-border-success-bold); --tui-color-container-border-success-subtle: var(--tui-color-border-success-subtle); --tui-color-container-border-warning: var(--tui-color-border-warning); --tui-color-container-border-warning-bold: var(--tui-color-border-warning-bold); --tui-color-container-border-warning-subtle: var(--tui-color-border-warning-subtle); /* Text inside a box that holds content, such as a card. */ --tui-color-container-text: var(--tui-color-text); /* Secondary text inside a box that holds content. */ --tui-color-container-text-neutral-subtle: var(--tui-color-text-neutral-subtle); --tui-color-green-100: oklch(95.8% 0.0339 134); --tui-color-green-200: oklch(91% 0.0654 134); --tui-color-green-300: oklch(86% 0.0956 134); --tui-color-green-400: oklch(79.5% 0.1328 134); --tui-color-green-500: var(--tui-color-rexall-well-green); --tui-color-green-600: oklch(63.5% 0.1512 134); --tui-color-green-700: oklch(54.5% 0.1328 134); --tui-color-green-800: oklch(45.5% 0.1139 134); --tui-color-green-900: oklch(36.5% 0.0944 134); --tui-color-green-1000: oklch(27% 0.0731 134); --tui-color-icon: var(--tui-color-neutral-900); --tui-color-icon-brand: var(--tui-color-teal-700); --tui-color-icon-danger: var(--tui-color-red-700); --tui-color-icon-disabled: var(--tui-color-neutral-600); --tui-color-icon-information: var(--tui-color-rexall-steel-700); --tui-color-icon-inverse: var(--tui-color-white); --tui-color-icon-neutral-subtle: var(--tui-color-neutral-700); --tui-color-icon-success: var(--tui-color-green-700); --tui-color-icon-warning: var(--tui-color-yellow-700); --tui-color-input-background: var(--tui-color-white); --tui-color-input-background-disabled: var(--tui-color-neutral-100); --tui-color-input-border: var(--tui-color-neutral-600); --tui-color-link-text: var(--tui-color-teal-700); --tui-color-link-text-hovered: var(--tui-color-teal-800); --tui-color-link-text-inverse: var(--tui-color-text-inverse); --tui-color-link-text-inverse-hovered: var(--tui-color-text-inverse); --tui-color-link-text-inverse-pressed: var(--tui-color-text-inverse); --tui-color-link-text-inverse-visited: var(--tui-color-text-inverse); --tui-color-link-text-neutral: var(--tui-color-text-neutral); --tui-color-link-text-neutral-hovered: var(--tui-color-text-neutral-hovered); --tui-color-link-text-neutral-pressed: var(--tui-color-text-neutral-pressed); --tui-color-link-text-neutral-visited: var(--tui-color-text-neutral); --tui-color-link-text-pressed: var(--tui-color-teal-800); --tui-color-link-text-visited: var(--tui-color-magenta-700); --tui-color-magenta-100: oklch(95.8% 0.0241 351.2); --tui-color-magenta-200: oklch(91% 0.0541 351.2); --tui-color-magenta-300: oklch(86% 0.0816 351.2); --tui-color-magenta-400: oklch(79.5% 0.1047 351.2); --tui-color-magenta-500: oklch(71.5% 0.13 351.2); --tui-color-magenta-600: oklch(63.5% 0.153 351.2); --tui-color-magenta-700: var(--tui-color-rexall-berry-purple); --tui-color-magenta-800: oklch(45.5% 0.1676 351.2); --tui-color-magenta-900: oklch(36.5% 0.1389 351.2); --tui-color-magenta-1000: oklch(27% 0.1075 351.2); --tui-color-neutral-100: oklch(95.8% 0 0); --tui-color-neutral-200: oklch(91% 0 0); --tui-color-neutral-300: oklch(86% 0 0); --tui-color-neutral-400: oklch(79.5% 0 0); --tui-color-neutral-500: oklch(71.5% 0 0); --tui-color-neutral-600: oklch(63.5% 0 0); --tui-color-neutral-700: oklch(54.5% 0 0); --tui-color-neutral-800: oklch(45.5% 0 0); --tui-color-neutral-900: var(--tui-color-rexall-charcoal-grey); --tui-color-neutral-1000: oklch(27% 0 0); --tui-color-neutral-A100: oklch(10.78% 0 0 / 0.056); --tui-color-neutral-A200: oklch(7.66% 0 0 / 0.118); --tui-color-neutral-A300: oklch(6.76% 0 0 / 0.182); --tui-color-neutral-A400: oklch(6.59% 0 0 / 0.264); --tui-color-neutral-A500: oklch(5.18% 0 0 / 0.362); --tui-color-neutral-A600: oklch(1.98% 0 0 / 0.457); --tui-color-neutral-A700: oklch(0% 0 0 / 0.561); --tui-color-neutral-A800: oklch(3.14% 0 0 / 0.661); --tui-color-neutral-A900: oklch(4.4% 0 0 / 0.797); --tui-color-neutral-A1000: oklch(3.14% 0 0 / 0.85); --tui-color-orange-100: oklch(95.8% 0.023 48.9); --tui-color-orange-200: oklch(91% 0.0514 48.9); --tui-color-orange-300: oklch(86% 0.0834 48.9); --tui-color-orange-400: oklch(79.5% 0.1188 48.9); --tui-color-orange-500: oklch(71.5% 0.1528 48.9); --tui-color-orange-600: var(--tui-color-rexall-terracotta-orange); --tui-color-orange-700: oklch(54.5% 0.1463 48.9); --tui-color-orange-800: oklch(45.5% 0.1222 48.9); --tui-color-orange-900: oklch(36.5% 0.098 48.9); --tui-color-orange-1000: oklch(27% 0.0725 48.9); --tui-color-pink-100: oklch(95.8% 0.0216 5); --tui-color-pink-200: oklch(91% 0.0485 5); --tui-color-pink-300: oklch(86% 0.0792 5); --tui-color-pink-400: oklch(79.5% 0.1241 5); --tui-color-pink-500: oklch(71.5% 0.1644 5); --tui-color-pink-600: var(--tui-color-rexall-tulip-pink); --tui-color-pink-700: oklch(54.5% 0.1544 5); --tui-color-pink-800: oklch(45.5% 0.1324 5); --tui-color-pink-900: oklch(36.5% 0.1098 5); --tui-color-pink-1000: oklch(27% 0.085 5); --tui-color-red-100: oklch(95.8% 0.0206 23.7); --tui-color-red-200: oklch(91% 0.0462 23.7); --tui-color-red-300: oklch(86% 0.0754 23.7); --tui-color-red-400: oklch(79.5% 0.1177 23.7); --tui-color-red-500: oklch(71.5% 0.1783 23.7); --tui-color-red-600: var(--tui-color-rexall-ladybug-red); --tui-color-red-700: oklch(54.5% 0.2142 23.7); --tui-color-red-800: oklch(45.5% 0.1837 23.7); --tui-color-red-900: oklch(36.5% 0.1475 23.7); --tui-color-red-1000: oklch(27% 0.1091 23.7); /* Be Well */ --tui-color-rexall-apricot-orange: oklch(71.4% 0.1525 56.134); /* Skin Health */ --tui-color-rexall-ash: oklch(90% 0.0027 106.45); /* Rexall */ --tui-color-rexall-banana-yellow: oklch(95.33% 0.0757 95.318); /* Berry Purple — magenta anchor */ --tui-color-rexall-berry-purple: oklch(51.17% 0.1852 351.18); /* Rexall */ --tui-color-rexall-blush-pink: oklch(58.59% 0.1586 4.6101); /* Be Well promo */ --tui-color-rexall-blush-red: oklch(86.8% 0.055 21.054); /* Be Well promo */ --tui-color-rexall-burgundy-red: oklch(45.44% 0.1821 28.716); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-calming-blue-haze: oklch(80.84% 0.0387 249.54); /* Charcoal Grey — neutral anchor */ --tui-color-rexall-charcoal-grey: oklch(32.5% 0 0); /* Rexall */ --tui-color-rexall-cloud-grey: oklch(84.52% 0 0); /* Be Well promo */ --tui-color-rexall-cream-yellow: oklch(99.23% 0.0159 98.986); /* Be Well promo */ --tui-color-rexall-daisy-yellow: oklch(92.84% 0.1204 106.48); /* Rexall AODA */ --tui-color-rexall-deep-ocean: oklch(42.34% 0.0723 194.8); /* Be Well promo */ --tui-color-rexall-dusty-red: oklch(50.13% 0.1755 23.713); /* Be Well */ --tui-color-rexall-evergreen: oklch(51.19% 0.0835 138.17); /* Rexall */ --tui-color-rexall-fog-grey: oklch(97.91% 0 0); /* Be Well */ --tui-color-rexall-forest-green: oklch(45.31% 0.073 146.02); /* Be Well */ --tui-color-rexall-garden-green: oklch(54.77% 0.0953 138.22); /* Be Well */ --tui-color-rexall-granite-grey: oklch(53.49% 0.005 17.313); /* Rexall */ --tui-color-rexall-grapefruit: oklch(95.01% 0.0848 98.329); /* Rexall */ --tui-color-rexall-grass-green: oklch(78.93% 0.1268 133.59); /* Be Well */ --tui-color-rexall-grey-blue: oklch(59.99% 0.0929 185.62); /* Be Well promo */ --tui-color-rexall-highlighter-yellow: oklch(92.14% 0.1824 105.41); /* Digestive */ --tui-color-rexall-immunity-orange: oklch(71.08% 0.1395 51.737); /* Ladybug Red — red anchor */ --tui-color-rexall-ladybug-red: oklch(60.41% 0.2338 23.742); /* Rexall AODA */ --tui-color-rexall-lakeside-blue: oklch(52.74% 0.0872 187.63); /* Be Well */ --tui-color-rexall-lavender-purple: oklch(89.47% 0.0375 342.55); /* Rexall */ --tui-color-rexall-lemon-yellow: oklch(88.28% 0.1811 94.46); /* Rexall */ --tui-color-rexall-light-blush-pink: oklch(85.56% 0.0673 10.506); /* Rexall */ --tui-color-rexall-light-drizzle: oklch(91.04% 0.0336 191.96); /* Be Well promo */ --tui-color-rexall-light-red: oklch(94.46% 0.0142 12.025); /* Be Well */ --tui-color-rexall-lime-green: oklch(75.39% 0.152 134.81); /* Be Well promo */ --tui-color-rexall-lipstick-red: oklch(62.76% 0.2141 23.004); /* Be Well */ --tui-color-rexall-melon-orange: oklch(85.06% 0.0788 62.059); /* Rexall */ --tui-color-rexall-mist-blue: oklch(95.8% 0.0169 192.36); /* Be Well */ --tui-color-rexall-moss-green: oklch(64.94% 0.1505 133.89); /* Be Well */ --tui-color-rexall-night-grey: oklch(42.18% 0.0031 48.66); /* Be Well */ --tui-color-rexall-pansy-purple: oklch(79.17% 0.0759 344.13); /* Be Well */ --tui-color-rexall-peachy-orange: oklch(92.38% 0.0385 63.533); /* Be Well promo */ --tui-color-rexall-pinky-red: oklch(96.91% 0.0151 17.418); /* Be Well */ --tui-color-rexall-plum-purple: oklch(59.35% 0.1561 347.67); /* Poolside Blue — teal anchor */ --tui-color-rexall-poolside-blue: oklch(68.76% 0.1147 188.23); /* Rexall */ --tui-color-rexall-rain-blue: oklch(87.81% 0.0553 193.35); /* Be Well promo */ --tui-color-rexall-rosy-red: oklch(69.56% 0.183 23.103); /* Rexall */ --tui-color-rexall-ruby-red: oklch(57.73% 0.2098 23.23); /* Rexall */ --tui-color-rexall-sage-green: oklch(88.81% 0.0662 132.17); /* Be Well */ --tui-color-rexall-seaside-blue: oklch(49.86% 0.0891 182.42); /* Rexall AODA */ --tui-color-rexall-shoreline-blue: oklch(63.95% 0.1102 188.54); /* Be Well */ --tui-color-rexall-silver-grey: oklch(66.37% 0.0049 0.0752); /* Be Well */ --tui-color-rexall-sky-blue: oklch(84.85% 0.0638 193.53); /* Rexall */ --tui-color-rexall-slate-grey: oklch(53.82% 0 0); --tui-color-rexall-steel: oklch(52.12% 0.0301 259.03); --tui-color-rexall-steel-100: oklch(95.8% 0.0077 249.5); --tui-color-rexall-steel-200: oklch(91% 0.0173 249.5); --tui-color-rexall-steel-300: oklch(86% 0.0277 249.5); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-steel-400: var(--tui-color-rexall-calming-blue-haze); --tui-color-rexall-steel-500: oklch(71.5% 0.0348 249.5); --tui-color-rexall-steel-600: oklch(63.5% 0.0315 249.5); --tui-color-rexall-steel-700: oklch(54.5% 0.0276 249.5); --tui-color-rexall-steel-800: oklch(45.5% 0.0237 249.5); --tui-color-rexall-steel-900: oklch(36.5% 0.0196 249.5); --tui-color-rexall-steel-1000: oklch(27% 0.0152 249.5); /* Sunshine Yellow — yellow anchor */ --tui-color-rexall-sunshine-yellow: oklch(86.72% 0.1773 90.85); /* Be Well promo */ --tui-color-rexall-taupe-red: oklch(75.68% 0.0781 13.998); /* Rexall */ --tui-color-rexall-tea-green: oklch(95.59% 0.0563 131.52); /* Be Well */ --tui-color-rexall-teal-blue: oklch(68.53% 0.0897 185.9); /* Terracotta Orange — orange anchor */ --tui-color-rexall-terracotta-orange: oklch(65.65% 0.1764 48.889); /* Tulip Pink — pink anchor */ --tui-color-rexall-tulip-pink: oklch(67.04% 0.1842 5.0399); /* Be Well promo */ --tui-color-rexall-vanilla-yellow: oklch(95.6% 0.072 105.12); /* Be Well */ --tui-color-rexall-venice-blue: oklch(40.54% 0.0851 236.88); /* Be Well */ --tui-color-rexall-washed-blue: oklch(78.7% 0.0619 185.5); /* Well Green — green anchor */ --tui-color-rexall-well-green: oklch(72.73% 0.1698 134.03); /* Digestive */ --tui-color-rexall-well-green-deep: oklch(50.28% 0.1219 142.99); --tui-color-surface-background: var(--tui-color-white); --tui-color-surface-background-brand: var(--tui-color-magenta-400); /* A page or section tinted with the brand. Plain surface unless a brand sets a tint. */ --tui-color-surface-background-brand-subtle: var(--tui-color-surface-background); --tui-color-surface-background-neutral-subtle: var(--tui-color-neutral-100); --tui-color-tag-background-accent-green: var(--tui-color-green-100); --tui-color-tag-background-accent-magenta: var(--tui-color-magenta-100); --tui-color-tag-background-accent-neutral: var(--tui-color-neutral-100); --tui-color-tag-background-accent-orange: var(--tui-color-orange-100); --tui-color-tag-background-accent-pink: var(--tui-color-pink-100); --tui-color-tag-background-accent-steel: var(--tui-color-rexall-steel-100); --tui-color-tag-background-accent-teal: var(--tui-color-teal-100); --tui-color-tag-background-accent-yellow: var(--tui-color-yellow-100); --tui-color-tag-text-accent-green: var(--tui-color-green-800); --tui-color-tag-text-accent-magenta: var(--tui-color-magenta-800); --tui-color-tag-text-accent-neutral: var(--tui-color-neutral-800); --tui-color-tag-text-accent-orange: var(--tui-color-orange-800); --tui-color-tag-text-accent-pink: var(--tui-color-pink-800); --tui-color-tag-text-accent-steel: var(--tui-color-rexall-steel-800); --tui-color-tag-text-accent-teal: var(--tui-color-teal-800); --tui-color-tag-text-accent-yellow: var(--tui-color-yellow-800); --tui-color-teal-100: oklch(95.8% 0.0229 188.2); --tui-color-teal-200: oklch(91% 0.0422 188.2); --tui-color-teal-300: oklch(86% 0.0602 188.2); --tui-color-teal-400: oklch(79.5% 0.0818 188.2); /* Poolside Blue — teal anchor */ --tui-color-teal-500: var(--tui-color-rexall-poolside-blue); --tui-color-teal-600: oklch(63.5% 0.1071 188.2); --tui-color-teal-700: oklch(54.5% 0.0941 188.2); --tui-color-teal-800: oklch(45.5% 0.079 188.2); --tui-color-teal-900: oklch(36.5% 0.0634 188.2); --tui-color-teal-1000: oklch(27% 0.0469 188.2); --tui-color-text: var(--tui-color-neutral-900); --tui-color-text-brand: var(--tui-color-teal-800); --tui-color-text-brand-hovered: var(--tui-color-teal-900); --tui-color-text-brand-pressed: var(--tui-color-teal-900); --tui-color-text-danger: var(--tui-color-red-700); --tui-color-text-danger-hovered: var(--tui-color-red-800); --tui-color-text-danger-pressed: var(--tui-color-red-800); --tui-color-text-disabled: var(--tui-color-neutral-600); --tui-color-text-information: var(--tui-color-rexall-steel-700); --tui-color-text-inverse: var(--tui-color-white); --tui-color-text-neutral: var(--tui-color-neutral-900); --tui-color-text-neutral-hovered: var(--tui-color-neutral-800); --tui-color-text-neutral-pressed: var(--tui-color-neutral-1000); --tui-color-text-neutral-subtle: var(--tui-color-neutral-800); --tui-color-text-success: var(--tui-color-green-700); --tui-color-text-warning: var(--tui-color-yellow-700); --tui-color-transparent: oklch(0% 0 0 / 0); --tui-color-white: oklch(100% 0 0); --tui-color-yellow-100: oklch(95.8% 0.0354 90.8); --tui-color-yellow-200: oklch(91% 0.1029 90.8); /* Sunshine Yellow — yellow anchor */ --tui-color-yellow-300: var(--tui-color-rexall-sunshine-yellow); --tui-color-yellow-400: oklch(79.5% 0.1624 88.3); --tui-color-yellow-500: oklch(71.5% 0.1463 85.7); --tui-color-yellow-600: oklch(63.5% 0.1305 83.1); --tui-color-yellow-700: oklch(54.5% 0.1126 80.6); --tui-color-yellow-800: oklch(45.5% 0.0948 78); --tui-color-yellow-900: oklch(36.5% 0.0768 75.4); --tui-color-yellow-1000: oklch(27% 0.0575 72.8); --tui-elevation-shadow-overflow: 0px 0px 8px 0px oklch(27% 0 0 / 0.16), 0px 0px 1px 0px oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-perimeter: oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-spread: oklch(27% 0 0 / 0.16); --tui-elevation-shadow-overlay: 0px 8px 12px 0px oklch(27% 0 0 / 0.15), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-shadow-raised: 0px 1px 1px 0px oklch(27% 0 0 / 0.25), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-surface: var(--tui-color-transparent); --tui-elevation-surface-container: var(--tui-color-neutral-A100); --tui-elevation-surface-container-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-container-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay: var(--tui-color-transparent); --tui-elevation-surface-overlay-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-raised: var(--tui-color-transparent); --tui-elevation-surface-raised-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-raised-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-sunken: var(--tui-color-neutral-A100); --tui-font-family-mono: "Source Code Pro", ui-monospace, "Consolas", "Menlo", monospace; --tui-font-family-sans: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --tui-font-leading-050: 16px; --tui-font-leading-075: 20px; --tui-font-leading-100: 24px; --tui-font-leading-200: 28px; --tui-font-leading-300: 28px; --tui-font-leading-400: 32px; --tui-font-leading-500: 40px; --tui-font-leading-600: 48px; --tui-font-leading-700: 56px; --tui-font-leading-800: 68px; --tui-font-leading-900: 96px; --tui-font-leading-1000: 116px; --tui-font-size-050: 12px; --tui-font-size-075: 14px; --tui-font-size-100: 16px; --tui-font-size-200: 20px; --tui-font-size-300: 24px; --tui-font-size-400: 28px; --tui-font-size-500: 32px; --tui-font-size-600: 40px; --tui-font-size-700: 48px; --tui-font-size-800: 56px; --tui-font-size-900: 80px; --tui-font-size-1000: 96px; --tui-font-tracking-default: 0rem; --tui-font-weight-bold: 700; --tui-font-weight-medium: 500; --tui-font-weight-regular: 400; --tui-font-weight-semibold: 600; --tui-layer-0: 0; --tui-layer-10: 10; --tui-layer-20: 20; --tui-layer-30: 30; --tui-layer-40: 40; --tui-layer-50: 50; --tui-layer-60: 60; --tui-layer-base: var(--tui-layer-0); --tui-layer-modal: var(--tui-layer-50); --tui-layer-navigation: var(--tui-layer-10); --tui-layer-notification: var(--tui-layer-60); --tui-layer-overlay: var(--tui-layer-40); --tui-layer-popover: var(--tui-layer-30); --tui-layer-sticky: var(--tui-layer-20); --tui-motion-action-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-action-pressed: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-blanket-enter: var(--tui-motion-duration-long) 0ms var(--tui-motion-easing-inout-bold); --tui-motion-blanket-exit: var(--tui-motion-duration-medium) 0ms var(--tui-motion-easing-in-practical); --tui-motion-control-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-selected: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-toggle: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-curve-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6); --tui-motion-curve-inout-bold: cubic-bezier(0.4, 0, 0, 1); --tui-motion-curve-out-bold: cubic-bezier(0, 0.4, 0, 1); --tui-motion-curve-out-practical: cubic-bezier(0.4, 1, 0.6, 1); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-curve-spring: cubic-bezier(0.363, 1.102, 0.089, 1.043); --tui-motion-duration-0: 0ms; --tui-motion-duration-050: 50ms; --tui-motion-duration-100: 100ms; --tui-motion-duration-150: 150ms; --tui-motion-duration-200: 200ms; --tui-motion-duration-250: 250ms; --tui-motion-duration-400: 400ms; --tui-motion-duration-600: 600ms; --tui-motion-duration-instant: var(--tui-motion-duration-0); --tui-motion-duration-long: var(--tui-motion-duration-250); --tui-motion-duration-medium: var(--tui-motion-duration-200); --tui-motion-duration-short: var(--tui-motion-duration-150); --tui-motion-duration-xlong: var(--tui-motion-duration-400); --tui-motion-duration-xshort: var(--tui-motion-duration-100); --tui-motion-duration-xxlong: var(--tui-motion-duration-600); --tui-motion-duration-xxshort: var(--tui-motion-duration-050); --tui-motion-easing-in-practical: var(--tui-motion-curve-in-practical); --tui-motion-easing-inout-bold: var(--tui-motion-curve-inout-bold); --tui-motion-easing-out-bold: var(--tui-motion-curve-out-bold); --tui-motion-easing-out-practical: var(--tui-motion-curve-out-practical); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-easing-spring: var(--tui-motion-curve-spring); /* Corners of a small action (Button sm). */ --tui-shape-action-round: var(--tui-size-radius-lg); /* Corners of a medium action (Button md). */ --tui-shape-action-rounder: var(--tui-size-radius-xl); /* Corners of a large action (Button lg). The roundest action, not always a pill. */ --tui-shape-action-roundest: var(--tui-size-radius-2xl); /* Corners of a box that holds content, such as a card. Follows the surface corners unless a brand sets its own. */ --tui-shape-container-rounder: var(--tui-shape-surface-rounder); --tui-shape-rounder: var(--tui-size-radius-lg); --tui-shape-surface-rounder: var(--tui-size-radius-2xl); --tui-size-border-hairline: var(--tui-size-border-sm); --tui-size-border-md: 2px; --tui-size-border-narrow: var(--tui-size-border-md); --tui-size-border-sm: 1px; --tui-size-icon-lg: var(--tui-space-300); --tui-size-icon-md: var(--tui-space-250); --tui-size-icon-sm: var(--tui-space-200); --tui-size-icon-xs: var(--tui-space-100); --tui-size-radius-2xl: 16px; --tui-size-radius-3xl: 20px; --tui-size-radius-4xl: 24px; --tui-size-radius-full: 9999px; --tui-size-radius-lg: 8px; --tui-size-radius-md: 6px; --tui-size-radius-none: 0px; --tui-size-radius-sm: 4px; --tui-size-radius-xl: 12px; --tui-size-radius-xs: 2px; --tui-space-0: 0px; --tui-space-025: 2px; --tui-space-050: 4px; --tui-space-075: 6px; --tui-space-100: 8px; --tui-space-125: 10px; --tui-space-150: 12px; --tui-space-200: 16px; --tui-space-250: 20px; --tui-space-300: 24px; --tui-space-400: 32px; --tui-space-500: 40px; --tui-space-600: 48px; --tui-space-700: 56px; --tui-space-800: 64px; --tui-space-900: 72px; --tui-space-1000: 80px; --tui-space-1100: 88px; --tui-space-1200: 96px; --tui-space-1300: 104px; --tui-space-1400: 112px; --tui-space-1500: 120px; --tui-space-inline: var(--tui-space-100); --tui-space-inline-dense: var(--tui-space-050); --tui-space-inline-loose: var(--tui-space-150); --tui-space-inline-looser: var(--tui-space-250); --tui-space-inset: var(--tui-space-200); --tui-space-inset-dense: var(--tui-space-100); --tui-space-inset-loose: var(--tui-space-250); --tui-space-inset-looser: var(--tui-space-400); --tui-space-inset-squish: 12px 24px; --tui-space-inset-squish-dense: 8px 24px; --tui-space-inset-squish-loose: 16px 24px; --tui-space-inset-stretch: 8px 16px; --tui-space-inset-stretch-loosest: 16px 16px; --tui-space-negative-025: -2px; --tui-space-negative-050: -4px; --tui-space-negative-075: -6px; --tui-space-negative-100: -8px; --tui-space-negative-150: -12px; --tui-space-negative-200: -16px; --tui-space-negative-250: -20px; --tui-space-negative-300: -24px; --tui-space-negative-400: -32px; --tui-space-stack: var(--tui-space-200); --tui-space-stack-dense: var(--tui-space-100); --tui-space-stack-denser: var(--tui-space-050); --tui-space-stack-loose: var(--tui-space-300); --tui-space-stack-looser: var(--tui-space-400); --tui-space-stack-loosest: var(--tui-space-600); --tui-typography-action-label-lg: var(--tui-typography-action-label-lg-font-weight) var(--tui-typography-action-label-lg-font-size)/var(--tui-typography-action-label-lg-line-height) var(--tui-typography-action-label-lg-font-family); --tui-typography-action-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-action-label-lg-font-size: var(--tui-font-size-100); --tui-typography-action-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-lg-letter-spacing: 0px; --tui-typography-action-label-lg-line-height: 1.5; --tui-typography-action-label-md: var(--tui-typography-action-label-md-font-weight) var(--tui-typography-action-label-md-font-size)/var(--tui-typography-action-label-md-line-height) var(--tui-typography-action-label-md-font-family); --tui-typography-action-label-md-font-family: var(--tui-font-family-sans); --tui-typography-action-label-md-font-size: var(--tui-font-size-075); --tui-typography-action-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-md-letter-spacing: 0px; --tui-typography-action-label-md-line-height: 1.4286; --tui-typography-action-label-xl: var(--tui-typography-action-label-xl-font-weight) var(--tui-typography-action-label-xl-font-size)/var(--tui-typography-action-label-xl-line-height) var(--tui-typography-action-label-xl-font-family); --tui-typography-action-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-action-label-xl-font-size: var(--tui-font-size-200); --tui-typography-action-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-xl-letter-spacing: 0px; --tui-typography-action-label-xl-line-height: 1.4; --tui-typography-body-lg: var(--tui-typography-body-lg-font-weight) var(--tui-typography-body-lg-font-size)/var(--tui-typography-body-lg-line-height) var(--tui-typography-body-lg-font-family); --tui-typography-body-lg-font-family: var(--tui-font-family-sans); --tui-typography-body-lg-font-size: var(--tui-font-size-200); --tui-typography-body-lg-font-weight: var(--tui-font-weight-regular); --tui-typography-body-lg-letter-spacing: 0px; --tui-typography-body-lg-line-height: 1.4; --tui-typography-body-md: var(--tui-typography-body-md-font-weight) var(--tui-typography-body-md-font-size)/var(--tui-typography-body-md-line-height) var(--tui-typography-body-md-font-family); --tui-typography-body-md-font-family: var(--tui-font-family-sans); --tui-typography-body-md-font-size: var(--tui-font-size-100); --tui-typography-body-md-font-weight: var(--tui-font-weight-regular); --tui-typography-body-md-letter-spacing: 0px; --tui-typography-body-md-line-height: 1.5; --tui-typography-body-sm: var(--tui-typography-body-sm-font-weight) var(--tui-typography-body-sm-font-size)/var(--tui-typography-body-sm-line-height) var(--tui-typography-body-sm-font-family); --tui-typography-body-sm-font-family: var(--tui-font-family-sans); --tui-typography-body-sm-font-size: var(--tui-font-size-075); --tui-typography-body-sm-font-weight: var(--tui-font-weight-regular); --tui-typography-body-sm-letter-spacing: 0px; --tui-typography-body-sm-line-height: 1.4286; --tui-typography-body-xs: var(--tui-typography-body-xs-font-weight) var(--tui-typography-body-xs-font-size)/var(--tui-typography-body-xs-line-height) var(--tui-typography-body-xs-font-family); --tui-typography-body-xs-font-family: var(--tui-font-family-sans); --tui-typography-body-xs-font-size: var(--tui-font-size-050); --tui-typography-body-xs-font-weight: var(--tui-font-weight-regular); --tui-typography-body-xs-letter-spacing: 0px; --tui-typography-body-xs-line-height: 1.3333; --tui-typography-code-md: var(--tui-typography-code-md-font-weight) var(--tui-typography-code-md-font-size)/var(--tui-typography-code-md-line-height) var(--tui-typography-code-md-font-family); --tui-typography-code-md-font-family: var(--tui-font-family-mono); --tui-typography-code-md-font-size: var(--tui-font-size-075); --tui-typography-code-md-font-weight: var(--tui-font-weight-regular); --tui-typography-code-md-letter-spacing: 0px; --tui-typography-code-md-line-height: 1.4286; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md: var(--tui-typography-container-heading-md-font-weight) var(--tui-typography-container-heading-md-font-size)/var(--tui-typography-container-heading-md-line-height) var(--tui-typography-container-heading-md-font-family); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-family: var(--tui-font-family-sans); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-size: var(--tui-font-size-200); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-weight: var(--tui-font-weight-bold); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-letter-spacing: 0px; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-line-height: 1.4; --tui-typography-display-lg: var(--tui-typography-display-lg-font-weight) var(--tui-typography-display-lg-font-size)/var(--tui-typography-display-lg-line-height) var(--tui-typography-display-lg-font-family); --tui-typography-display-lg-font-family: var(--tui-font-family-sans); --tui-typography-display-lg-font-size: var(--tui-font-size-900); --tui-typography-display-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-display-lg-letter-spacing: -0.8px; --tui-typography-display-lg-line-height: 1.2; --tui-typography-display-md: var(--tui-typography-display-md-font-weight) var(--tui-typography-display-md-font-size)/var(--tui-typography-display-md-line-height) var(--tui-typography-display-md-font-family); --tui-typography-display-md-font-family: var(--tui-font-family-sans); --tui-typography-display-md-font-size: var(--tui-font-size-800); --tui-typography-display-md-font-weight: var(--tui-font-weight-bold); --tui-typography-display-md-letter-spacing: -0.56px; --tui-typography-display-md-line-height: 1.2143; --tui-typography-display-xl: var(--tui-typography-display-xl-font-weight) var(--tui-typography-display-xl-font-size)/var(--tui-typography-display-xl-line-height) var(--tui-typography-display-xl-font-family); --tui-typography-display-xl-font-family: var(--tui-font-family-sans); --tui-typography-display-xl-font-size: var(--tui-font-size-1000); --tui-typography-display-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-display-xl-letter-spacing: -0.96px; --tui-typography-display-xl-line-height: 1.2083; --tui-typography-heading-lg: var(--tui-typography-heading-lg-font-weight) var(--tui-typography-heading-lg-font-size)/var(--tui-typography-heading-lg-line-height) var(--tui-typography-heading-lg-font-family); --tui-typography-heading-lg-font-family: var(--tui-font-family-sans); --tui-typography-heading-lg-font-size: var(--tui-font-size-400); --tui-typography-heading-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-lg-letter-spacing: -0.28px; --tui-typography-heading-lg-line-height: 1.1429; --tui-typography-heading-md: var(--tui-typography-heading-md-font-weight) var(--tui-typography-heading-md-font-size)/var(--tui-typography-heading-md-line-height) var(--tui-typography-heading-md-font-family); --tui-typography-heading-md-font-family: var(--tui-font-family-sans); --tui-typography-heading-md-font-size: var(--tui-font-size-300); --tui-typography-heading-md-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-md-letter-spacing: 0px; --tui-typography-heading-md-line-height: 1.1667; --tui-typography-heading-sm: var(--tui-typography-heading-sm-font-weight) var(--tui-typography-heading-sm-font-size)/var(--tui-typography-heading-sm-line-height) var(--tui-typography-heading-sm-font-family); --tui-typography-heading-sm-font-family: var(--tui-font-family-sans); --tui-typography-heading-sm-font-size: var(--tui-font-size-200); --tui-typography-heading-sm-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-sm-letter-spacing: 0px; --tui-typography-heading-sm-line-height: 1.4; --tui-typography-heading-xl: var(--tui-typography-heading-xl-font-weight) var(--tui-typography-heading-xl-font-size)/var(--tui-typography-heading-xl-line-height) var(--tui-typography-heading-xl-font-family); --tui-typography-heading-xl-font-family: var(--tui-font-family-sans); --tui-typography-heading-xl-font-size: var(--tui-font-size-500); --tui-typography-heading-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-xl-letter-spacing: -0.32px; --tui-typography-heading-xl-line-height: 1.25; --tui-typography-label-lg: var(--tui-typography-label-lg-font-weight) var(--tui-typography-label-lg-font-size)/var(--tui-typography-label-lg-line-height) var(--tui-typography-label-lg-font-family); --tui-typography-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-label-lg-font-size: var(--tui-font-size-100); --tui-typography-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-lg-letter-spacing: 0px; --tui-typography-label-lg-line-height: 1.5; --tui-typography-label-md: var(--tui-typography-label-md-font-weight) var(--tui-typography-label-md-font-size)/var(--tui-typography-label-md-line-height) var(--tui-typography-label-md-font-family); --tui-typography-label-md-font-family: var(--tui-font-family-sans); --tui-typography-label-md-font-size: var(--tui-font-size-075); --tui-typography-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-md-letter-spacing: 0px; --tui-typography-label-md-line-height: 1.4286; --tui-typography-label-xl: var(--tui-typography-label-xl-font-weight) var(--tui-typography-label-xl-font-size)/var(--tui-typography-label-xl-line-height) var(--tui-typography-label-xl-font-family); --tui-typography-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-label-xl-font-size: var(--tui-font-size-200); --tui-typography-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-xl-letter-spacing: 0px; --tui-typography-label-xl-line-height: 1.4; } } @layer tokens { @media (prefers-color-scheme: dark) { :root:not([data-color-scheme="light"])[data-sub-theme="beauty"] { --tui-color-background-accent-green: var(--tui-color-green-500); --tui-color-background-accent-green-bold: var(--tui-color-green-700); --tui-color-background-accent-green-subtle: var(--tui-color-green-500); --tui-color-background-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-background-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-background-accent-steel-subtle: var(--tui-color-rexall-steel-500); --tui-color-background-accent-teal: var(--tui-color-teal-500); --tui-color-background-accent-teal-bold: var(--tui-color-teal-700); --tui-color-background-accent-teal-subtle: var(--tui-color-teal-500); --tui-color-background-brand: var(--tui-color-teal-500); --tui-color-background-brand-bold: var(--tui-color-teal-700); --tui-color-background-brand-bold-hovered: var(--tui-color-teal-800); --tui-color-background-brand-bold-pressed: var(--tui-color-teal-900); --tui-color-background-brand-subtle: var(--tui-color-teal-100); --tui-color-background-brand-subtle-hovered: var(--tui-color-teal-200); --tui-color-background-brand-subtle-pressed: var(--tui-color-teal-300); --tui-color-background-danger: var(--tui-color-red-700); --tui-color-background-danger-bold: var(--tui-color-red-700); --tui-color-background-danger-hovered: var(--tui-color-red-800); --tui-color-background-danger-pressed: var(--tui-color-red-900); --tui-color-background-danger-subtle: var(--tui-color-red-100); --tui-color-background-danger-subtle-hovered: var(--tui-color-red-200); --tui-color-background-danger-subtle-pressed: var(--tui-color-red-300); --tui-color-background-disabled: var(--tui-color-neutral-100); --tui-color-background-hovered: var(--tui-color-neutral-100); --tui-color-background-information: var(--tui-color-rexall-steel-500); --tui-color-background-information-bold: var(--tui-color-rexall-steel-700); --tui-color-background-information-subtle: var(--tui-color-rexall-steel-100); --tui-color-background-inverse: var(--tui-color-neutral-900); --tui-color-background-inverse-hovered: var(--tui-color-neutral-1000); --tui-color-background-inverse-pressed: var(--tui-color-neutral-800); --tui-color-background-neutral: var(--tui-color-neutral-400); --tui-color-background-neutral-bold: var(--tui-color-neutral-700); --tui-color-background-neutral-hovered: var(--tui-color-neutral-300); --tui-color-background-neutral-pressed: var(--tui-color-neutral-500); --tui-color-background-neutral-subtle: var(--tui-color-neutral-200); --tui-color-background-neutral-subtle-hovered: var(--tui-color-neutral-100); --tui-color-background-neutral-subtle-pressed: var(--tui-color-neutral-300); --tui-color-background-pressed: var(--tui-color-neutral-200); --tui-color-background-selected: var(--tui-color-teal-100); --tui-color-background-success: var(--tui-color-green-500); --tui-color-background-success-bold: var(--tui-color-green-700); --tui-color-background-success-subtle: var(--tui-color-green-100); --tui-color-background-warning: var(--tui-color-yellow-300); --tui-color-background-warning-bold: var(--tui-color-yellow-300); --tui-color-background-warning-subtle: var(--tui-color-yellow-100); --tui-color-black: oklch(0% 0 0); --tui-color-blanket-background: var(--tui-color-neutral-900); --tui-color-border: var(--tui-color-neutral-300); --tui-color-border-accent-green: var(--tui-color-green-500); --tui-color-border-accent-green-bold: var(--tui-color-green-700); --tui-color-border-accent-green-subtle: var(--tui-color-green-300); --tui-color-border-accent-steel: var(--tui-color-rexall-steel-500); --tui-color-border-accent-steel-bold: var(--tui-color-rexall-steel-700); --tui-color-border-accent-steel-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-accent-teal: var(--tui-color-teal-500); --tui-color-border-accent-teal-bold: var(--tui-color-teal-700); --tui-color-border-accent-teal-subtle: var(--tui-color-teal-300); --tui-color-border-brand: var(--tui-color-teal-700); --tui-color-border-brand-bold: var(--tui-color-teal-700); --tui-color-border-brand-hovered: var(--tui-color-teal-800); --tui-color-border-brand-pressed: var(--tui-color-teal-900); --tui-color-border-brand-subtle: var(--tui-color-teal-300); --tui-color-border-danger: var(--tui-color-red-600); --tui-color-border-danger-bold: var(--tui-color-red-700); --tui-color-border-danger-hovered: var(--tui-color-red-700); --tui-color-border-danger-pressed: var(--tui-color-red-800); --tui-color-border-danger-subtle: var(--tui-color-red-300); --tui-color-border-disabled: var(--tui-color-neutral-200); --tui-color-border-focus: var(--tui-color-neutral-1000); --tui-color-border-information: var(--tui-color-rexall-steel-600); --tui-color-border-information-bold: var(--tui-color-rexall-steel-700); --tui-color-border-information-subtle: var(--tui-color-rexall-steel-300); --tui-color-border-inverse-focus: var(--tui-color-white); --tui-color-border-neutral: var(--tui-color-neutral-300); --tui-color-border-neutral-bold: var(--tui-color-neutral-600); --tui-color-border-neutral-bold-hovered: var(--tui-color-neutral-700); --tui-color-border-neutral-bold-pressed: var(--tui-color-neutral-800); --tui-color-border-neutral-hovered: var(--tui-color-neutral-200); --tui-color-border-neutral-pressed: var(--tui-color-neutral-400); --tui-color-border-neutral-subtle: var(--tui-color-neutral-300); --tui-color-border-neutral-subtlest: var(--tui-color-neutral-200); --tui-color-border-selected: var(--tui-color-teal-700); --tui-color-border-success: var(--tui-color-green-700); --tui-color-border-success-bold: var(--tui-color-green-700); --tui-color-border-success-subtle: var(--tui-color-green-300); --tui-color-border-warning: var(--tui-color-yellow-600); --tui-color-border-warning-bold: var(--tui-color-yellow-700); --tui-color-border-warning-subtle: var(--tui-color-yellow-300); --tui-color-container-background: var(--tui-color-white); --tui-color-container-background-accent-green: var(--tui-color-background-accent-green); --tui-color-container-background-accent-green-bold: var(--tui-color-background-accent-green-bold); --tui-color-container-background-accent-green-subtle: var(--tui-color-background-accent-green-subtle); --tui-color-container-background-accent-steel: var(--tui-color-background-accent-steel); --tui-color-container-background-accent-steel-bold: var(--tui-color-background-accent-steel-bold); --tui-color-container-background-accent-steel-subtle: var(--tui-color-background-accent-steel-subtle); --tui-color-container-background-accent-teal: var(--tui-color-background-accent-teal); --tui-color-container-background-accent-teal-bold: var(--tui-color-background-accent-teal-bold); --tui-color-container-background-accent-teal-subtle: var(--tui-color-background-accent-teal-subtle); --tui-color-container-background-brand: var(--tui-color-background-brand); --tui-color-container-background-brand-bold: var(--tui-color-background-brand-bold); --tui-color-container-background-brand-subtle: var(--tui-color-background-brand-subtle); --tui-color-container-background-danger: var(--tui-color-background-danger); --tui-color-container-background-danger-bold: var(--tui-color-background-danger-bold); --tui-color-container-background-danger-subtle: var(--tui-color-background-danger-subtle); --tui-color-container-background-information: var(--tui-color-background-information); --tui-color-container-background-information-bold: var(--tui-color-background-information-bold); --tui-color-container-background-information-subtle: var(--tui-color-background-information-subtle); --tui-color-container-background-neutral: var(--tui-color-background-neutral); --tui-color-container-background-neutral-bold: var(--tui-color-background-inverse); --tui-color-container-background-neutral-subtle: var(--tui-color-surface-background-neutral-subtle); --tui-color-container-background-success: var(--tui-color-background-success); --tui-color-container-background-success-bold: var(--tui-color-background-success-bold); --tui-color-container-background-success-subtle: var(--tui-color-background-success-subtle); --tui-color-container-background-warning: var(--tui-color-background-warning); --tui-color-container-background-warning-bold: var(--tui-color-background-warning-bold); --tui-color-container-background-warning-subtle: var(--tui-color-background-warning-subtle); --tui-color-container-border: var(--tui-color-neutral-300); --tui-color-container-border-accent-green: var(--tui-color-border-accent-green); --tui-color-container-border-accent-green-bold: var(--tui-color-border-accent-green-bold); --tui-color-container-border-accent-green-subtle: var(--tui-color-border-accent-green-subtle); --tui-color-container-border-accent-steel: var(--tui-color-border-accent-steel); --tui-color-container-border-accent-steel-bold: var(--tui-color-border-accent-steel-bold); --tui-color-container-border-accent-steel-subtle: var(--tui-color-border-accent-steel-subtle); --tui-color-container-border-accent-teal: var(--tui-color-border-accent-teal); --tui-color-container-border-accent-teal-bold: var(--tui-color-border-accent-teal-bold); --tui-color-container-border-accent-teal-subtle: var(--tui-color-border-accent-teal-subtle); --tui-color-container-border-brand: var(--tui-color-border-brand); --tui-color-container-border-brand-bold: var(--tui-color-border-brand-bold); --tui-color-container-border-brand-subtle: var(--tui-color-border-brand-subtle); --tui-color-container-border-danger: var(--tui-color-border-danger); --tui-color-container-border-danger-bold: var(--tui-color-border-danger-bold); --tui-color-container-border-danger-subtle: var(--tui-color-border-danger-subtle); --tui-color-container-border-information: var(--tui-color-border-information); --tui-color-container-border-information-bold: var(--tui-color-border-information-bold); --tui-color-container-border-information-subtle: var(--tui-color-border-information-subtle); --tui-color-container-border-neutral: var(--tui-color-border-neutral); --tui-color-container-border-neutral-bold: var(--tui-color-border-neutral-bold); --tui-color-container-border-neutral-subtle: var(--tui-color-border-neutral-subtle); --tui-color-container-border-success: var(--tui-color-border-success); --tui-color-container-border-success-bold: var(--tui-color-border-success-bold); --tui-color-container-border-success-subtle: var(--tui-color-border-success-subtle); --tui-color-container-border-warning: var(--tui-color-border-warning); --tui-color-container-border-warning-bold: var(--tui-color-border-warning-bold); --tui-color-container-border-warning-subtle: var(--tui-color-border-warning-subtle); /* Text inside a box that holds content, such as a card. */ --tui-color-container-text: var(--tui-color-text); /* Secondary text inside a box that holds content. */ --tui-color-container-text-neutral-subtle: var(--tui-color-text-neutral-subtle); --tui-color-green-100: oklch(95.8% 0.0339 134); --tui-color-green-200: oklch(91% 0.0654 134); --tui-color-green-300: oklch(86% 0.0956 134); --tui-color-green-400: oklch(79.5% 0.1328 134); --tui-color-green-500: var(--tui-color-rexall-well-green); --tui-color-green-600: oklch(63.5% 0.1512 134); --tui-color-green-700: oklch(54.5% 0.1328 134); --tui-color-green-800: oklch(45.5% 0.1139 134); --tui-color-green-900: oklch(36.5% 0.0944 134); --tui-color-green-1000: oklch(27% 0.0731 134); --tui-color-icon: var(--tui-color-neutral-900); --tui-color-icon-brand: var(--tui-color-teal-700); --tui-color-icon-danger: var(--tui-color-red-700); --tui-color-icon-disabled: var(--tui-color-neutral-600); --tui-color-icon-information: var(--tui-color-rexall-steel-700); --tui-color-icon-inverse: var(--tui-color-white); --tui-color-icon-neutral-subtle: var(--tui-color-neutral-700); --tui-color-icon-success: var(--tui-color-green-700); --tui-color-icon-warning: var(--tui-color-yellow-700); --tui-color-input-background: var(--tui-color-white); --tui-color-input-background-disabled: var(--tui-color-neutral-100); --tui-color-input-border: var(--tui-color-neutral-600); --tui-color-link-text: var(--tui-color-teal-700); --tui-color-link-text-hovered: var(--tui-color-teal-800); --tui-color-link-text-inverse: var(--tui-color-text-inverse); --tui-color-link-text-inverse-hovered: var(--tui-color-text-inverse); --tui-color-link-text-inverse-pressed: var(--tui-color-text-inverse); --tui-color-link-text-inverse-visited: var(--tui-color-text-inverse); --tui-color-link-text-neutral: var(--tui-color-text-neutral); --tui-color-link-text-neutral-hovered: var(--tui-color-text-neutral-hovered); --tui-color-link-text-neutral-pressed: var(--tui-color-text-neutral-pressed); --tui-color-link-text-neutral-visited: var(--tui-color-text-neutral); --tui-color-link-text-pressed: var(--tui-color-teal-800); --tui-color-link-text-visited: var(--tui-color-magenta-700); --tui-color-magenta-100: oklch(95.8% 0.0241 351.2); --tui-color-magenta-200: oklch(91% 0.0541 351.2); --tui-color-magenta-300: oklch(86% 0.0816 351.2); --tui-color-magenta-400: oklch(79.5% 0.1047 351.2); --tui-color-magenta-500: oklch(71.5% 0.13 351.2); --tui-color-magenta-600: oklch(63.5% 0.153 351.2); --tui-color-magenta-700: var(--tui-color-rexall-berry-purple); --tui-color-magenta-800: oklch(45.5% 0.1676 351.2); --tui-color-magenta-900: oklch(36.5% 0.1389 351.2); --tui-color-magenta-1000: oklch(27% 0.1075 351.2); --tui-color-neutral-100: oklch(95.8% 0 0); --tui-color-neutral-200: oklch(91% 0 0); --tui-color-neutral-300: oklch(86% 0 0); --tui-color-neutral-400: oklch(79.5% 0 0); --tui-color-neutral-500: oklch(71.5% 0 0); --tui-color-neutral-600: oklch(63.5% 0 0); --tui-color-neutral-700: oklch(54.5% 0 0); --tui-color-neutral-800: oklch(45.5% 0 0); --tui-color-neutral-900: var(--tui-color-rexall-charcoal-grey); --tui-color-neutral-1000: oklch(27% 0 0); --tui-color-neutral-A100: oklch(10.78% 0 0 / 0.056); --tui-color-neutral-A200: oklch(7.66% 0 0 / 0.118); --tui-color-neutral-A300: oklch(6.76% 0 0 / 0.182); --tui-color-neutral-A400: oklch(6.59% 0 0 / 0.264); --tui-color-neutral-A500: oklch(5.18% 0 0 / 0.362); --tui-color-neutral-A600: oklch(1.98% 0 0 / 0.457); --tui-color-neutral-A700: oklch(0% 0 0 / 0.561); --tui-color-neutral-A800: oklch(3.14% 0 0 / 0.661); --tui-color-neutral-A900: oklch(4.4% 0 0 / 0.797); --tui-color-neutral-A1000: oklch(3.14% 0 0 / 0.85); --tui-color-orange-100: oklch(95.8% 0.023 48.9); --tui-color-orange-200: oklch(91% 0.0514 48.9); --tui-color-orange-300: oklch(86% 0.0834 48.9); --tui-color-orange-400: oklch(79.5% 0.1188 48.9); --tui-color-orange-500: oklch(71.5% 0.1528 48.9); --tui-color-orange-600: var(--tui-color-rexall-terracotta-orange); --tui-color-orange-700: oklch(54.5% 0.1463 48.9); --tui-color-orange-800: oklch(45.5% 0.1222 48.9); --tui-color-orange-900: oklch(36.5% 0.098 48.9); --tui-color-orange-1000: oklch(27% 0.0725 48.9); --tui-color-pink-100: oklch(95.8% 0.0216 5); --tui-color-pink-200: oklch(91% 0.0485 5); --tui-color-pink-300: oklch(86% 0.0792 5); --tui-color-pink-400: oklch(79.5% 0.1241 5); --tui-color-pink-500: oklch(71.5% 0.1644 5); --tui-color-pink-600: var(--tui-color-rexall-tulip-pink); --tui-color-pink-700: oklch(54.5% 0.1544 5); --tui-color-pink-800: oklch(45.5% 0.1324 5); --tui-color-pink-900: oklch(36.5% 0.1098 5); --tui-color-pink-1000: oklch(27% 0.085 5); --tui-color-red-100: oklch(95.8% 0.0206 23.7); --tui-color-red-200: oklch(91% 0.0462 23.7); --tui-color-red-300: oklch(86% 0.0754 23.7); --tui-color-red-400: oklch(79.5% 0.1177 23.7); --tui-color-red-500: oklch(71.5% 0.1783 23.7); --tui-color-red-600: var(--tui-color-rexall-ladybug-red); --tui-color-red-700: oklch(54.5% 0.2142 23.7); --tui-color-red-800: oklch(45.5% 0.1837 23.7); --tui-color-red-900: oklch(36.5% 0.1475 23.7); --tui-color-red-1000: oklch(27% 0.1091 23.7); /* Be Well */ --tui-color-rexall-apricot-orange: oklch(71.4% 0.1525 56.134); /* Skin Health */ --tui-color-rexall-ash: oklch(90% 0.0027 106.45); /* Rexall */ --tui-color-rexall-banana-yellow: oklch(95.33% 0.0757 95.318); /* Berry Purple — magenta anchor */ --tui-color-rexall-berry-purple: oklch(51.17% 0.1852 351.18); /* Rexall */ --tui-color-rexall-blush-pink: oklch(58.59% 0.1586 4.6101); /* Be Well promo */ --tui-color-rexall-blush-red: oklch(86.8% 0.055 21.054); /* Be Well promo */ --tui-color-rexall-burgundy-red: oklch(45.44% 0.1821 28.716); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-calming-blue-haze: oklch(80.84% 0.0387 249.54); /* Charcoal Grey — neutral anchor */ --tui-color-rexall-charcoal-grey: oklch(32.5% 0 0); /* Rexall */ --tui-color-rexall-cloud-grey: oklch(84.52% 0 0); /* Be Well promo */ --tui-color-rexall-cream-yellow: oklch(99.23% 0.0159 98.986); /* Be Well promo */ --tui-color-rexall-daisy-yellow: oklch(92.84% 0.1204 106.48); /* Rexall AODA */ --tui-color-rexall-deep-ocean: oklch(42.34% 0.0723 194.8); /* Be Well promo */ --tui-color-rexall-dusty-red: oklch(50.13% 0.1755 23.713); /* Be Well */ --tui-color-rexall-evergreen: oklch(51.19% 0.0835 138.17); /* Rexall */ --tui-color-rexall-fog-grey: oklch(97.91% 0 0); /* Be Well */ --tui-color-rexall-forest-green: oklch(45.31% 0.073 146.02); /* Be Well */ --tui-color-rexall-garden-green: oklch(54.77% 0.0953 138.22); /* Be Well */ --tui-color-rexall-granite-grey: oklch(53.49% 0.005 17.313); /* Rexall */ --tui-color-rexall-grapefruit: oklch(95.01% 0.0848 98.329); /* Rexall */ --tui-color-rexall-grass-green: oklch(78.93% 0.1268 133.59); /* Be Well */ --tui-color-rexall-grey-blue: oklch(59.99% 0.0929 185.62); /* Be Well promo */ --tui-color-rexall-highlighter-yellow: oklch(92.14% 0.1824 105.41); /* Digestive */ --tui-color-rexall-immunity-orange: oklch(71.08% 0.1395 51.737); /* Ladybug Red — red anchor */ --tui-color-rexall-ladybug-red: oklch(60.41% 0.2338 23.742); /* Rexall AODA */ --tui-color-rexall-lakeside-blue: oklch(52.74% 0.0872 187.63); /* Be Well */ --tui-color-rexall-lavender-purple: oklch(89.47% 0.0375 342.55); /* Rexall */ --tui-color-rexall-lemon-yellow: oklch(88.28% 0.1811 94.46); /* Rexall */ --tui-color-rexall-light-blush-pink: oklch(85.56% 0.0673 10.506); /* Rexall */ --tui-color-rexall-light-drizzle: oklch(91.04% 0.0336 191.96); /* Be Well promo */ --tui-color-rexall-light-red: oklch(94.46% 0.0142 12.025); /* Be Well */ --tui-color-rexall-lime-green: oklch(75.39% 0.152 134.81); /* Be Well promo */ --tui-color-rexall-lipstick-red: oklch(62.76% 0.2141 23.004); /* Be Well */ --tui-color-rexall-melon-orange: oklch(85.06% 0.0788 62.059); /* Rexall */ --tui-color-rexall-mist-blue: oklch(95.8% 0.0169 192.36); /* Be Well */ --tui-color-rexall-moss-green: oklch(64.94% 0.1505 133.89); /* Be Well */ --tui-color-rexall-night-grey: oklch(42.18% 0.0031 48.66); /* Be Well */ --tui-color-rexall-pansy-purple: oklch(79.17% 0.0759 344.13); /* Be Well */ --tui-color-rexall-peachy-orange: oklch(92.38% 0.0385 63.533); /* Be Well promo */ --tui-color-rexall-pinky-red: oklch(96.91% 0.0151 17.418); /* Be Well */ --tui-color-rexall-plum-purple: oklch(59.35% 0.1561 347.67); /* Poolside Blue — teal anchor */ --tui-color-rexall-poolside-blue: oklch(68.76% 0.1147 188.23); /* Rexall */ --tui-color-rexall-rain-blue: oklch(87.81% 0.0553 193.35); /* Be Well promo */ --tui-color-rexall-rosy-red: oklch(69.56% 0.183 23.103); /* Rexall */ --tui-color-rexall-ruby-red: oklch(57.73% 0.2098 23.23); /* Rexall */ --tui-color-rexall-sage-green: oklch(88.81% 0.0662 132.17); /* Be Well */ --tui-color-rexall-seaside-blue: oklch(49.86% 0.0891 182.42); /* Rexall AODA */ --tui-color-rexall-shoreline-blue: oklch(63.95% 0.1102 188.54); /* Be Well */ --tui-color-rexall-silver-grey: oklch(66.37% 0.0049 0.0752); /* Be Well */ --tui-color-rexall-sky-blue: oklch(84.85% 0.0638 193.53); /* Rexall */ --tui-color-rexall-slate-grey: oklch(53.82% 0 0); --tui-color-rexall-steel: oklch(52.12% 0.0301 259.03); --tui-color-rexall-steel-100: oklch(95.8% 0.0077 249.5); --tui-color-rexall-steel-200: oklch(91% 0.0173 249.5); --tui-color-rexall-steel-300: oklch(86% 0.0277 249.5); /* Calming Blue Haze — steel anchor */ --tui-color-rexall-steel-400: var(--tui-color-rexall-calming-blue-haze); --tui-color-rexall-steel-500: oklch(71.5% 0.0348 249.5); --tui-color-rexall-steel-600: oklch(63.5% 0.0315 249.5); --tui-color-rexall-steel-700: oklch(54.5% 0.0276 249.5); --tui-color-rexall-steel-800: oklch(45.5% 0.0237 249.5); --tui-color-rexall-steel-900: oklch(36.5% 0.0196 249.5); --tui-color-rexall-steel-1000: oklch(27% 0.0152 249.5); /* Sunshine Yellow — yellow anchor */ --tui-color-rexall-sunshine-yellow: oklch(86.72% 0.1773 90.85); /* Be Well promo */ --tui-color-rexall-taupe-red: oklch(75.68% 0.0781 13.998); /* Rexall */ --tui-color-rexall-tea-green: oklch(95.59% 0.0563 131.52); /* Be Well */ --tui-color-rexall-teal-blue: oklch(68.53% 0.0897 185.9); /* Terracotta Orange — orange anchor */ --tui-color-rexall-terracotta-orange: oklch(65.65% 0.1764 48.889); /* Tulip Pink — pink anchor */ --tui-color-rexall-tulip-pink: oklch(67.04% 0.1842 5.0399); /* Be Well promo */ --tui-color-rexall-vanilla-yellow: oklch(95.6% 0.072 105.12); /* Be Well */ --tui-color-rexall-venice-blue: oklch(40.54% 0.0851 236.88); /* Be Well */ --tui-color-rexall-washed-blue: oklch(78.7% 0.0619 185.5); /* Well Green — green anchor */ --tui-color-rexall-well-green: oklch(72.73% 0.1698 134.03); /* Digestive */ --tui-color-rexall-well-green-deep: oklch(50.28% 0.1219 142.99); --tui-color-surface-background: var(--tui-color-white); --tui-color-surface-background-brand: var(--tui-color-magenta-400); /* A page or section tinted with the brand. Plain surface unless a brand sets a tint. */ --tui-color-surface-background-brand-subtle: var(--tui-color-surface-background); --tui-color-surface-background-neutral-subtle: var(--tui-color-neutral-100); --tui-color-tag-background-accent-green: var(--tui-color-green-100); --tui-color-tag-background-accent-magenta: var(--tui-color-magenta-100); --tui-color-tag-background-accent-neutral: var(--tui-color-neutral-100); --tui-color-tag-background-accent-orange: var(--tui-color-orange-100); --tui-color-tag-background-accent-pink: var(--tui-color-pink-100); --tui-color-tag-background-accent-steel: var(--tui-color-rexall-steel-100); --tui-color-tag-background-accent-teal: var(--tui-color-teal-100); --tui-color-tag-background-accent-yellow: var(--tui-color-yellow-100); --tui-color-tag-text-accent-green: var(--tui-color-green-800); --tui-color-tag-text-accent-magenta: var(--tui-color-magenta-800); --tui-color-tag-text-accent-neutral: var(--tui-color-neutral-800); --tui-color-tag-text-accent-orange: var(--tui-color-orange-800); --tui-color-tag-text-accent-pink: var(--tui-color-pink-800); --tui-color-tag-text-accent-steel: var(--tui-color-rexall-steel-800); --tui-color-tag-text-accent-teal: var(--tui-color-teal-800); --tui-color-tag-text-accent-yellow: var(--tui-color-yellow-800); --tui-color-teal-100: oklch(95.8% 0.0229 188.2); --tui-color-teal-200: oklch(91% 0.0422 188.2); --tui-color-teal-300: oklch(86% 0.0602 188.2); --tui-color-teal-400: oklch(79.5% 0.0818 188.2); /* Poolside Blue — teal anchor */ --tui-color-teal-500: var(--tui-color-rexall-poolside-blue); --tui-color-teal-600: oklch(63.5% 0.1071 188.2); --tui-color-teal-700: oklch(54.5% 0.0941 188.2); --tui-color-teal-800: oklch(45.5% 0.079 188.2); --tui-color-teal-900: oklch(36.5% 0.0634 188.2); --tui-color-teal-1000: oklch(27% 0.0469 188.2); --tui-color-text: var(--tui-color-neutral-900); --tui-color-text-brand: var(--tui-color-teal-800); --tui-color-text-brand-hovered: var(--tui-color-teal-900); --tui-color-text-brand-pressed: var(--tui-color-teal-900); --tui-color-text-danger: var(--tui-color-red-700); --tui-color-text-danger-hovered: var(--tui-color-red-800); --tui-color-text-danger-pressed: var(--tui-color-red-800); --tui-color-text-disabled: var(--tui-color-neutral-600); --tui-color-text-information: var(--tui-color-rexall-steel-700); --tui-color-text-inverse: var(--tui-color-white); --tui-color-text-neutral: var(--tui-color-neutral-900); --tui-color-text-neutral-hovered: var(--tui-color-neutral-800); --tui-color-text-neutral-pressed: var(--tui-color-neutral-1000); --tui-color-text-neutral-subtle: var(--tui-color-neutral-800); --tui-color-text-success: var(--tui-color-green-700); --tui-color-text-warning: var(--tui-color-yellow-700); --tui-color-transparent: oklch(0% 0 0 / 0); --tui-color-white: oklch(100% 0 0); --tui-color-yellow-100: oklch(95.8% 0.0354 90.8); --tui-color-yellow-200: oklch(91% 0.1029 90.8); /* Sunshine Yellow — yellow anchor */ --tui-color-yellow-300: var(--tui-color-rexall-sunshine-yellow); --tui-color-yellow-400: oklch(79.5% 0.1624 88.3); --tui-color-yellow-500: oklch(71.5% 0.1463 85.7); --tui-color-yellow-600: oklch(63.5% 0.1305 83.1); --tui-color-yellow-700: oklch(54.5% 0.1126 80.6); --tui-color-yellow-800: oklch(45.5% 0.0948 78); --tui-color-yellow-900: oklch(36.5% 0.0768 75.4); --tui-color-yellow-1000: oklch(27% 0.0575 72.8); --tui-elevation-shadow-overflow: 0px 0px 8px 0px oklch(27% 0 0 / 0.16), 0px 0px 1px 0px oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-perimeter: oklch(27% 0 0 / 0.12); --tui-elevation-shadow-overflow-spread: oklch(27% 0 0 / 0.16); --tui-elevation-shadow-overlay: 0px 8px 12px 0px oklch(27% 0 0 / 0.15), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-shadow-raised: 0px 1px 1px 0px oklch(27% 0 0 / 0.25), 0px 0px 1px 0px oklch(27% 0 0 / 0.31); --tui-elevation-surface: var(--tui-color-transparent); --tui-elevation-surface-container: var(--tui-color-neutral-A100); --tui-elevation-surface-container-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-container-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay: var(--tui-color-transparent); --tui-elevation-surface-overlay-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-overlay-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-raised: var(--tui-color-transparent); --tui-elevation-surface-raised-hovered: var(--tui-color-neutral-200); --tui-elevation-surface-raised-pressed: var(--tui-color-neutral-300); --tui-elevation-surface-sunken: var(--tui-color-neutral-A100); --tui-font-family-mono: "Source Code Pro", ui-monospace, "Consolas", "Menlo", monospace; --tui-font-family-sans: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --tui-font-leading-050: 16px; --tui-font-leading-075: 20px; --tui-font-leading-100: 24px; --tui-font-leading-200: 28px; --tui-font-leading-300: 28px; --tui-font-leading-400: 32px; --tui-font-leading-500: 40px; --tui-font-leading-600: 48px; --tui-font-leading-700: 56px; --tui-font-leading-800: 68px; --tui-font-leading-900: 96px; --tui-font-leading-1000: 116px; --tui-font-size-050: 12px; --tui-font-size-075: 14px; --tui-font-size-100: 16px; --tui-font-size-200: 20px; --tui-font-size-300: 24px; --tui-font-size-400: 28px; --tui-font-size-500: 32px; --tui-font-size-600: 40px; --tui-font-size-700: 48px; --tui-font-size-800: 56px; --tui-font-size-900: 80px; --tui-font-size-1000: 96px; --tui-font-tracking-default: 0rem; --tui-font-weight-bold: 700; --tui-font-weight-medium: 500; --tui-font-weight-regular: 400; --tui-font-weight-semibold: 600; --tui-layer-0: 0; --tui-layer-10: 10; --tui-layer-20: 20; --tui-layer-30: 30; --tui-layer-40: 40; --tui-layer-50: 50; --tui-layer-60: 60; --tui-layer-base: var(--tui-layer-0); --tui-layer-modal: var(--tui-layer-50); --tui-layer-navigation: var(--tui-layer-10); --tui-layer-notification: var(--tui-layer-60); --tui-layer-overlay: var(--tui-layer-40); --tui-layer-popover: var(--tui-layer-30); --tui-layer-sticky: var(--tui-layer-20); --tui-motion-action-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-action-pressed: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-blanket-enter: var(--tui-motion-duration-long) 0ms var(--tui-motion-easing-inout-bold); --tui-motion-blanket-exit: var(--tui-motion-duration-medium) 0ms var(--tui-motion-easing-in-practical); --tui-motion-control-hovered: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-selected: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-control-toggle: var(--tui-motion-duration-short) 0ms var(--tui-motion-easing-out-practical); --tui-motion-curve-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6); --tui-motion-curve-inout-bold: cubic-bezier(0.4, 0, 0, 1); --tui-motion-curve-out-bold: cubic-bezier(0, 0.4, 0, 1); --tui-motion-curve-out-practical: cubic-bezier(0.4, 1, 0.6, 1); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-curve-spring: cubic-bezier(0.363, 1.102, 0.089, 1.043); --tui-motion-duration-0: 0ms; --tui-motion-duration-050: 50ms; --tui-motion-duration-100: 100ms; --tui-motion-duration-150: 150ms; --tui-motion-duration-200: 200ms; --tui-motion-duration-250: 250ms; --tui-motion-duration-400: 400ms; --tui-motion-duration-600: 600ms; --tui-motion-duration-instant: var(--tui-motion-duration-0); --tui-motion-duration-long: var(--tui-motion-duration-250); --tui-motion-duration-medium: var(--tui-motion-duration-200); --tui-motion-duration-short: var(--tui-motion-duration-150); --tui-motion-duration-xlong: var(--tui-motion-duration-400); --tui-motion-duration-xshort: var(--tui-motion-duration-100); --tui-motion-duration-xxlong: var(--tui-motion-duration-600); --tui-motion-duration-xxshort: var(--tui-motion-duration-050); --tui-motion-easing-in-practical: var(--tui-motion-curve-in-practical); --tui-motion-easing-inout-bold: var(--tui-motion-curve-inout-bold); --tui-motion-easing-out-bold: var(--tui-motion-curve-out-bold); --tui-motion-easing-out-practical: var(--tui-motion-curve-out-practical); /* A cubic-bezier fitted to Atlassian's linear() spring: one overshoot (peak 1.018), RMS error 1.2% of the travel. */ --tui-motion-easing-spring: var(--tui-motion-curve-spring); /* Corners of a small action (Button sm). */ --tui-shape-action-round: var(--tui-size-radius-lg); /* Corners of a medium action (Button md). */ --tui-shape-action-rounder: var(--tui-size-radius-xl); /* Corners of a large action (Button lg). The roundest action, not always a pill. */ --tui-shape-action-roundest: var(--tui-size-radius-2xl); /* Corners of a box that holds content, such as a card. Follows the surface corners unless a brand sets its own. */ --tui-shape-container-rounder: var(--tui-shape-surface-rounder); --tui-shape-rounder: var(--tui-size-radius-lg); --tui-shape-surface-rounder: var(--tui-size-radius-2xl); --tui-size-border-hairline: var(--tui-size-border-sm); --tui-size-border-md: 2px; --tui-size-border-narrow: var(--tui-size-border-md); --tui-size-border-sm: 1px; --tui-size-icon-lg: var(--tui-space-300); --tui-size-icon-md: var(--tui-space-250); --tui-size-icon-sm: var(--tui-space-200); --tui-size-icon-xs: var(--tui-space-100); --tui-size-radius-2xl: 16px; --tui-size-radius-3xl: 20px; --tui-size-radius-4xl: 24px; --tui-size-radius-full: 9999px; --tui-size-radius-lg: 8px; --tui-size-radius-md: 6px; --tui-size-radius-none: 0px; --tui-size-radius-sm: 4px; --tui-size-radius-xl: 12px; --tui-size-radius-xs: 2px; --tui-space-0: 0px; --tui-space-025: 2px; --tui-space-050: 4px; --tui-space-075: 6px; --tui-space-100: 8px; --tui-space-125: 10px; --tui-space-150: 12px; --tui-space-200: 16px; --tui-space-250: 20px; --tui-space-300: 24px; --tui-space-400: 32px; --tui-space-500: 40px; --tui-space-600: 48px; --tui-space-700: 56px; --tui-space-800: 64px; --tui-space-900: 72px; --tui-space-1000: 80px; --tui-space-1100: 88px; --tui-space-1200: 96px; --tui-space-1300: 104px; --tui-space-1400: 112px; --tui-space-1500: 120px; --tui-space-inline: var(--tui-space-100); --tui-space-inline-dense: var(--tui-space-050); --tui-space-inline-loose: var(--tui-space-150); --tui-space-inline-looser: var(--tui-space-250); --tui-space-inset: var(--tui-space-200); --tui-space-inset-dense: var(--tui-space-100); --tui-space-inset-loose: var(--tui-space-250); --tui-space-inset-looser: var(--tui-space-400); --tui-space-inset-squish: 12px 24px; --tui-space-inset-squish-dense: 8px 24px; --tui-space-inset-squish-loose: 16px 24px; --tui-space-inset-stretch: 8px 16px; --tui-space-inset-stretch-loosest: 16px 16px; --tui-space-negative-025: -2px; --tui-space-negative-050: -4px; --tui-space-negative-075: -6px; --tui-space-negative-100: -8px; --tui-space-negative-150: -12px; --tui-space-negative-200: -16px; --tui-space-negative-250: -20px; --tui-space-negative-300: -24px; --tui-space-negative-400: -32px; --tui-space-stack: var(--tui-space-200); --tui-space-stack-dense: var(--tui-space-100); --tui-space-stack-denser: var(--tui-space-050); --tui-space-stack-loose: var(--tui-space-300); --tui-space-stack-looser: var(--tui-space-400); --tui-space-stack-loosest: var(--tui-space-600); --tui-typography-action-label-lg: var(--tui-typography-action-label-lg-font-weight) var(--tui-typography-action-label-lg-font-size)/var(--tui-typography-action-label-lg-line-height) var(--tui-typography-action-label-lg-font-family); --tui-typography-action-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-action-label-lg-font-size: var(--tui-font-size-100); --tui-typography-action-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-lg-letter-spacing: 0px; --tui-typography-action-label-lg-line-height: 1.5; --tui-typography-action-label-md: var(--tui-typography-action-label-md-font-weight) var(--tui-typography-action-label-md-font-size)/var(--tui-typography-action-label-md-line-height) var(--tui-typography-action-label-md-font-family); --tui-typography-action-label-md-font-family: var(--tui-font-family-sans); --tui-typography-action-label-md-font-size: var(--tui-font-size-075); --tui-typography-action-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-md-letter-spacing: 0px; --tui-typography-action-label-md-line-height: 1.4286; --tui-typography-action-label-xl: var(--tui-typography-action-label-xl-font-weight) var(--tui-typography-action-label-xl-font-size)/var(--tui-typography-action-label-xl-line-height) var(--tui-typography-action-label-xl-font-family); --tui-typography-action-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-action-label-xl-font-size: var(--tui-font-size-200); --tui-typography-action-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-action-label-xl-letter-spacing: 0px; --tui-typography-action-label-xl-line-height: 1.4; --tui-typography-body-lg: var(--tui-typography-body-lg-font-weight) var(--tui-typography-body-lg-font-size)/var(--tui-typography-body-lg-line-height) var(--tui-typography-body-lg-font-family); --tui-typography-body-lg-font-family: var(--tui-font-family-sans); --tui-typography-body-lg-font-size: var(--tui-font-size-200); --tui-typography-body-lg-font-weight: var(--tui-font-weight-regular); --tui-typography-body-lg-letter-spacing: 0px; --tui-typography-body-lg-line-height: 1.4; --tui-typography-body-md: var(--tui-typography-body-md-font-weight) var(--tui-typography-body-md-font-size)/var(--tui-typography-body-md-line-height) var(--tui-typography-body-md-font-family); --tui-typography-body-md-font-family: var(--tui-font-family-sans); --tui-typography-body-md-font-size: var(--tui-font-size-100); --tui-typography-body-md-font-weight: var(--tui-font-weight-regular); --tui-typography-body-md-letter-spacing: 0px; --tui-typography-body-md-line-height: 1.5; --tui-typography-body-sm: var(--tui-typography-body-sm-font-weight) var(--tui-typography-body-sm-font-size)/var(--tui-typography-body-sm-line-height) var(--tui-typography-body-sm-font-family); --tui-typography-body-sm-font-family: var(--tui-font-family-sans); --tui-typography-body-sm-font-size: var(--tui-font-size-075); --tui-typography-body-sm-font-weight: var(--tui-font-weight-regular); --tui-typography-body-sm-letter-spacing: 0px; --tui-typography-body-sm-line-height: 1.4286; --tui-typography-body-xs: var(--tui-typography-body-xs-font-weight) var(--tui-typography-body-xs-font-size)/var(--tui-typography-body-xs-line-height) var(--tui-typography-body-xs-font-family); --tui-typography-body-xs-font-family: var(--tui-font-family-sans); --tui-typography-body-xs-font-size: var(--tui-font-size-050); --tui-typography-body-xs-font-weight: var(--tui-font-weight-regular); --tui-typography-body-xs-letter-spacing: 0px; --tui-typography-body-xs-line-height: 1.3333; --tui-typography-code-md: var(--tui-typography-code-md-font-weight) var(--tui-typography-code-md-font-size)/var(--tui-typography-code-md-line-height) var(--tui-typography-code-md-font-family); --tui-typography-code-md-font-family: var(--tui-font-family-mono); --tui-typography-code-md-font-size: var(--tui-font-size-075); --tui-typography-code-md-font-weight: var(--tui-font-weight-regular); --tui-typography-code-md-letter-spacing: 0px; --tui-typography-code-md-line-height: 1.4286; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md: var(--tui-typography-container-heading-md-font-weight) var(--tui-typography-container-heading-md-font-size)/var(--tui-typography-container-heading-md-line-height) var(--tui-typography-container-heading-md-font-family); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-family: var(--tui-font-family-sans); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-size: var(--tui-font-size-200); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-font-weight: var(--tui-font-weight-bold); /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-letter-spacing: 0px; /* The title of a box that holds content, such as a card. Rexall matches heading.sm. */ --tui-typography-container-heading-md-line-height: 1.4; --tui-typography-display-lg: var(--tui-typography-display-lg-font-weight) var(--tui-typography-display-lg-font-size)/var(--tui-typography-display-lg-line-height) var(--tui-typography-display-lg-font-family); --tui-typography-display-lg-font-family: var(--tui-font-family-sans); --tui-typography-display-lg-font-size: var(--tui-font-size-900); --tui-typography-display-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-display-lg-letter-spacing: -0.8px; --tui-typography-display-lg-line-height: 1.2; --tui-typography-display-md: var(--tui-typography-display-md-font-weight) var(--tui-typography-display-md-font-size)/var(--tui-typography-display-md-line-height) var(--tui-typography-display-md-font-family); --tui-typography-display-md-font-family: var(--tui-font-family-sans); --tui-typography-display-md-font-size: var(--tui-font-size-800); --tui-typography-display-md-font-weight: var(--tui-font-weight-bold); --tui-typography-display-md-letter-spacing: -0.56px; --tui-typography-display-md-line-height: 1.2143; --tui-typography-display-xl: var(--tui-typography-display-xl-font-weight) var(--tui-typography-display-xl-font-size)/var(--tui-typography-display-xl-line-height) var(--tui-typography-display-xl-font-family); --tui-typography-display-xl-font-family: var(--tui-font-family-sans); --tui-typography-display-xl-font-size: var(--tui-font-size-1000); --tui-typography-display-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-display-xl-letter-spacing: -0.96px; --tui-typography-display-xl-line-height: 1.2083; --tui-typography-heading-lg: var(--tui-typography-heading-lg-font-weight) var(--tui-typography-heading-lg-font-size)/var(--tui-typography-heading-lg-line-height) var(--tui-typography-heading-lg-font-family); --tui-typography-heading-lg-font-family: var(--tui-font-family-sans); --tui-typography-heading-lg-font-size: var(--tui-font-size-400); --tui-typography-heading-lg-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-lg-letter-spacing: -0.28px; --tui-typography-heading-lg-line-height: 1.1429; --tui-typography-heading-md: var(--tui-typography-heading-md-font-weight) var(--tui-typography-heading-md-font-size)/var(--tui-typography-heading-md-line-height) var(--tui-typography-heading-md-font-family); --tui-typography-heading-md-font-family: var(--tui-font-family-sans); --tui-typography-heading-md-font-size: var(--tui-font-size-300); --tui-typography-heading-md-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-md-letter-spacing: 0px; --tui-typography-heading-md-line-height: 1.1667; --tui-typography-heading-sm: var(--tui-typography-heading-sm-font-weight) var(--tui-typography-heading-sm-font-size)/var(--tui-typography-heading-sm-line-height) var(--tui-typography-heading-sm-font-family); --tui-typography-heading-sm-font-family: var(--tui-font-family-sans); --tui-typography-heading-sm-font-size: var(--tui-font-size-200); --tui-typography-heading-sm-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-sm-letter-spacing: 0px; --tui-typography-heading-sm-line-height: 1.4; --tui-typography-heading-xl: var(--tui-typography-heading-xl-font-weight) var(--tui-typography-heading-xl-font-size)/var(--tui-typography-heading-xl-line-height) var(--tui-typography-heading-xl-font-family); --tui-typography-heading-xl-font-family: var(--tui-font-family-sans); --tui-typography-heading-xl-font-size: var(--tui-font-size-500); --tui-typography-heading-xl-font-weight: var(--tui-font-weight-bold); --tui-typography-heading-xl-letter-spacing: -0.32px; --tui-typography-heading-xl-line-height: 1.25; --tui-typography-label-lg: var(--tui-typography-label-lg-font-weight) var(--tui-typography-label-lg-font-size)/var(--tui-typography-label-lg-line-height) var(--tui-typography-label-lg-font-family); --tui-typography-label-lg-font-family: var(--tui-font-family-sans); --tui-typography-label-lg-font-size: var(--tui-font-size-100); --tui-typography-label-lg-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-lg-letter-spacing: 0px; --tui-typography-label-lg-line-height: 1.5; --tui-typography-label-md: var(--tui-typography-label-md-font-weight) var(--tui-typography-label-md-font-size)/var(--tui-typography-label-md-line-height) var(--tui-typography-label-md-font-family); --tui-typography-label-md-font-family: var(--tui-font-family-sans); --tui-typography-label-md-font-size: var(--tui-font-size-075); --tui-typography-label-md-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-md-letter-spacing: 0px; --tui-typography-label-md-line-height: 1.4286; --tui-typography-label-xl: var(--tui-typography-label-xl-font-weight) var(--tui-typography-label-xl-font-size)/var(--tui-typography-label-xl-line-height) var(--tui-typography-label-xl-font-family); --tui-typography-label-xl-font-family: var(--tui-font-family-sans); --tui-typography-label-xl-font-size: var(--tui-font-size-200); --tui-typography-label-xl-font-weight: var(--tui-font-weight-semibold); --tui-typography-label-xl-letter-spacing: 0px; --tui-typography-label-xl-line-height: 1.4; } } }