:root {
    /* --title-font: "HVD_poster", sans-serif; */
    --title-font: "Futura";
    --strap-font: "Futura",
        sans-serif;
    --body-font: "Futura", sans-serif;

    --color-white: white;

    --color-black: #222222;
    --color-accent: var(--color-trad-red);
    --colorPrimary-h: 344;
    --colorPrimary-s: 100%;
    --colorPrimary-l: 39%;
    --lighten-percentage: 20%;
    --darken-precentage: 15%;

    --color-secondary: #4b0b0b;
    --color-tertiary: 0C1844;

    --color-trad-green: #8cc63e;
    --color-trad-red: #ed1d27;


    /* --color-accent: hsl(var(--colorPrimary-h), var(--colorPrimary-s), var(--colorPrimary-l)); */
    --color-accent-light: hsl(var(--colorPrimary-h), var(--colorPrimary-s), calc(var(--colorPrimary-l) + var(--lighten-percentage)));
    --color-accent-lighter: hsl(var(--colorPrimary-h), var(--colorPrimary-s), calc(var(--colorPrimary-l) + calc(2*var(--lighten-percentage))));
    --color-accent-dark: hsl(var(--colorPrimary-h), var(--colorPrimary-s), calc(var(--colorPrimary-l) - var(--darken-precentage)));
    --color-accent-darker: hsl(var(--colorPrimary-h), var(--colorPrimary-s), calc(var(--colorPrimary-l) - calc(2*var(--darken-precentage))));
    /* A deeper shade for contrast */

    /* Greys for Neutral Elements */
    --color-grey-light-1: #fdfcfb;
    --color-grey-light-2: #f7f5f2;
    --color-grey-light-3: #eceae5;
    --color-grey-light-4: #bfbfbf;
    /* Softer grey for balance */
    --color-grey-dark-1: #505050;
    --color-grey-dark-2: #696969;
    --color-grey-dark-3: #8f8f8f;

    /* Accent Colors */

    --color-ocean: #07a0ae;
    /* Coastal ocean blue to evoke the sea */
    --color-ocean-light: #00ffe5;
    /* Lighter seafoam for gentle highlights */

    /* Shadows */
    --shadow-light: 0 0.4em 0.9em rgba(20, 20, 20, 0.15);
    /* Subtle shadows */
    --shadow-dark: 0 0.4em 0.4em rgba(0, 0, 0, 0.25);
    --shadow-hover: 0 0.9em 0.9em rgba(0, 0, 0, 0.15);

    /* Gradients */
    --gradient-1: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(239, 239, 239) 20%);
    /* --gradient-2: linear-gradient(0deg, var(--color-accent) 0%, var(--color-accent-light) 100%); */
    --gradient-2: linear-gradient(0deg, var(--color-trad-red) 0%, var(--color-trad-red) 100%);
    --gradient-3: linear-gradient(45deg, var(--color-white) 0%, white 100%);

    --gradient-water: linear-gradient(0deg, var(--color-ocean) 5%, var(--color-ocean-light) 10%, white 100%);
    --gradient-hero: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.1) 100%);

    /* Font Sizes */
    --h1: 4rem;
    --large-font: 5rem;
    --med-font: 2.3rem;
    --small-font: 1rem;

    /* Padding */
    --section-padding: 6em 4rem;

    /* Test box for development */
    --test-box: solid 1px red;



    --font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

}