/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: Oct 23 2025 | 15:47:34 */ :root { /* MARK: Font Family ========================================================================== */ --csds-font-family-base: "Proxima Nova", Helvetica, Arial, sans-serif; --csds-font-family-heading: var(--csds-font-family-base); /* MARK: Font Weights ========================================================================== */ --csds-font-weight-regular: 400; --csds-font-weight-lightbold: 500; --csds-font-weight-semibold: 600; --csds-font-weight-bold: 700; /* MARK: Font Sizes ========================================================================== */ --csds-font-size-xs: clamp(0.8125rem, calc(0.8125rem + 0.704vw), 0.875rem); --csds-font-size-sm: clamp(0.875rem, calc(0.875rem + 1.056vw), 1rem); --csds-font-size-base: clamp(1rem, calc(1rem + 1.056vw), 1.125rem); --csds-font-size-md: clamp(1.125rem, calc(1.125rem + 1.056vw), 1.25rem); --csds-font-size-lg: clamp(1.25rem, calc(1.25rem + 1.479vw), 1.4375rem); --csds-font-size-xl: clamp(1.4375rem, calc(1.4375rem + 0.704vw), 1.5625rem); --csds-font-size-2xl: clamp(1.5625rem, calc(1.5625rem + 1.408vw), 1.8125rem); --csds-font-size-3xl: clamp(1.8125rem, calc(1.8125rem + 1.056vw), 2rem); --csds-font-size-4xl: clamp(2rem, calc(2rem + 0.352vw), 2.25rem); /* MARK:Line Height Scale ========================================================================== */ /* when you don’t want line height to add extra space (14px → 16.1px) */ --csds-line-height-tight: 1.15; /* default for headings (14px → 16.8px) */ --csds-line-height-heading: 1.2; /* for captions, hints, errors (14px → 18.2px) */ --csds-line-height-caption: 1.3; /* default for body text (14px → 21px) */ --csds-line-height-base: 1.5; /* for inputs, textareas, buttons (14px → 20px) */ --csds-line-height-form: 20px; /* Font Styles */ --csds-font-style-italic: italic; --csds-text-transform-uppercase: uppercase; --csds-text-decoration-underline: underline; /* Letter Spacing */ --csds-letter-spacing-normal: 0; --csds-letter-spacing-1px: 1px; /* MARK: Color Design Tokens */ --mss-color-white: #fff; --mss-color-gray-dark: #dbdcdd; /*blue*/ --mss-color-brand-lighter: #cfdbf1; --mss-color-brand: #5a81cd; --mss-color-brand-darker: #2d5094; /*lime-green*/ --mss-color-accent-lighter: #f1f4c2; --mss-color-accent: #d3dc41; --mss-color-accent-darker: #939b1c; /*orange*/ --clarion-color-brand: #e57200; /* MARK: Brand colors - Base: #337ab7 (MSS Blue) */ --csds-color-brand-lightest: #b1d6f9; --csds-color-brand-lighter: #97c5f0; --csds-color-brand-light: #70ade6; --csds-color-brand-base: #337ab7; --csds-color-brand-dark: #246ca8; --csds-color-brand-darker: #266fab; --csds-color-brand-darkest: #1e3d59; --csds-color-clarion-brand: #e57200; /* MARK: Accessible Brand Colors - 4.5 AA Compliant - TO DO just same as brand */ --csds-color-brand-aa-lightest: #b1d6f9; --csds-color-brand-aa-lighter: #97c5f0; --csds-color-brand-aa-light: #70ade6; --csds-color-brand-aa-base: #337ab7; --csds-color-brand-aa-dark: #246ca8; --csds-color-brand-aa-darker: #266fab; --csds-color-brand-aa-darkest: #1e3d59; /* MARK: Accent colors - Base: #958e09 (MSS Green) */ --csds-color-accent-lightest: #d1d98b; --csds-color-accent-lighter: #C0C778; --csds-color-accent-light: #aab251; --csds-color-accent-base: #958e09; --csds-color-accent-dark: #d5df44; --csds-color-accent-darker: #737922; --csds-color-accent-darkest: #3c3f1f; /* MARK: Neutral colors - Base: #403f2e (Earthy gray) */ --csds-color-neutral-lightest: #f8f8f7; --csds-color-neutral-lightest: #f0f0f0; --csds-color-neutral-lighter: #dfdfde; --csds-color-neutral-light: #d3d3d3; --csds-color-neutral-base: #403f2e; --csds-color-neutral-dark: #323125; --csds-color-neutral-darker: #23221b; --csds-color-neutral-darkest: #141410; /* MARK: Semantic colors */ --csds-color-success-light: hsl(145, 63%, 80%); /* hex: #f5d6c2 */ --csds-color-success-base: hsl(145, 63%, 42%); /* hex: #e67200 */ --csds-color-success-dark: hsl(145, 63%, 22%); /* hex: #aa570e */ --csds-color-error-light: hsl(354, 85%, 80%); /* hex: #fdb887 */ --csds-color-error-base: hsl(354, 85%, 44%); /* hex: #e57200 */ --csds-color-error-dark: hsl(354, 85%, 24%); /* hex: #aa570e */ --csds-color-warning-light: hsl(38, 100%, 80%); /* hex: #f5d6c2 */ --csds-color-warning-base: hsl(38, 100%, 50%); /* hex: #e67200 */ --csds-color-warning-dark: hsl(38, 100%, 30%); /* hex: #aa570e */ --csds-color-info-light: hsl(200, 85%, 80%); /* hex: #f5d6c2 */ --csds-color-info-base: hsl(200, 85%, 45%); /* hex: #e67200 */ --csds-color-info-dark: hsl(200, 85%, 25%); /* hex: #aa570e */ /* MARK: Black, white and transparent */ --csds-color-black: #000000; --csds-color-white: #ffffff; --csds-color-transparent: transparent; --csds-color-card-white: #F9F9F9; /* MARK: Black with transparency */ --csds-color-black-10: rgba(0, 0, 0, 0.1); --csds-color-black-20: rgba(0, 0, 0, 0.2); --csds-color-black-25: rgba(0, 0, 0, 0.25); --csds-color-black-50: rgba(0, 0, 0, 0.5); --csds-color-black-75: rgba(0, 0, 0, 0.75); --csds-color-black-90: rgba(0, 0, 0, 0.9); /* MARK: White with transparency */ --csds-color-white-10: rgba(255, 255, 255, 0.1); --csds-color-white-20: rgba(255, 255, 255, 0.2); --csds-color-white-25: rgba(255, 255, 255, 0.25); --csds-color-white-50: rgba(255, 255, 255, 0.5); --csds-color-white-75: rgba(255, 255, 255, 0.75); --csds-color-white-90: rgba(255, 255, 255, 0.9); /* MARK: Brand with Transparency */ --csds-color-brand-base-10: rgba(230, 114, 0, 0.1); --csds-color-brand-base-20: rgba(230, 114, 0, 0.2); --csds-color-brand-base-25: rgba(230, 114, 0, 0.25); --csds-color-brand-base-50: rgba(230, 114, 0, 0.5); --csds-color-brand-base-75: rgba(230, 114, 0, 0.75); --csds-color-brand-base-90: rgba(230, 114, 0, 0.9); /* MARK: Accent with Transparency */ --csds-color-accent-base-10: rgba(9, 113, 214, 0.1); --csds-color-accent-base-20: rgba(9, 113, 214, 0.2); --csds-color-accent-base-25: rgba(9, 113, 214, 0.25); --csds-color-accent-base-50: rgba(9, 113, 214, 0.5); --csds-color-accent-base-75: rgba(9, 113, 214, 0.75); --csds-color-accent-base-90: rgba(9, 113, 214, 0.9); /* Semantic application colors */ /* MARK: Background Colors */ --csds-color-background-transparent: transparent; --csds-color-background-light: var(--csds-color-neutral-lightest); --csds-color-background-dark: var(--csds-color-neutral-darkest); --csds-color-background-brand: var(--csds-color-brand-base); --csds-color-background-accent: var(--csds-color-accent-base); /* MARK: Text Colors */ --csds-color-text-white: var(--csds-color-white); --csds-color-text-black: var(--csds-color-black); --csds-color-text-light: var(--csds-color-neutral-lightest); --csds-color-text-dark: var(--csds-color-neutral-darkest); --csds-color-text-muted: var(--csds-color-neutral-base); --csds-color-text-brand: var(--csds-color-brand-aa-base); --csds-color-text-accent: var(--csds-color-accent-dark); /* MARK: Text Link Colors */ --csds-color-text-link: var(--csds-color-accent-base); --csds-color-text-link-hover: var(--csds-color-accent-dark); --csds-color-text-link-brand-aa: var(--csds-color-brand-aa-base); --csds-color-text-link-brand-aa-hover: var(--csds-color-brand-aa-darker); /* MARK: Border Colors */ --csds-color-border-lighter: var(--csds-color-neutral-lightest); --csds-color-border-light: var(--csds-color-neutral-lighter); --csds-color-border-dark: var(--csds-color-neutral-darkest); --csds-color-border-brand: var(--csds-color-brand-base); --csds-color-border-accent: var(--csds-color-accent-base); --csds-color-border-white: var(--csds-color-white); /* MARK: Icon Colors */ --csds-color-icon-brand: var(--csds-color-brand-base); --csds-color-icon-brand-aa: var(--csds-color-brand-aa-base); --csds-color-icon-accent: var(--csds-color-accent-base); --csds-color-icon-black: var(--csds-color-black); --csds-color-icon-white: var(--csds-color-white); --csds-color-icon-neutral: var(--csds-color-neutral-base); /* MARK:Background Design Tokens */ --csds-gray-blue-wave-pattern: url('data:image/svg+xml,%3Csvg width="1920" height="240" viewBox="0 0 1920 240" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="1920" height="240" fill="%23f0f0f0"/%3E%3Cpath d="M1920,240C1654.8333333333333,255,268.5,257.5,0,240C-268.5,222.5,203.16666666666669,150.5,309,135C414.8333333333333,119.5,528.3333333333334,136.66666666666666,635,147C741.6666666666666,157.33333333333334,843.5,190.83333333333334,949,197C1054.5,203.16666666666666,1161,191.83333333333334,1268,184C1375,176.16666666666666,1482.3333333333333,140.66666666666666,1591,150C1699.6666666666667,159.33333333333334,2185.1666666666665,225,1920,240C1654.8333333333333,255,268.5,257.5,0,240" fill="%23d0daf6"/%3E%3C/svg%3E'); --csds-gray-grid-tile-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect stroke='%23ffffff' stroke-width='0.4' width='1' height='1' id='s'/%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='scale(7.8) translate(-871.79 -653.85)'%3E%3Cuse fill='%23fcfcfc' href='%23s' y='2'/%3E%3Cuse fill='%23fcfcfc' href='%23s' x='1' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s' x='2' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='2'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='1' y='1'/%3E%3C/pattern%3E%3Cpattern id='b' width='7' height='11' patternUnits='userSpaceOnUse' patternTransform='scale(7.8) translate(-871.79 -653.85)'%3E%3Cg fill='%23f5f5f5'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' y='5' /%3E%3Cuse href='%23s' x='1' y='10'/%3E%3Cuse href='%23s' x='2' y='1'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='8'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='5' y='2'/%3E%3Cuse href='%23s' x='5' y='6'/%3E%3Cuse href='%23s' x='6' y='9'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='h' width='5' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(7.8) translate(-871.79 -653.85)'%3E%3Cg fill='%23f5f5f5'%3E%3Cuse href='%23s' y='5'/%3E%3Cuse href='%23s' y='8'/%3E%3Cuse href='%23s' x='1' y='1'/%3E%3Cuse href='%23s' x='1' y='9'/%3E%3Cuse href='%23s' x='1' y='12'/%3E%3Cuse href='%23s' x='2'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='2'/%3E%3Cuse href='%23s' x='3' y='6'/%3E%3Cuse href='%23s' x='3' y='11'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='4' y='10'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='c' width='17' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(7.8) translate(-871.79 -653.85)'%3E%3Cg fill='%23f2f2f2'%3E%3Cuse href='%23s' y='11'/%3E%3Cuse href='%23s' x='2' y='9'/%3E%3Cuse href='%23s' x='5' y='12'/%3E%3Cuse href='%23s' x='9' y='4'/%3E%3Cuse href='%23s' x='12' y='1'/%3E%3Cuse href='%23s' x='16' y='6'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='d' width='19' height='17' patternUnits='userSpaceOnUse' patternTransform='scale(7.8) translate(-871.79 -653.85)'%3E%3Cg fill='%23ffffff'%3E%3Cuse href='%23s' y='9'/%3E%3Cuse href='%23s' x='16' y='5'/%3E%3Cuse href='%23s' x='14' y='2'/%3E%3Cuse href='%23s' x='11' y='11'/%3E%3Cuse href='%23s' x='6' y='14'/%3E%3C/g%3E%3Cg fill='%23efefef'%3E%3Cuse href='%23s' x='3' y='13'/%3E%3Cuse href='%23s' x='9' y='7'/%3E%3Cuse href='%23s' x='13' y='10'/%3E%3Cuse href='%23s' x='15' y='4'/%3E%3Cuse href='%23s' x='18' y='1'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='e' width='47' height='53' patternUnits='userSpaceOnUse' patternTransform='scale(7.8) translate(-871.79 -653.85)'%3E%3Cg fill='%23FFDAB4'%3E%3Cuse href='%23s' x='2' y='5'/%3E%3Cuse href='%23s' x='16' y='38'/%3E%3Cuse href='%23s' x='46' y='42'/%3E%3Cuse href='%23s' x='29' y='20'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='f' width='59' height='71' patternUnits='userSpaceOnUse' patternTransform='scale(7.8) translate(-871.79 -653.85)'%3E%3Cg fill='%23FFDAB4'%3E%3Cuse href='%23s' x='33' y='13'/%3E%3Cuse href='%23s' x='27' y='54'/%3E%3Cuse href='%23s' x='55' y='55'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='g' width='139' height='97' patternUnits='userSpaceOnUse' patternTransform='scale(7.8) translate(-871.79 -653.85)'%3E%3Cg fill='%23FFDAB4'%3E%3Cuse href='%23s' x='11' y='8'/%3E%3Cuse href='%23s' x='51' y='13'/%3E%3Cuse href='%23s' x='17' y='73'/%3E%3Cuse href='%23s' x='99' y='57'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23b)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23h)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23c)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23d)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23e)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23f)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23g)' width='100%25' height='100%25'/%3E%3C/svg%3E"); --csds-gray-diagonal-line-pattern: repeating-linear-gradient(45deg, transparent, transparent 10px, var(--csds-color-neutral-lighter) 10px, var(--csds-color-neutral-lighter) calc(2 * 10px)); /* MARK: Backdrop Filter Design Tokens*/ --csds-backdrop-filter-blur-sm: blur(2px); --csds-backdrop-filter-blur-md: blur(5px); --csds-backdrop-filter-blur-lg: blur(10px); --csds-backdrop-filter-darken-60-saturate-140: brightness(0.6) saturate(140%); --csds-backdrop-filter-blur-darken: var(--csds-backdrop-filter-blur-md) brightness(0.95); /* MARK: Z-Index Design Tokens */ /* z-index override used sparingly */ --csds-z-index-heaven: calc(infinity); /* z-index for modal close buttons*/ --csds-z-index-modal-button: 2100; /* z-index for modals, lightboxes, etc */ --csds-z-index-modal: 2000; /* z-index for modal transparent backdrop/scrims */ --csds-z-index-modal-backdrop: 1900; /* z-index for menu dropdown-buttons */ --csds-z-index-menu-dropdown-button: 1800; /* z-index for menu dropdowns */ --csds-z-index-menu-dropdown: 1700; /* z-index for menus, navbars, footers*/ --csds-z-index-menu-higher: 1620; /* z-index for menus, navbars, footers*/ --csds-z-index-menu-high: 1610; /* z-index for menus, navbars, footers*/ --csds-z-index-menu: 1600; /* z-index for drawers, flyouts*/ --csds-z-index-drawer: 1500; /* z-index for alerts, toasts, notifications*/ --csds-z-index-alert: 1400; /* z-index for stickied elements */ --csds-z-index-sticky: 1300; /* z-index for tooltips */ --csds-z-index-tooltip: 1200; /* z-index for raised element badges */ --csds-z-index-badge: 1100; /* z-index for raised elements */ --csds-z-index-raised: 1000; /* z-index default base layer*/ --csds-z-index-surface: 1; /* z-index for hidden, off-screen elements */ --csds-z-index-sunken: -1; /* MARK: Border Design Tokens */ /* Border width */ --csds-border-width-none: 0; --csds-border-width-thin: 1px; --csds-border-width-medium: 2px; --csds-border-width-thick: 4px; /* Border radius */ --csds-border-radius-none: 0; --csds-border-radius-sm: 0.125rem; /* 2px */ --csds-border-radius-md: 0.25rem; /* 4px */ --csds-border-radius-lg: 0.5rem; /* 8px */ --csds-border-radius-xl: 0.75rem; /* 12px */ --csds-border-radius-2xl: 1rem; /* 16px */ --csds-border-radius-3xl: 1.5rem; /* 24px */ --csds-border-radius-full: 9999px; /* For pill shapes */ --csds-border-radius-circle: 50%; /* For circles */ /* Semantic border tokens */ --csds-border-width-button: var(--csds-border-width-thin); --csds-border-width-divider: var(--csds-border-width-thin); --csds-border-width-focus: var(--csds-border-width-medium); --csds-border-radius-button-sm: var(--csds-border-radius-sm); --csds-border-radius-button-md: var(--csds-border-radius-md); --csds-border-radius-button-lg: var(--csds-border-radius-lg); --csds-border-radius-button-pill: var(--csds-border-radius-full); --csds-border-radius-widget-1: var(--csds-border-radius-md); --csds-border-radius-widget-2: var(--csds-border-radius-lg); --csds-border-radius-widget-3: var(--csds-border-radius-xl); /* MARK: Shadow Design Tokens */ /* Shadow values */ --csds-shadow-none: none; --csds-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --csds-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --csds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --csds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --csds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --csds-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --csds-shadow-3xl: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px; --csds-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); --csds-shadow-inner-2: inset 0 0 10px var(--csds-color-black-25); --csds-shadow-faux-border: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset; --csds-shadow-material-1: rgba(3, 33, 64, 0.12) 0px 1px 3px, rgba(3, 33, 64, 0.24) 0px 1px 2px; --csds-shadow-material-2: rgba(3, 33, 64, 0.3) 0px 1px 2px 0px, rgba(3, 33, 64, 0.15) 0px 2px 6px 2px; --csds-shadow-material-3: rgba(3, 33, 64, 0.16) 0px 3px 6px, rgba(3, 33, 64, 0.23) 0px 3px 6px; --csds-shadow-material-4: rgba(3, 33, 64, 0.19) 0px 10px 20px, rgba(3, 33, 64, 0.23) 0px 6px 6px; --csds-shadow-material-5: rgba(3, 33, 64, 0.25) 0px 14px 28px, rgba(3, 33, 64, 0.22) 0px 10px 10px; --csds-shadow-material-6: rgba(3, 33, 64, 0.3) 0px 19px 38px, rgba(3, 33, 64, 0.22) 0px 15px 12px; --csds-shadow-dropdown: var(--csds-shadow-lg); --csds-shadow-modal: var(--csds-shadow-xl); --csds-shadow-popover: var(--csds-shadow-md); --csds-shadow-tooltip: var(--csds-shadow-sm); --csds-shadow-focus-ring: 0 0 0 3px var(--csds-color-active-focus); /* MARK: Space Design Tokens */ /* --csds-space-{value}: clamp({min-value}, {dynamic-value}, {max-value}); */ /* 0px */ --csds-space-0: 0rem; /* 2px */ --csds-space-4xs: 0.125rem; /* 4px */ --csds-space-3xs: 0.25rem; /* 8px */ --csds-space-2xs: 0.5rem; /* 12px */ --csds-space-xs: 0.75rem; /* 16px */ --csds-space-sm: 1rem; /* 24px → 28px */ --csds-space-md: clamp(1.5rem, calc(1.125rem + 0.78125vw), 1.75rem); /* 36px → 48px */ --csds-space-lg: clamp(2.25rem, calc(1.125rem + 2.34375vw), 3rem); /* 56px → 80px */ --csds-space-xl: clamp(3.5rem, calc(1.25rem + 4.6875vw), 5rem); /* 92px → 128px */ --csds-space-2xl: clamp(5.75rem, calc(2.375rem + 7.03125vw), 8rem); /* 148px → 196px */ --csds-space-3xl: clamp(9.25rem, calc(4.75rem + 9.375vw), 12.25rem); /* 240px → 320px */ --csds-space-4xl: clamp(15rem, calc(7.5rem + 15.625vw), 20rem); /* Semantic Spacing */ --csds-space-page-padding: var(--csds-space-lg); --csds-space-component-gap: var(--csds-space-md); --csds-space-field-spacing: var(--csds-space-sm); --csds-space-inline-gap: var(--csds-space-2xs); --csds-space-different-element-group-spacing: var(--csds-space-md); --csds-space-same-element-group-spacing: var(--csds-space-sm); /* MARK: Transition Design Tokens */ --csds-transition-duration-fast: 0.15s; --csds-transition-duration-base: 0.3s; --csds-transition-timing-base: ease-in-out; --csds-transition-fade: 0.3s ease; /* MARK: Icons Design Tokens */ --csds-icon-size-2xs: 0.25rem; /* 12px */ --csds-icon-size-xs: 0.75rem; /* 16px */ --csds-icon-size-sm: 1rem; /* 20px */ --csds-icon-size-md: 1.25rem; /* 24px */ --csds-icon-size-lg: 1.5rem; /* 32px */ --csds-icon-size-xl: 2rem; /* MARK: Width Design Tokens */ --csds-container-max-width: 90rem; /* desktop max with for container, main body content area. Leaving gap/gutter padding on sides */ --csds-container-max-width-larger: 100rem; --csds-container-margin: 0 auto; --csds-max-width: 1440px; /* MARK: Size Design Tokens */ --csds-size-width-100: 100%; --csds-size-width-50: 50%; --csds-size-width-33: 33%; --csds-size-width-25: 25%; --csds-size-width-viewport-10: 10vw; --csds-size-width-viewport-20: 20vw; --csds-size-width-viewport-25: 25vw; --csds-size-width-viewport-50: 50vw; --csds-size-width-viewport-75: 75vw; --csds-size-width-viewport-80: 80vw; --csds-size-width-viewport-90: 90vw; --csds-size-width-viewport-100: 100vw; --csds-size-width-container-3: 3cqw; --csds-size-width-container-10: 10cqw; --csds-size-width-container-12: 120cqw; --csds-size-width-container-25: 25cqw; --csds-size-width-container-50: 50cqw; --csds-size-width-container-75: 75cqw; --csds-size-width-container-80: 80cqw; --csds-size-width-container-90: 90cqw; --csds-size-width-container-100: 100cqw; --csds-size-width-full: 1200px; --csds-size-width-half: 600px; --csds-size-width-third: 400px; --csds-size-width-quarter: 300px; /* Step -2: 12.5px → 12.8px */ --csds-step-2xs: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem); /* Step -1: 15px → 16px */ --csds-step-xs: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem); /* Step 0: 18px → 20px */ --csds-step-sm: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); /* Step 1: 21.6px → 25px */ --csds-step-md: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem); /* Step 2: 25.92px → 31.25px */ --csds-step-lg: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem); /* Step 3: 31.104px → 39.0625px */ --csds-step-xl: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem); /* Step 4: 37.3248px → 48.8281px */ --csds-step-2xl: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem); /* Step 5: 44.7898px → 61.0352px */ --csds-step-3xl: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem); }