:root {
    /* Font Sizes */
    --bricks-font-size-100: 0.75rem; /* 12px */
    --bricks-font-size-200: 0.875rem; /* 14px */
    --bricks-font-size-300: 1rem; /* 16px */
    --bricks-font-size-400: 1.125rem; /* 18px */
    --bricks-font-size-500: 1.25rem; /* 20px */
    --bricks-font-size-600: 1.5rem; /* 24px */
    --bricks-font-size-700: 1.75rem; /* 28px */
    --bricks-font-size-800: 2rem; /* 32px */
    --bricks-font-size-900: 2.5rem; /* 40px */
    --bricks-font-size-1000: 3rem; /* 48px */
    /* Spacing */
    --bricks-spacing-010: 0.1rem; /* 1.6px */
    --bricks-spacing-015: 0.15rem; /* 2.4px */
    --bricks-spacing-020: 0.2rem; /* 3.2px */
    --bricks-spacing-025: 0.25rem; /* 4px */
    --bricks-spacing-050: 0.5rem; /* 8px */
    --bricks-spacing-075: 0.75rem; /* 12px */
    --bricks-spacing-100: 1rem; /* 16px */
    --bricks-spacing-125: 1.25rem; /* 20px */
    --bricks-spacing-150: 1.5rem; /* 24px */
    --bricks-spacing-175: 1.75rem; /* 28px */
    --bricks-spacing-200: 2rem; /* 32px */
    --bricks-spacing-225: 2.25rem; /* 36px */
    --bricks-spacing-250: 2.5rem; /* 40px */
    --bricks-spacing-275: 2.75rem; /* 44px */
    --bricks-spacing-300: 3rem; /* 48px */
    /* Border Radius */
    --bricks-border-radius-025: 0.25rem; /* 4px */
    --bricks-border-radius-050: 0.5rem; /* 8px */
    --bricks-border-radius-100: 1rem; /* 16px */
    --bricks-border-radius-200: 2rem; /* 32px */
    --bricks-border-radius-500: 6.25rem; /* 100px */
    --bricks-border-radius-1000: 8rem; /* 128px */
    /* Colors - HEX */
    --bricks-colors-legacy-primary-500: #efa41f;
    --bricks-colors-primary-300: #ebf1f3;
    --bricks-colors-primary-500: #00507d;
    --bricks-colors-primary-700: #003654;
    --bricks-colors-secondary-700: #fc5521;
    --bricks-colors-state-error-500: #e00000;
    --bricks-colors-state-warning-500: #ffb84d;
    --bricks-colors-state-success-500: #06c630;
    --bricks-colors-state-info-500: #00507d;
    --bricks-colors-state-error-500-contrast: #ffffff;
    --bricks-colors-state-warning-500-contrast: #000000;
    --bricks-colors-state-success-500-contrast: #ffffff;
    --bricks-colors-state-info-500-contrast: #ffffff;
    --bricks-colors-grayscale-100: #ffffff;
    --bricks-colors-grayscale-200: #fafafa;
    --bricks-colors-grayscale-300: #f5f5f5;
    --bricks-colors-grayscale-400: #f0f0f0;
    --bricks-colors-grayscale-500: #d9d9d9;
    --bricks-colors-grayscale-600: #bfbfbf;
    --bricks-colors-grayscale-700: #8c8c8c;
    --bricks-colors-grayscale-800: #595959;
    --bricks-colors-grayscale-900: #434343;
    --bricks-colors-grayscale-1000: #262626;
    --bricks-colors-grayscale-1100: #1f1f1f;
    --bricks-colors-grayscale-1200: #141414;
    --bricks-colors-grayscale-1300: #000000;
    --bricks-colors-highlight-500: #f6dbd3;
    /* Colors - RGB */
    --bricks-colors-legacy-primary-500-rgb: 239, 164, 31;
    --bricks-colors-primary-300-rgb: 235, 241, 243;
    --bricks-colors-state-error-500-rgb: 224, 0, 0;
    --bricks-colors-primary-700-rgb: 0, 54, 84;
    --bricks-colors-secondary-700-rgb: 252, 85, 33;
    --bricks-colors-state-error-500-rgb: 236, 58, 88;
    --bricks-colors-state-warning-500-rgb: 255, 184, 77;
    --bricks-colors-state-success-500-rgb: 6, 198, 48;
    --bricks-colors-state-info-500-rgb: 0, 80, 125;
    --bricks-colors-state-error-500-contrast-rgb: 255, 255, 255;
    --bricks-colors-state-warning-500-contrast-rgb: 0, 0, 0;
    --bricks-colors-state-success-500-contrast-rgb: 255, 255, 255;
    --bricks-colors-state-info-500-contrast-rgb: 255, 255, 255;
    --bricks-colors-grayscale-100-rgb: 255, 255, 255;
    --bricks-colors-grayscale-200-rgb: 250, 250, 250;
    --bricks-colors-grayscale-300-rgb: 245, 245, 245;
    --bricks-colors-grayscale-400-rgb: 240, 240, 240;
    --bricks-colors-grayscale-500-rgb: 217, 217, 217;
    --bricks-colors-grayscale-600-rgb: 191, 191, 191;
    --bricks-colors-grayscale-700-rgb: 140, 140, 140;
    --bricks-colors-grayscale-800-rgb: 89, 89, 89;
    --bricks-colors-grayscale-900-rgb: 67, 67, 67;
    --bricks-colors-grayscale-1000-rgb: 38, 38, 38;
    --bricks-colors-grayscale-1100-rgb: 31, 31, 31;
    --bricks-colors-grayscale-1200-rgb: 20, 20, 20;
    --bricks-colors-grayscale-1300-rgb: 0, 0, 0;
}
