// Darker background for primary actions or highlights $color-background-primary-darker: #003e82 !default; // Lighter background for primary actions or highlights $color-background-primary-lighter: #dceaf4 !default; // Darker background for destructive actions or highlights $color-background-destructive-darker: #921200 !default; // Lighter background for destructive actions or highlights $color-background-destructive-lighter: #f5dddd !default; // Warning background color $color-background-warning: #e46216 !default; // Lightest error background color $color-background-error-lightest: #fff6f6 !default; // Background for destructive actions or highlights $color-background-destructive: #cb0000 !default; // Background for primary actions or highlights $color-background-primary: #0075c3 !default; // Success background color $color-background-success: #00994a !default; // Background color for alternative striped rows $color-background-row-striped: #f8f8f9 !default; // Lightest success background color $color-background-success-lightest: #e0ffef !default; // Lightest background for destructive actions or highlights $color-background-destructive-lightest: #fff6f6 !default; // Lightest background for primary actions or highlights $color-background-primary-lightest: #f6fcff !default; // Primary brand background, accessible with inverse text $color-background-brand: #233659 !default; // Error background color $color-background-error: #cb0000 !default; // Dark background for destructive actions or highlights $color-background-destructive-dark: #b20600 !default; // Light background for destructive actions or highlights $color-background-destructive-light: #ecb6b6 !default; // Dark background for primary actions or highlights $color-background-primary-dark: #005ea6 !default; // Light background for primary actions or highlights $color-background-primary-light: #b3d3e9 !default; // Lightest warning background color $color-background-warning-lightest: #fff5eb !default; // Background color of the main page body $color-background-body: #ffffff !default; // Default background color for any container $color-background: #f8f8f9 !default; // Highlight brand background, accessible with black text $color-background-brand-highlight: #f22f46 !default; // Inverse background color for any container $color-background-inverse: #4f5355 !default; // Destructive focus border color $color-border-destructive-lighter: #f5dddd !default; // Lighter primary border color $color-border-primary-lighter: #dceaf4 !default; // Input hover border color $color-border-input-hover: #0075c3 !default; // Darker primary border color $color-border-primary-darker: #003e82 !default; // Warning border color $color-border-warning: #e46216 !default; // Destructive hover border color $color-border-destructive-darker: #921200 !default; // Destructive border color $color-border-destructive: #cb0000 !default; // Primary border color $color-border-primary: #0075c3 !default; // Success border color $color-border-success: #00994a !default; // Lightest error border color $color-border-error-lightest: #fff6f6 !default; // Dark border color $color-border-dark: #888c8e !default; // Lightest success border color $color-border-success-lightest: #e0ffef !default; // Error border color $color-border-error: #cb0000 !default; // Input border color $color-border-input: #888c8e !default; // Destructive focus border color $color-border-destructive-light: #ecb6b6 !default; // Light primary border color $color-border-primary-light: #b3d3e9 !default; // Default border color $color-border: #c8cccf !default; // Lightest warning border color $color-border-warning-lightest: #fff5eb !default; // Dark primary border color $color-border-primary-dark: #005ea6 !default; // Destructive focus border color $color-border-destructive-dark: #b20600 !default; // Input focus border color $color-border-input-focus: #0075c3 !default; // Light border color $color-border-light: #e4e7e9 !default; // Border radius reset $border-radius-0: 0 !default; // Small border radius $border-radius-10: 3px !default; // Large border radius $border-radius-20: 4px !default; // Larger border radius $border-radius-30: 8px !default; // Circular border radius $border-radius-circle: 50% !default; // Border width reset $border-width-0: 0 !default; // Small border width $border-width-10: 1px !default; // Large border width $border-width-20: 2px !default; // Shadow for cards. $shadow-card: 0 2px 4px 0 rgba(40, 42, 43, 0.3) !default; // Shadow for focus ring on interactive elements $shadow-focus: 0 0 0 4px rgba(0,117,195,0.5) !default; $font-family-text: 'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif !default; $font-family-code: 'Fira Mono', 'Courier New', Courier, monospace !default; // Constant typography token for font size 110 $font-size-110: 3rem !default; // Constant typography token for font size 100 $font-size-100: 2.5rem !default; // Constant typography token for font size 90 $font-size-90: 2rem !default; // Constant typography token for font size 80 $font-size-80: 1.75rem !default; // Constant typography token for font size 70 $font-size-70: 1.5rem !default; // Constant typography token for font size 60 $font-size-60: 1.25rem !default; // Constant typography token for font size 50 $font-size-50: 1.125rem !default; // Constant typography token for font size 40 $font-size-40: 1rem !default; // Constant typography token for font size 30 $font-size-30: 0.875rem !default; // Constant typography token for font size 20 $font-size-20: 0.75rem !default; // Constant typography token for font size 10 $font-size-10: 0.625rem !default; // Font weight for light weight $font-weight-light: 300 !default; // Font weight for normal weight $font-weight-normal: 400 !default; // Font weight for medium weight $font-weight-medium: 500 !default; // Font weight for semibold weight $font-weight-semibold: 600 !default; // Font weight for bold weight $font-weight-bold: 700 !default; // Constant line-height token for font size 110 $line-height-110: 3.75rem !default; // Constant line-height token for font size 90 $line-height-90: 2.5rem !default; // Constant line-height token for font size 100 $line-height-100: 3.25rem !default; // Constant line-height token for font size 80 $line-height-80: 2.25rem !default; // Constant line-height token for font size 70 $line-height-70: 2rem !default; // Constant line-height token for font size 60 $line-height-60: 1.75rem !default; // Constant line-height token for font size 50 $line-height-50: 1.75rem !default; // Constant line-height token for font size 40 $line-height-40: 1.75rem !default; // Constant line-height token for font size 30 $line-height-30: 1.5rem !default; // Constant line-height token for font size 20 $line-height-20: 1.25rem !default; // Constant line-height token for font size 10 $line-height-10: 1rem !default; // Twilio brand red $color-brand-highlight: #f22f46 !default; // Gray Color 0 $color-gray-0: #ffffff !default; // Gray Color 10 $color-gray-100: #282a2b !default; // Gray Color 9 $color-gray-90: #424547 !default; // Gray Color 8 $color-gray-80: #4f5355 !default; // Gray Color 7 $color-gray-70: #666a6d !default; // Gray Color 6 $color-gray-60: #888c8e !default; // Gray Color 5 $color-gray-50: #c8cccf !default; // Gray Color 4 $color-gray-40: #e4e7e9 !default; // Default branding color $color-brand: #233659 !default; // Gray Color 3 $color-gray-30: #f2f3f4 !default; // Gray Color 2 $color-gray-20: #f8f8f9 !default; // Gray Color 1 $color-gray-10: #fafafa !default; // Generic sizing token scale for UI components. $size-90: 57.5rem !default; // Generic sizing token scale for UI components. $size-120: 77rem !default; // Generic sizing token scale for UI components. $size-80: 51rem !default; // Generic sizing token scale for UI components. $size-0: 0 !default; // Generic sizing token scale for UI components. $size-110: 70.5rem !default; // Generic sizing token scale for UI components. $size-70: 44.5rem !default; // Generic sizing token scale for UI components. $size-100: 64rem !default; // Icon sizing token $size-icon-30: 2rem !default; // Generic sizing token scale for UI components. $size-60: 38rem !default; // Icon sizing token $size-icon-20: 1.5rem !default; // Icon sizing token $size-icon-10: 1rem !default; // Generic sizing token scale for UI components. $size-50: 31.5rem !default; // Generic sizing token scale for UI components. $size-40: 25rem !default; // Generic sizing token scale for UI components. $size-30: 18.5rem !default; // Generic sizing token scale for UI components. $size-20: 12rem !default; // Generic sizing token scale for UI components. $size-10: 5.5rem !default; $space-70: 1.5rem !default; $space-60: 1.25rem !default; $space-190: 4.5rem !default; $space-50: 1rem !default; $space-180: 4.25rem !default; $space-40: 0.75rem !default; $space-170: 4rem !default; $space-30: 0.5rem !default; $space-160: 3.75rem !default; $space-20: 0.25rem !default; $space-150: 3.5rem !default; $space-10: 0.125rem !default; $space-140: 3.25rem !default; $space-130: 3rem !default; $space-120: 2.75rem !default; $space-110: 2.5rem !default; $space-0: 0 !default; $space-100: 2.25rem !default; $space-200: 4.75rem !default; $space-90: 2rem !default; $space-80: 1.75rem !default; // Darker shade of link text to be used in interactions $color-text-link-darker: #003e82 !default; // Destructive link text $color-text-link-destructive: #cb0000 !default; // Color for warning text. $color-text-warning: #e46216 !default; // Weak inverse text color for dark backgrounds $color-text-inverse-weak: #888c8e !default; // Darker shade of destructive link text to be used in interactions $color-text-link-destructive-darker: #921200 !default; // Text color for success text. $color-text-success: #00994a !default; // Weak body text for visual hierarchy. $color-text-weak: #666a6d !default; // Light shade of destructive link text to be used in interactions $color-text-link-destructive-light: #ecb6b6 !default; // Default icon color. $color-text-icon: #282a2b !default; // Link text $color-text-link: #0075c3 !default; // Error text for inputs and error misc $color-text-error: #cb0000 !default; // Dark shade of link text to be used in interactions $color-text-link-dark: #005ea6 !default; // Text color used on any brand color $color-text-brand-inverse: #ffffff !default; // Body text color $color-text: #282a2b !default; // Twilio brand red, accessible on large text only. $color-text-brand-highlight: #f22f46 !default; // Light shade of link text to be used in interactions $color-text-link-light: #b3d3e9 !default; // Inverse text color for dark backgrounds $color-text-inverse: #ffffff !default; // Input placeholder text. $color-text-placeholder: #666a6d !default; // Dark shade of destructive link text to be used in interactions $color-text-link-destructive-dark: #b20600 !default; // Text color for field labels. $color-text-label: #282a2b !default; $z-index-0: 0 !default; $z-index-90: 90 !default; $z-index-80: 80 !default; $z-index-70: 70 !default; $z-index-60: 60 !default; $z-index-50: 50 !default; $z-index-40: 40 !default; $z-index-30: 30 !default; $z-index-20: 20 !default; $z-index-10: 10 !default;