
:root {
    /* PRIMARY COLORS */
    --color-foreground-values: 0, 0%, 5%;
    --color-foreground: hsl(var(--color-foreground-values));
    --color-background-values: 0, 0%, 59%;
    --color-background: hsl(var(--color-background-values));
    --color-accent-values: 0, 100%, 41%;
    --color-accent: hsl(var(--color-accent-values));

    /* COLOR SHADES */
    --foreground-01-values: 0, 0%, 5%;
    --foreground-02-values: 0, 0%, 5%;
    --foreground-03-values: 0, 0%, 12%;
    --foreground-04-values: 0, 0%, 24%;
    --foreground-05-values: 0, 0%, 36%;
    --foreground-01: hsl(var(--foreground-01-values));
    --foreground-02: hsl(var(--foreground-02-values));
    --foreground-03: hsl(var(--foreground-03-values));
    --foreground-04: hsl(var(--foreground-04-values));
    --foreground-05: hsl(var(--foreground-05-values));

    --background-01-values: 0, 0%, 68%;
    --background-02-values: 0, 0%, 77%;
    --background-03-values: 0, 0%, 86%;
    --background-04-values: 0, 0%, 95%;
    --background-05-values: 0, 0%, 98%;
    --background-01: hsl(var(--background-01-values));
    --background-02: hsl(var(--background-02-values));
    --background-03: hsl(var(--background-03-values));
    --background-04: hsl(var(--background-04-values));
    --background-05: hsl(var(--background-05-values));

    --accent-01-values: 0, 100%, 50%;
    --accent-02-values: 0, 100%, 59%;
    --accent-03-values: 0, 100%, 68%;
    --accent-04-values: 0, 100%, 77%;
    --accent-05-values: 0, 100%, 86%;
    --accent-01: hsl(var(--accent-01-values));
    --accent-02: hsl(var(--accent-02-values));
    --accent-03: hsl(var(--accent-03-values));
    --accent-04: hsl(var(--accent-04-values));
    --accent-05: hsl(var(--accent-05-values));

    --accent-contrast-values: 0deg, 0%, 100%; 
    --accent-contrast: hsl(var(--accent-contrast-values));
    

    /* FONTS */
    --ff-heading: 'Fira Sans', sans-serif;
    --fw-heading: 700;
    --ff-text: 'Fira Sans', sans-serif;
    --fw-text: 400;

    /* FONT SIZES */
    --body-text-size: 16px;
   

    /* GRID WIDTH */
    --inner-content-width: 1250px;
    --inner-header-width: 1250px;
    --inner-footer-width: 1250px;

    /* Border RADIUS */
    --border-radius-s: 4px;
    --border-radius-m: 6px;
    --border-radius-l: 10px;
}