Variables CSS

variables.css

:root{
  --box-shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--box-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--box-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--box-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
--box-shadow-outline: 0 0 0 3px rgba(66, 153, 225, 0.5);
--box-shadow-none: none;
--background-100: #f7fafc;
--background-200: #edf2f7;
--background-300: #e2e8f0;
--background-400: #cbd5e0;
--background-500: #a0aec0;
--background-600: #718096;
--background-700: #4a5568;
--background-800: #2d3748;
--background-900: #1a202c;
--background-100: #ebf8ff;
--background-200: #bee3f8;
--background-300: #90cdf4;
--background-400: #63b3ed;
--background-500: #4299e1;
--background-600: #3182ce;
--background-700: #2b6cb0;
--background-800: #2c5282;
--background-900: #2a4365;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
--font-size-6xl: 4rem;
--font-weight-hairline: 100;
--font-weight-thin: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
--opacity-0: 0;
--opacity-25: 0.25;
--opacity-50: 0.5;
--opacity-75: 0.75;
--opacity-100: 1;
--padding-0: 0px;
--padding-1: 8px;
--padding-2: 16px;
--padding-3: 32px;
--padding-4: 64px;
--padding-5: 128px;
--padding-6: 192px; 
}