/* Open Sans */

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSans-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSans-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSans-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSans-BoldItalic.woff") format("woff");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSans-Italic.woff") format("woff");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Open Sans Condensed";
    src: url("../fonts/OpenSans_Condensed-Italic.woff") format("woff");
    font-weight: 400;
    font-style: italic;
}

/* Baskerville */

@font-face {
    font-family: "Baskervville";
    src: url("../fonts/Baskervville-Italic.woff") format("woff");
    font-weight: 400;
    font-style: italic;
}

html {
    scroll-behavior: smooth;
}


:root {
    /* Foundation */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-deep-petrol: #1B434C;
    --color-ivory: #F7F4EE;
    --color-sand: #D5C0A5;

    /* Pink */
    --pink-100: #FCE5F2;
    --pink-150: #F7B2D8;
    --pink-200: #F599CB;
    --pink-300: #F066B2;
    --pink-400: #EB3398;
    --pink-500: #E6007E;
    --pink-600: #B80065;
    --pink-700: #8A004C;
    --pink-800: #5C0032;
    --pink-900: #2E0019;
    --pink-950: #17000D;

    /* Grey */
    --grey-100: #F6F6F6;
    --grey-150: #F1F1F1;
    --grey-200: #EDEDED;
    --grey-300: #E5E5E5;
    --grey-400: #DCDCDC;
    --grey-500: #D3D3D3;
    --grey-600: #A9A9A9;
    --grey-700: #7F7F7F;
    --grey-800: #545454;
    --grey-900: #2A2A2A;
    --grey-950: #151515;

    /* Red */
    --red-100: #F8D7CE;
    --red-150: #F5C2B5;
    --red-200: #F2AE9D;
    --red-300: #EB866D;
    --red-400: #E55D3C;
    --red-500: #DE350B;
    --red-600: #B22A09;
    --red-700: #852007;
    --red-800: #591504;
    --red-900: #2C0B02;
    --red-950: #160501;

    /* Green */
    --green-100: #CCE7DE;
    --green-150: #B2DBCD;
    --green-200: #99CFBD;
    --green-300: #66B79C;
    --green-400: #339F7B;
    --green-500: #00875A;
    --green-600: #006C48;
    --green-700: #005136;
    --green-800: #003624;
    --green-900: #001B12;
    --green-950: #000E09;

    /* Spacing Scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-28: 112px;
    --space-32: 128px;
    --space-36: 144px;
    --space-40: 160px;
    --space-48: 192px;

    /* Typography */
    --font-family-primary: "Open Sans", sans-serif;
    --font-family-secondary: "Open Sans Condensed", sans-serif;
    --font-family-display: "Baskerville", serif;

    /* Font Weights */
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

/* Font Sizes */
--text-h1: clamp(2.5rem, 2rem + 1vw, 3rem);                    /* 40px → 48px */
--text-h2: clamp(2rem, 1.75rem + 0.8vw, 2.5rem);               /* 32px → 40px */
--text-h3: clamp(1.75rem, 1.65rem + 0.6vw, 2rem);              /* 28px → 32px */
--text-h4: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem);            /* 24px → 28px */
--text-h5: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);            /* 20px → 24px */
--text-h6: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);          /* 18px → 20px */
--text-body-lg: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);        /* 16px → 18px */
--text-body: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);          /* 15px → 16px */
--text-body-sm: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem);  /* 13px → 14px */
--text-caption: clamp(0.6875rem, 0.67rem + 0.08vw, 0.75rem);   /* 11px → 12px */


/* Line-Heights */
--leading-h1: clamp(3rem, 2.75rem + 0.8vw, 3.5rem);             /* 48px → 56px */
--leading-h2: clamp(2.5rem, 2.3rem + 0.6vw, 3rem);              /* 40px → 48px */
--leading-h3: clamp(2rem, 1.85rem + 0.5vw, 2.5rem);             /* 32px → 40px */
--leading-h4: clamp(1.75rem, 1.65rem + 0.3vw, 2rem);            /* 28px → 32px */
--leading-h5: clamp(1.5rem, 1.4rem + 0.25vw, 1.75rem);          /* 24px → 28px */
--leading-h6: clamp(1.375rem, 1.3rem + 0.2vw, 1.5rem);          /* 22px → 24px */
--leading-body-lg: clamp(1.5rem, 1.45rem + 0.2vw, 1.75rem);     /* 24px → 28px */
--leading-body: clamp(1.375rem, 1.35rem + 0.15vw, 1.5rem);      /* 22px → 24px */
--leading-body-sm: clamp(1.125rem, 1.1rem + 0.1vw, 1.25rem);    /* 18px → 20px */
--leading-caption: clamp(0.875rem, 0.85rem + 0.1vw, 1rem);      /* 14px → 16px */
}