/* Design tokens for Claritev Connect UI. Use primitive tokens for raw values, semantic tokens in components, and var(--token-name) whenever one token references another. Brand Style Information: - Docs/brand-colors-figma-spec.md - Docs/spacing-scale-and-border-radius-figma-spec.md - Docs/typography-figma-spec.md */ :root { /*----------------------------------- FONT FAMILIES -----------------------------------*/ --ctev-font-primary: "Noto Sans", system-ui, -apple-system, "Segoe UI", "sans-serif"; --ctev-font-display: "Rubik", system-ui, -apple-system, "Segoe UI", "sans-serif"; /*----------------------------------- TYPOGRAPHY PRIMITIVES -----------------------------------*/ --ctev-font-size-12: 0.75rem; --ctev-font-size-14: 0.875rem; --ctev-font-size-16: 1rem; --ctev-font-size-20: 1.25rem; --ctev-font-size-24: 1.5rem; --ctev-font-size-28: 1.75rem; --ctev-font-size-32: 2rem; --ctev-font-size-40: 2.5rem; --ctev-font-size-48: 3rem; --ctev-font-size-56: 3.5rem; /* Fluid type coefficients target the standard 320px-1440px viewport range. */ --ctev-type-fluid-min-vw: 20rem; --ctev-type-fluid-max-vw: 90rem; --ctev-font-weight-light: 300; --ctev-font-weight-regular: 400; --ctev-font-weight-medium: 500; --ctev-font-weight-semibold: 600; --ctev-line-height-120: 1.2; --ctev-line-height-140: 1.4; --ctev-line-height-150: 1.5; --ctev-letter-spacing-tight: 0.01em; --ctev-letter-spacing-medium: 0.0225rem; --ctev-letter-spacing-wide: 0.03em; /*----------------------------------- SPACING -----------------------------------*/ --ctev-spacing-2: 0.125rem; --ctev-spacing-4: 0.25rem; --ctev-spacing-8: 0.5rem; --ctev-spacing-12: 0.75rem; --ctev-spacing-16: 1rem; --ctev-spacing-20: 1.25rem; --ctev-spacing-24: 1.5rem; --ctev-spacing-32: 2rem; --ctev-spacing-40: 2.5rem; --ctev-spacing-48: 3rem; --ctev-spacing-56: 3.5rem; --ctev-spacing-64: 4rem; --ctev-spacing-72: 4.5rem; --ctev-spacing-80: 5rem; --ctev-spacing-88: 5.5rem; --ctev-spacing-96: 6rem; /*----------------------------------- BORDER RADIUS -----------------------------------*/ --ctev-radius-4: 0.25rem; --ctev-radius-8: 0.5rem; --ctev-radius-16: 1rem; --ctev-radius-20: 1.25rem; --ctev-radius-24: 1.5rem; --ctev-radius-pill: 9999px; --ctev-radius-circle: 50%; /*----------------------------------- PRIMITIVE COLORS -----------------------------------*/ --ctev-black: hsl(0, 0%, 0%); --ctev-black-rgb: 0, 0, 0; --ctev-white: hsl(0, 0%, 100%); --ctev-white-rgb: 255, 255, 255; /*----------------------------------- BRAND COLORS -----------------------------------*/ --ctev-deep-blue: hsl(218, 100%, 14%); --ctev-blue: hsl(221, 56%, 42%); --ctev-light-blue: hsl(206, 95%, 48%); --ctev-teal: hsl(189, 100%, 42%); --ctev-chartreuse: hsl(64, 72%, 48%); --ctev-pink: hsl(337, 100%, 45%); --ctev-gray: hsl(0, 0%, 84%); --ctev-light-gray: hsl(0, 0%, 97.25%); --ctev-darkest-gray: hsl(210, 31%, 10%); /*----------------------------------- NEUTRAL RAMPS -----------------------------------*/ --ctev-neutral-400: hsl(0, 0%, 35%); --ctev-neutral-300: hsl(0, 0%, 46%); --ctev-neutral-200: hsl(0, 0%, 52%); --ctev-neutral-100: hsl(0, 0%, 90%); --ctev-neutral-000: hsl(0, 0%, 95%); /*----------------------------------- BRAND COLOR RAMPS -----------------------------------*/ --ctev-deep-blue-900: hsl(218, 100%, 14%); --ctev-deep-blue-800: hsl(217, 69%, 22%); --ctev-deep-blue-700: hsl(217, 51%, 31%); --ctev-deep-blue-600: hsl(217, 41%, 39%); --ctev-deep-blue-500: hsl(216, 35%, 49%); --ctev-deep-blue-400: hsl(216, 42%, 58%); --ctev-deep-blue-300: hsl(216, 56%, 68%); --ctev-deep-blue-200: hsl(216, 84%, 78%); --ctev-deep-blue-100: hsl(217, 100%, 87%); /* Brand --ctev-deep-blue-000: hsl(217, 100%, 94%) was changed for iOS */ --ctev-deep-blue-000: hsl(217, 100%, 90%); --ctev-blue-900: hsl(228, 100%, 16%); --ctev-blue-800: hsl(223, 90%, 24%); --ctev-blue-700: hsl(221, 68%, 32%); --ctev-blue-600: hsl(221, 56%, 42%); --ctev-blue-500: hsl(221, 49%, 51%); --ctev-blue-400: hsl(221, 63%, 61%); --ctev-blue-300: hsl(220, 87%, 70%); --ctev-blue-200: hsl(220, 100%, 79%); --ctev-blue-100: hsl(220, 100%, 85%); --ctev-blue-000: hsl(218, 100%, 92%); --ctev-light-blue-900: hsl(209, 100%, 13%); --ctev-light-blue-800: hsl(207, 100%, 19%); --ctev-light-blue-700: hsl(206, 100%, 26%); --ctev-light-blue-600: hsl(206, 99%, 33%); --ctev-light-blue-500: hsl(205, 100%, 40%); --ctev-light-blue-400: hsl(206, 95%, 48%); --ctev-light-blue-300: hsl(210, 100%, 65%); --ctev-light-blue-200: hsl(210, 100%, 74%); --ctev-light-blue-100: hsl(211, 100%, 83%); --ctev-light-blue-000: hsl(212, 100%, 91%); --ctev-teal-900: hsl(191, 97%, 14%); --ctev-teal-800: hsl(190, 98%, 19%); --ctev-teal-700: hsl(190, 97%, 25%); --ctev-teal-600: hsl(190, 95%, 31%); --ctev-teal-500: hsl(190, 94%, 37%); --ctev-teal-400: hsl(189, 100%, 42%); --ctev-teal-300: hsl(192, 87%, 59%); --ctev-teal-200: hsl(193, 100%, 75%); --ctev-teal-100: hsl(193, 100%, 88%); --ctev-teal-000: hsl(194, 100%, 93%); --ctev-chartreuse-900: hsl(64, 97%, 13%); --ctev-chartreuse-800: hsl(63, 100%, 17%); --ctev-chartreuse-700: hsl(64, 96%, 22%); --ctev-chartreuse-600: hsl(64, 100%, 26%); --ctev-chartreuse-500: hsl(63, 96%, 32%); --ctev-chartreuse-400: hsl(63, 100%, 36%); --ctev-chartreuse-300: hsl(64, 72%, 48%); --ctev-chartreuse-200: hsl(64, 83%, 61%); --ctev-chartreuse-100: hsl(66, 100%, 80%); --ctev-chartreuse-000: hsl(68, 100%, 93%); --ctev-pink-900: hsl(341, 98%, 17%); --ctev-pink-800: hsl(339, 100%, 24%); --ctev-pink-700: hsl(339, 100%, 31%); --ctev-pink-600: hsl(338, 100%, 38%); --ctev-pink-500: hsl(337, 100%, 45%); --ctev-pink-400: hsl(346, 100%, 63%); --ctev-pink-300: hsl(350, 100%, 73%); --ctev-pink-200: hsl(353, 100%, 80%); --ctev-pink-100: hsl(354, 100%, 87%); --ctev-pink-000: hsl(354, 100%, 94%); /*----------------------------------- BRAND GRADIENTS -----------------------------------*/ /* Gradient-only stops preserve the exact approved Figma values. */ --ctev-gradient-stop-blue-600: #2E54A6; --ctev-gradient-stop-light-blue-400: #068CF2; --ctev-gradient-stop-chartreuse-300: #C6D41F; --ctev-gradient-blue: linear-gradient(270deg, var(--ctev-deep-blue) -8.02%, var(--ctev-gradient-stop-blue-600) 48.13%, var(--ctev-gradient-stop-light-blue-400) 100%); --ctev-gradient-blue-90: linear-gradient(180deg, var(--ctev-deep-blue) -40.84%, var(--ctev-gradient-stop-blue-600) 71.46%, var(--ctev-gradient-stop-light-blue-400) 175.21%); --ctev-gradient-green-blue: linear-gradient(270deg, var(--ctev-gradient-stop-blue-600) -8.02%, var(--ctev-gradient-stop-light-blue-400) 45.99%, var(--ctev-gradient-stop-chartreuse-300) 100%); /*----------------------------------- NON-BRAND COLORS -----------------------------------*/ --ctev-gray-50: hsl(0 0% 97%); --ctev-green-000: hsl(148, 61%, 88%); --ctev-green-600: hsl(120, 100%, 25%); --ctev-green-700: hsl(149, 100%, 18%); --ctev-red-600: hsl(0, 100%, 50%); --ctev-olive-600: hsl(98 15% 45%); --ctev-sky-blue-300: hsl(197, 71%, 73%); --ctev-violet-500: hsl(276, 100%, 50%); --ctev-purple-600: hsl(299, 38%, 46%); --ctev-yellow-400: hsl(48, 96%, 53%); --ctev-yellow-300: hsl(49 88% 72%); --ctev-yellow-500: hsl(60, 100%, 50%); --ctev-amber-50: hsl(42, 100%, 94%); --ctev-amber-300: hsl(40, 75%, 72%); --ctev-amber-800: hsl(43, 100%, 25%); --ctev-gold-300: hsl(45, 70%, 60%); --ctev-gold-400: hsl(48, 100%, 50%); --ctev-gold-500: hsl(35, 56%, 58%); --ctev-color-bootstrap-focus-rgb: 13, 110, 253; /*Currently used for user feedback button focus needs update to approved brand color*/ /* DEFAULT SEMANTIC COLORS */ --ctev-page-bg: var(--ctev-white); --ctev-text: var(--ctev-black); --ctev-heading-text: var(--ctev-black); --ctev-link: var(--ctev-blue); --ctev-navbar-bg: var(--ctev-white); --ctev-navbar-text: var(--ctev-black); --ctev-navbar-link: var(--ctev-black); --ctev-navbar-link-hover: var(--ctev-blue); --ctev-footer-bg: var(--ctev-deep-blue); --ctev-footer-text: var(--ctev-white); --ctev-footer-link: var(--ctev-teal-400); --ctev-panel-bg: var(--ctev-deep-blue-000); --ctev-home-heading-accent: var(--ctev-light-blue-500); --ctev-feedback-launcher-bg: var(--ctev-light-blue-500); --ctev-feedback-launcher-text: var(--ctev-white); --ctev-feedback-launcher-focus-ring: rgba(var(--ctev-color-bootstrap-focus-rgb), 0.45); --ctev-feedback-card-bg: var(--ctev-white); --ctev-feedback-card-border: rgba(var(--ctev-black-rgb), 0.1); --ctev-feedback-card-shadow: rgba(var(--ctev-black-rgb), 0.15); --ctev-feedback-star: var(--ctev-gray); --ctev-feedback-star-selected: var(--ctev-yellow-400); --ctev-feedback-star-focus-ring: rgba(var(--ctev-color-bootstrap-focus-rgb), 0.35); --ctev-feedback-hint-text: rgba(var(--ctev-black-rgb), 0.6); /* SEMANTIC TYPOGRAPHY */ --ctev-type-body-family: var(--ctev-font-primary); --ctev-type-heading-family: var(--ctev-font-display); --ctev-type-eyebrow-family: var(--ctev-font-display); --ctev-type-body-2xs-size: var(--ctev-font-size-12); --ctev-type-body-2xs-line-height: var(--ctev-line-height-150); --ctev-type-body-xs-size: var(--ctev-font-size-14); --ctev-type-body-xs-line-height: var(--ctev-line-height-150); --ctev-type-body-s-size: var(--ctev-font-size-16); --ctev-type-body-s-line-height: var(--ctev-line-height-150); --ctev-type-body-m-size: var(--ctev-font-size-20); --ctev-type-body-m-line-height: var(--ctev-line-height-140); --ctev-type-body-l-size: var(--ctev-font-size-24); --ctev-type-body-l-line-height: var(--ctev-line-height-140); --ctev-type-body-light-weight: var(--ctev-font-weight-light); --ctev-type-body-regular-weight: var(--ctev-font-weight-regular); --ctev-type-body-semibold-weight: var(--ctev-font-weight-semibold); --ctev-type-eyebrow-medium-caps-size: var(--ctev-font-size-12); --ctev-type-eyebrow-medium-caps-weight: var(--ctev-font-weight-medium); --ctev-type-eyebrow-medium-caps-line-height: var(--ctev-line-height-140); --ctev-type-eyebrow-medium-caps-letter-spacing: var(--ctev-letter-spacing-wide); --ctev-type-heading-2xs-size: var(--ctev-font-size-12); --ctev-type-heading-xs-size: var(--ctev-font-size-14); --ctev-type-heading-s-size: var(--ctev-font-size-16); --ctev-type-heading-m-size: var(--ctev-font-size-20); --ctev-type-heading-l-size: var(--ctev-font-size-24); --ctev-type-heading-xl-size: var(--ctev-font-size-28); --ctev-type-heading-2xl-size: var(--ctev-font-size-32); --ctev-type-heading-3xl-size: var(--ctev-font-size-40); --ctev-type-heading-4xl-size: var(--ctev-font-size-48); --ctev-type-heading-5xl-size: var(--ctev-font-size-56); --ctev-type-heading-xl-fluid-size: clamp(var(--ctev-font-size-24), calc(1.4286rem + 0.3571vw), var(--ctev-font-size-28)); --ctev-type-heading-2xl-fluid-size: clamp(var(--ctev-font-size-28), calc(1.6786rem + 0.3571vw), var(--ctev-font-size-32)); --ctev-type-heading-3xl-fluid-size: clamp(var(--ctev-font-size-32), calc(1.8571rem + 0.7143vw), var(--ctev-font-size-40)); --ctev-type-heading-4xl-fluid-size: clamp(var(--ctev-font-size-40), calc(2.3571rem + 0.7143vw), var(--ctev-font-size-48)); --ctev-type-heading-5xl-fluid-size: clamp(var(--ctev-font-size-48), calc(2.8571rem + 0.7143vw), var(--ctev-font-size-56)); --ctev-type-heading-2xs-weight: var(--ctev-font-weight-medium); --ctev-type-heading-xs-weight: var(--ctev-font-weight-medium); --ctev-type-heading-s-weight: var(--ctev-font-weight-medium); --ctev-type-heading-m-weight: var(--ctev-font-weight-medium); --ctev-type-heading-l-weight: var(--ctev-font-weight-semibold); --ctev-type-heading-xl-regular-weight: var(--ctev-font-weight-regular); --ctev-type-heading-xl-semibold-weight: var(--ctev-font-weight-semibold); --ctev-type-heading-2xl-weight: var(--ctev-font-weight-semibold); --ctev-type-heading-3xl-weight: var(--ctev-font-weight-semibold); --ctev-type-heading-4xl-weight: var(--ctev-font-weight-semibold); --ctev-type-heading-5xl-weight: var(--ctev-font-weight-semibold); --ctev-type-heading-2xs-line-height: var(--ctev-line-height-140); --ctev-type-heading-xs-line-height: var(--ctev-line-height-140); --ctev-type-heading-s-line-height: var(--ctev-line-height-140); --ctev-type-heading-m-line-height: var(--ctev-line-height-120); --ctev-type-heading-l-line-height: var(--ctev-line-height-120); --ctev-type-heading-xl-line-height: var(--ctev-line-height-120); --ctev-type-heading-2xl-line-height: var(--ctev-line-height-120); --ctev-type-heading-3xl-line-height: var(--ctev-line-height-120); --ctev-type-heading-4xl-line-height: var(--ctev-line-height-120); --ctev-type-heading-5xl-line-height: var(--ctev-line-height-120); --ctev-type-heading-letter-spacing: var(--ctev-letter-spacing-tight); /* SIMPLIFIED SEMEANTIC TOKENS */ --ctev-font-family-noto: var(--ctev-font-primary); --ctev-font-family-rubik: var(--ctev-font-display); --ctev-2xs-size: var(--ctev-font-size-12); --ctev-xs-size: var(--ctev-font-size-14); --ctev-s-size: var(--ctev-font-size-16); --ctev-m-size: var(--ctev-font-size-20); --ctev-l-size: var(--ctev-font-size-24); --ctev-xl-size: var(--ctev-font-size-28); --ctev-2xl-size: var(--ctev-font-size-32); --ctev-3xl-size: var(--ctev-font-size-40); --ctev-4xl-size: var(--ctev-font-size-48); --ctev-5xl-size: var(--ctev-font-size-56); --ctev-xs-fluid-size-clamp: clamp(var(--ctev-font-size-12), calc(0.7143rem + 0.1786vw), var(--ctev-font-size-14)); --ctev-s-fluid-size-clamp: clamp(var(--ctev-font-size-14), calc(0.8393rem + 0.1786vw), var(--ctev-font-size-16)); --ctev-m-fluid-size-clamp: clamp(var(--ctev-font-size-16), calc(0.9286rem + 0.3571vw), var(--ctev-font-size-20)); --ctev-l-fluid-size-clamp: clamp(var(--ctev-font-size-20), calc(1.1786rem + 0.3571vw), var(--ctev-font-size-24)); --ctev-xl-fluid-size-clamp: clamp(var(--ctev-font-size-24), calc(1.4286rem + 0.3571vw), var(--ctev-font-size-28)); --ctev-2xl-fluid-size-clamp: clamp(var(--ctev-font-size-28), calc(1.6786rem + 0.3571vw), var(--ctev-font-size-32)); --ctev-3xl-fluid-size-clamp: clamp(var(--ctev-font-size-32), calc(1.8571rem + 0.7143vw), var(--ctev-font-size-40)); --ctev-4xl-fluid-size-clamp: clamp(var(--ctev-font-size-40), calc(2.3571rem + 0.7143vw), var(--ctev-font-size-48)); --ctev-5xl-fluid-size-clamp: clamp(var(--ctev-font-size-48), calc(2.8571rem + 0.7143vw), var(--ctev-font-size-56)); /* NAVIGATION TYPOGRAPHY */ --ctev-type-nav-size: var(--ctev-font-size-16); --ctev-type-nav-weight: var(--ctev-font-weight-semibold); --ctev-type-nav-line-height: var(--ctev-line-height-150); /* SECTION TITLE TYPOGRAPHY */ --ctev-type-section-title-size: var(--ctev-font-size-24); --ctev-type-section-title-weight: var(--ctev-font-weight-semibold); --ctev-type-section-title-line-height: var(--ctev-line-height-140); /* PAGE TITLE TYPOGRAPHY */ --ctev-type-page-title-size: clamp(var(--ctev-font-size-28), 5vw, var(--ctev-font-size-56)); --ctev-type-page-title-fluid-size: clamp(var(--ctev-font-size-28), calc(1.25rem + 2.5vw), var(--ctev-font-size-56)); --ctev-type-page-title-weight: var(--ctev-font-weight-semibold); --ctev-type-page-title-line-height: var(--ctev-line-height-120); /* BODY TYPOGRAPHY */ --ctev-type-body-size: var(--ctev-type-body-s-size); --ctev-type-body-weight: var(--ctev-type-body-regular-weight); --ctev-type-body-line-height: var(--ctev-type-body-s-line-height); /* ICONS */ --ctev-icon-size: var(--ctev-font-size-24); --ctev-acceptance-rating-star: var(--ctev-gold-400); /* BOOTSTRAP BRIDGE: keep Bootstrap defaults aligned with current semantic tokens. */ --bs-body-font-family: var(--ctev-font-primary); --bs-body-color: var(--ctev-text); --bs-link-color: var(--ctev-link); --bs-link-hover-color: var(--ctev-link); } /* Fluid typography calc() reference Final CSS should use rem-based font tokens: clamp(MIN_FONT_REM, calc(INTERCEPTrem + SLOPEvw), MAX_FONT_REM) Work the math in px for clarity, then convert font values back to rem. Standard viewport range: MIN_VIEWPORT = 320px MAX_VIEWPORT = 1440px ROOT_FONT = 16px Inputs: MIN_FONT_REM = desired minimum font token/value in rem MAX_FONT_REM = desired maximum font token/value in rem Convert font inputs to px: MIN_FONT_PX = MIN_FONT_REM * ROOT_FONT MAX_FONT_PX = MAX_FONT_REM * ROOT_FONT Formula: SLOPE_PER_PX = (MAX_FONT_PX - MIN_FONT_PX) / (MAX_VIEWPORT - MIN_VIEWPORT) SLOPE_VW = SLOPE_PER_PX * 100 INTERCEPT_PX = MIN_FONT_PX - (SLOPE_PER_PX * MIN_VIEWPORT) INTERCEPT_REM = INTERCEPT_PX / ROOT_FONT Example: MIN_FONT_REM = 1.5rem / 24px MAX_FONT_REM = 2.5rem / 40px SLOPE_PER_PX = (40 - 24) / (1440 - 320) = 16 / 1120 = 0.0142857 SLOPE_VW = 0.0142857 * 100 = 1.4286vw INTERCEPT_PX = 24 - (0.0142857 * 320) = 19.4286px INTERCEPT_REM = 19.4286 / 16 = 1.2143rem Result: font-size: clamp(1.5rem, calc(1.2143rem + 1.4286vw), 2.5rem); Tokenized result: font-size: clamp( var(--ctev-font-size-24), calc(1.2143rem + 1.4286vw), var(--ctev-font-size-40) ); */