:root {
    /* PRIMARY COLORS */
    --color-foreground-values: 167, 33%, 5%;
    --color-foreground: hsl(var(--color-foreground-values));
    --color-background-values: 0, 0%, 84%;
    --color-background: hsl(var(--color-background-values));
    --color-accent-values: 169, 100%, 8%;
    --color-accent: hsl(var(--color-accent-values));

    /* COLOR SHADES */
    --foreground-01-values: 167, 33%, 5%;
    --foreground-02-values: 167, 33%, 11%;
    --foreground-03-values: 167, 33%, 23%;
    --foreground-04-values: 167, 33%, 35%;
    --foreground-05-values: 167, 33%, 47%;
    --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%, 90%;
    --background-02-values: 0, 0%, 96%;
    --background-03-values: 0, 0%, 98%;
    --background-04-values: 0, 0%, 98%;
    --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: 169, 100%, 20%;
    --accent-02-values: 169, 100%, 32%;
    --accent-03-values: 169, 100%, 44%;
    --accent-04-values: 169, 100%, 56%;
    --accent-05-values: 169, 100%, 68%;
    --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: 'barlow-v12-latin', sans-serif;
    --fw-heading: 700;
    --ff-text: 'quicksand-v36-latin', sans-serif;
    --fw-text: 400;
    --fw-boldtext: 700;

    /* FONT SIZES */
    --reset-font-size: 18px;
    --body-text-size: 18px;
    --headline-xs: clamp(var(--body-text-size), 3vw, calc(var(--body-text-size) * 1.2));
    --headline-s: clamp(calc(var(--body-text-size) * 1.2), 3.5vw, calc(var(--body-text-size) * 1.4));
    --headline-m: clamp(calc(var(--body-text-size) * 1.45), 4vw, calc(var(--body-text-size) * 2));
    --headline-l: clamp(calc(var(--body-text-size) * 2), 5vw, calc(var(--body-text-size) * 2.6));
    --headline-xl: clamp(calc(var(--body-text-size) * 2.2), 6vw, calc(var(--body-text-size) * 3.16666));
    --headline-xxl: clamp(calc(var(--body-text-size) * 2.4), 8vw, calc(var(--body-text-size) * 3.2));

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

    /* Border RADIUS */
    --border-radius-size: 6px;
    --border-radius-s: calc(var(--border-radius-size) * 2 / 3); /* 4px */
    --border-radius-m: var(--border-radius-size); /* 6px */
    --border-radius-l: calc(var(--border-radius-size) * 5 / 3); /* 10px */
    --border-radius-xl: calc(var(--border-radius-size) * 500);


}
    /* Fluent Forms Overrides with higher specificity */
    .fluentform {
        --fluentform-border-radius: var(--border-radius-m);
        --fluentform-primary: var(--accent-02);
        --fluentform-secondary: var(--color-foreground);
        --fluentform-border-color: hsla(var(--foreground-01-values), 0.15);
}