CSS Variable Reference

--fr-borderWidths-md: 1px;
--fr-colors-black: hsl(0 0% 0%);
--fr-colors-white: hsl(0 0% 100%);
--fr-colors-blue-100: hsl(213 100% 5%);
--fr-colors-blue-200: hsl(213 100% 10%);
--fr-colors-blue-300: hsl(213 100% 20%);
--fr-colors-blue-400: hsl(213 100% 35%);
--fr-colors-blue-500: hsl(213 100% 50%);
--fr-colors-blue-600: hsl(213 100% 65%);
--fr-colors-blue-700: hsl(213 100% 80%);
--fr-colors-blue-800: hsl(213 100% 95%);
--fr-colors-blue-900: hsl(213 100% 98%);
--fr-colors-gray-100: hsl(220 10% 5%);
--fr-colors-gray-200: hsl(220 10% 10%);
--fr-colors-gray-300: hsl(220 10% 20%);
--fr-colors-gray-400: hsl(220 10% 35%);
--fr-colors-gray-500: hsl(220 10% 50%);
--fr-colors-gray-600: hsl(220 10% 65%);
--fr-colors-gray-700: hsl(220 10% 80%);
--fr-colors-gray-800: hsl(220 10% 95%);
--fr-colors-gray-900: hsl(220 10% 98%);
--fr-colors-green-100: hsl(141 90% 5%);
--fr-colors-green-200: hsl(141 90% 10%);
--fr-colors-green-300: hsl(141 90% 20%);
--fr-colors-green-400: hsl(141 90% 35%);
--fr-colors-green-500: hsl(141 90% 40%);
--fr-colors-green-600: hsl(141 90% 65%);
--fr-colors-green-700: hsl(141 90% 80%);
--fr-colors-green-800: hsl(141 90% 95%);
--fr-colors-green-900: hsl(141 90% 98%);
--fr-colors-red-100: hsl(9 90% 5%);
--fr-colors-red-200: hsl(9 90% 10%);
--fr-colors-red-300: hsl(9 90% 20%);
--fr-colors-red-400: hsl(9 90% 35%);
--fr-colors-red-500: hsl(9 90% 60%);
--fr-colors-red-600: hsl(9 90% 65%);
--fr-colors-red-700: hsl(9 90% 80%);
--fr-colors-red-800: hsl(9 90% 95%);
--fr-colors-red-900: hsl(9 90% 98%);
--fr-colors-yellow-100: hsl(50 90% 5%);
--fr-colors-yellow-200: hsl(50 90% 10%);
--fr-colors-yellow-300: hsl(50 90% 20%);
--fr-colors-yellow-400: hsl(50 90% 35%);
--fr-colors-yellow-500: hsl(50 90% 60%);
--fr-colors-yellow-600: hsl(50 90% 65%);
--fr-colors-yellow-700: hsl(50 90% 80%);
--fr-colors-yellow-800: hsl(50 90% 95%);
--fr-colors-yellow-900: hsl(50 90% 98%);
--fr-colors-gray100: hsl(220 10% 5%);
--fr-colors-gray200: hsl(220 10% 10%);
--fr-colors-gray300: hsl(220 10% 20%);
--fr-colors-gray400: hsl(220 10% 35%);
--fr-colors-gray500: hsl(220 10% 50%);
--fr-colors-gray600: hsl(220 10% 65%);
--fr-colors-gray700: hsl(220 10% 80%);
--fr-colors-gray800: hsl(220 10% 95%);
--fr-colors-gray900: hsl(220 10% 98%);
--fr-colors-blue400: hsl(213 100% 35%);
--fr-colors-blue500: hsl(213 100% 50%);
--fr-colors-blue800: hsl(213 100% 95%);
--fr-colors-blue900: hsl(213 100% 98%);
--fr-colors-green400: hsl(213 100% 35%);
--fr-colors-green500: hsl(141 90% 40%);
--fr-colors-green800: hsl(141 90% 95%);
--fr-colors-red500: hsl(9 90% 60%);
--fr-colors-transparent: #FFFFFF00;
--fr-colors-inherit: inherit;
--fr-colors-negative-100: var(--fr-colors-red-100);
--fr-colors-negative-200: var(--fr-colors-red-200);
--fr-colors-negative-300: var(--fr-colors-red-300);
--fr-colors-negative-400: var(--fr-colors-red-400);
--fr-colors-negative-500: var(--fr-colors-red-500);
--fr-colors-negative-600: var(--fr-colors-red-600);
--fr-colors-negative-700: var(--fr-colors-red-700);
--fr-colors-negative-800: var(--fr-colors-red-800);
--fr-colors-negative-900: var(--fr-colors-red-900);
--fr-colors-negative-background: var(--fr-colors-negative-500);
--fr-colors-negative-border: var(--fr-colors-negative-500);
--fr-colors-negative-foreground: var(--fr-colors-white);
--fr-colors-negative-surface: var(--fr-colors-negative-500);
--fr-colors-negative-active-background: var(--fr-colors-negative-400);
--fr-colors-negative-active-border: var(--fr-colors-negative-400);
--fr-colors-negative-active-foreground: var(--fr-colors-white);
--fr-colors-negative-active-surface: var(--fr-colors-negative-400);
--fr-colors-negative-focus-background: var(--fr-colors-negative-500);
--fr-colors-negative-focus-border: var(--fr-colors-negative-500);
--fr-colors-negative-focus-foreground: var(--fr-colors-white);
--fr-colors-negative-focus-surface: var(--fr-colors-negative-500);
--fr-colors-negative-hover-background: var(--fr-colors-negative-400);
--fr-colors-negative-hover-border: var(--fr-colors-negative-400);
--fr-colors-negative-hover-foreground: var(--fr-colors-white);
--fr-colors-negative-hover-surface: var(--fr-colors-negative-400);
--fr-colors-neutral-100: var(--fr-colors-gray-100);
--fr-colors-neutral-200: var(--fr-colors-gray-200);
--fr-colors-neutral-300: var(--fr-colors-gray-300);
--fr-colors-neutral-400: var(--fr-colors-gray-400);
--fr-colors-neutral-500: var(--fr-colors-gray-500);
--fr-colors-neutral-600: var(--fr-colors-gray-600);
--fr-colors-neutral-700: var(--fr-colors-gray-700);
--fr-colors-neutral-800: var(--fr-colors-gray-800);
--fr-colors-neutral-900: var(--fr-colors-gray-900);
--fr-colors-neutral-background: var(--fr-colors-white);
--fr-colors-neutral-border: var(--fr-colors-neutral-800);
--fr-colors-neutral-foreground: var(--fr-colors-black);
--fr-colors-neutral-surface: var(--fr-colors-neutral-700);
--fr-colors-neutral-active-background: var(--fr-colors-white);
--fr-colors-neutral-active-border: var(--fr-colors-neutral-900);
--fr-colors-neutral-active-foreground: var(--fr-colors-black);
--fr-colors-neutral-active-surface: var(--fr-colors-neutral-700);
--fr-colors-neutral-focus-background: var(--fr-colors-white);
--fr-colors-neutral-focus-border: var(--fr-colors-neutral-900);
--fr-colors-neutral-focus-foreground: var(--fr-colors-black);
--fr-colors-neutral-focus-surface: var(--fr-colors-neutral-700);
--fr-colors-neutral-hover-background: var(--fr-colors-white);
--fr-colors-neutral-hover-border: var(--fr-colors-neutral-900);
--fr-colors-neutral-hover-foreground: var(--fr-colors-black);
--fr-colors-neutral-hover-surface: var(--fr-colors-neutral-700);
--fr-colors-positive-100: var(--fr-colors-green-100);
--fr-colors-positive-200: var(--fr-colors-green-200);
--fr-colors-positive-300: var(--fr-colors-green-300);
--fr-colors-positive-400: var(--fr-colors-green-400);
--fr-colors-positive-500: var(--fr-colors-green-500);
--fr-colors-positive-600: var(--fr-colors-green-600);
--fr-colors-positive-700: var(--fr-colors-green-700);
--fr-colors-positive-800: var(--fr-colors-green-800);
--fr-colors-positive-900: var(--fr-colors-green-900);
--fr-colors-positive-background: var(--fr-colors-positive-500);
--fr-colors-positive-border: var(--fr-colors-positive-500);
--fr-colors-positive-foreground: var(--fr-colors-white);
--fr-colors-positive-surface: var(--fr-colors-positive-500);
--fr-colors-positive-active-background: var(--fr-colors-positive-400);
--fr-colors-positive-active-border: var(--fr-colors-positive-400);
--fr-colors-positive-active-foreground: var(--fr-colors-white);
--fr-colors-positive-active-surface: var(--fr-colors-positive-400);
--fr-colors-positive-focus-background: var(--fr-colors-positive-500);
--fr-colors-positive-focus-border: var(--fr-colors-positive-500);
--fr-colors-positive-focus-foreground: var(--fr-colors-white);
--fr-colors-positive-focus-surface: var(--fr-colors-positive-500);
--fr-colors-positive-hover-background: var(--fr-colors-positive-400);
--fr-colors-positive-hover-border: var(--fr-colors-positive-400);
--fr-colors-positive-hover-foreground: var(--fr-colors-white);
--fr-colors-positive-hover-surface: var(--fr-colors-positive-400);
--fr-colors-primary-100: var(--fr-colors-blue-100);
--fr-colors-primary-200: var(--fr-colors-blue-200);
--fr-colors-primary-300: var(--fr-colors-blue-300);
--fr-colors-primary-400: var(--fr-colors-blue-400);
--fr-colors-primary-500: var(--fr-colors-blue-500);
--fr-colors-primary-600: var(--fr-colors-blue-600);
--fr-colors-primary-700: var(--fr-colors-blue-700);
--fr-colors-primary-800: var(--fr-colors-blue-800);
--fr-colors-primary-900: var(--fr-colors-blue-900);
--fr-colors-primary-background: var(--fr-colors-primary-500);
--fr-colors-primary-border: var(--fr-colors-primary-500);
--fr-colors-primary-foreground: var(--fr-colors-white);
--fr-colors-primary-surface: var(--fr-colors-primary-500);
--fr-colors-primary-active-background: var(--fr-colors-primary-400);
--fr-colors-primary-active-border: var(--fr-colors-primary-400);
--fr-colors-primary-active-foreground: var(--fr-colors-white);
--fr-colors-primary-active-surface: var(--fr-colors-primary-400);
--fr-colors-primary-focus-background: var(--fr-colors-primary-500);
--fr-colors-primary-focus-border: var(--fr-colors-primary-500);
--fr-colors-primary-focus-foreground: var(--fr-colors-white);
--fr-colors-primary-focus-surface: var(--fr-colors-primary-500);
--fr-colors-primary-hover-background: var(--fr-colors-primary-400);
--fr-colors-primary-hover-border: var(--fr-colors-primary-400);
--fr-colors-primary-hover-foreground: var(--fr-colors-white);
--fr-colors-primary-hover-surface: var(--fr-colors-primary-400);
--fr-colors-secondary-100: var(--fr-colors-gray-100);
--fr-colors-secondary-200: var(--fr-colors-gray-200);
--fr-colors-secondary-300: var(--fr-colors-gray-300);
--fr-colors-secondary-400: var(--fr-colors-gray-400);
--fr-colors-secondary-500: var(--fr-colors-gray-500);
--fr-colors-secondary-600: var(--fr-colors-gray-600);
--fr-colors-secondary-700: var(--fr-colors-gray-700);
--fr-colors-secondary-800: var(--fr-colors-gray-800);
--fr-colors-secondary-900: var(--fr-colors-gray-900);
--fr-colors-secondary-background: var(--fr-colors-white);
--fr-colors-secondary-border: var(--fr-colors-secondary-800);
--fr-colors-secondary-foreground: var(--fr-colors-black);
--fr-colors-secondary-surface: var(--fr-colors-secondary-900);
--fr-colors-secondary-active-background: var(--fr-colors-secondary-900);
--fr-colors-secondary-active-border: var(--fr-colors-secondary-800);
--fr-colors-secondary-active-foreground: var(--fr-colors-black);
--fr-colors-secondary-active-surface: var(--fr-colors-secondary-800);
--fr-colors-secondary-focus-background: var(--fr-colors-secondary-900);
--fr-colors-secondary-focus-border: var(--fr-colors-secondary-800);
--fr-colors-secondary-focus-foreground: var(--fr-colors-black);
--fr-colors-secondary-focus-surface: var(--fr-colors-secondary-900);
--fr-colors-secondary-hover-background: var(--fr-colors-secondary-900);
--fr-colors-secondary-hover-border: var(--fr-colors-secondary-800);
--fr-colors-secondary-hover-foreground: var(--fr-colors-black);
--fr-colors-secondary-hover-surface: var(--fr-colors-secondary-800);
--fr-fontFamilies-default: inherit;
--fr-fontSizes-xs: 12px;
--fr-fontSizes-sm: 14px;
--fr-fontSizes-md: 16px;
--fr-fontSizes-lg: 18px;
--fr-fontSizes-xl: 20px;
--fr-fontSizes-2xl: 24px;
--fr-fontSizes-3xl: 30px;
--fr-fontSizes-4xl: 36px;
--fr-fontSizes-5xl: 48px;
--fr-fontWeights-thin: 100;
--fr-fontWeights-extralight: 200;
--fr-fontWeights-light: 300;
--fr-fontWeights-regular: 400;
--fr-fontWeights-medium: 500;
--fr-fontWeights-demibold: 600;
--fr-fontWeights-bold: 700;
--fr-fontWeights-extrabold: 800;
--fr-fontWeights-black: 900;
--fr-letterSpacings-md: 0.02em;
--fr-lineHeights-xs: 18px;
--fr-lineHeights-sm: 22px;
--fr-lineHeights-md: 24px;
--fr-lineHeights-lg: 26px;
--fr-lineHeights-xl: 30px;
--fr-lineHeights-2xl: 38px;
--fr-lineHeights-3xl: 46px;
--fr-lineHeights-4xl: 60px;
--fr-radii-md: 8px;
--fr-radii-lg: 20px;
--fr-radii-round: 50%;
--fr-shadows-md: 0px 4px 20px rgba(0, 0, 0, 0.1);
--fr-space-0: 0px;
--fr-space-1: 4px;
--fr-space-2: 8px;
--fr-space-3: 12px;
--fr-space-4: 16px;
--fr-space-5: 20px;
--fr-space-6: 24px;
--fr-space-7: 28px;
--fr-space-8: 32px;
--fr-space-9: 36px;
--fr-space-10: 40px;
--fr-space-11: 44px;
--fr-space-12: 48px;
--fr-space-13: 52px;
--fr-space-14: 56px;
--fr-space-15: 60px;
--fr-space-16: 64px;
--fr-space-17: 68px;
--fr-space-18: 72px;
--fr-space-19: 76px;
--fr-space-20: 80px;
--fr-space--20: -80px;
--fr-space--19: -76px;
--fr-space--18: -72px;
--fr-space--17: -68px;
--fr-space--16: -64px;
--fr-space--15: -60px;
--fr-space--14: -56px;
--fr-space--13: -52px;
--fr-space--12: -48px;
--fr-space--11: -44px;
--fr-space--10: -40px;
--fr-space--9: -36px;
--fr-space--8: -32px;
--fr-space--7: -28px;
--fr-space--6: -24px;
--fr-space--5: -20px;
--fr-space--4: -16px;
--fr-space--3: -12px;
--fr-space--2: -8px;
--fr-space--1: -4px;
--fr-space-auto: auto;
--fr-space--0-5: -2px;
--fr-space-0-5: 2px;