/* 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;
}

:root {
    /* Foundation */
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* 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 Sizes */
    /* --text-h1: 48px;
    --text-h2: 40px;
    --text-h4: 28px;
    --text-h5: 24px;
    --text-h6: 20px;
    --text-body-lg: 18px;
    --text-body: 16px;
    --text-body-sm: 14px;
    --text-caption: 12px; */

    /* Line Heights */
    /* --leading-h1: 56px;
    --leading-h2: 48px;
    --leading-h4: 32px;
    --leading-h5: 28px;
    --leading-h6: 24px;
    --leading-body-lg: 28px;
    --leading-body: 24px;
    --leading-body-sm: 20px;
    --leading-caption: 16px; */

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

    /* ==========================
       Fluid Typography Tokens
       ========================== */
    /* Headings */
    --text-h1: clamp(2rem, 5vw + 1rem, 3.75rem);      /* 32px to 60px */
    --text-h2: clamp(1.75rem, 3.5vw + 0.8rem, 3rem);  /* 28px to 48px */
    --text-h3: clamp(1.5rem, 2.5vw + 0.75rem, 2.25rem);/* 24px to 36px */
    --text-h4: clamp(1.25rem, 1.5vw + 0.75rem, 1.75rem);/* 20px to 28px */

    /* Body Text */
    --text-body-lg: clamp(1.05rem, 0.8vw + 0.8rem, 1.25rem); /* 16.8px to 20px */
    --text-body:    clamp(0.95rem, 0.5vw + 0.8rem, 1.125rem); /* 15.2px to 18px */
    --text-body-sm: clamp(0.875rem, 0.4vw + 0.75rem, 1rem);   /* 14px to 16px */
    --text-caption: clamp(0.75rem, 0.3vw + 0.7rem, 0.875rem); /* 12px to 14px */

    /* Fluid Line-Heights for Headings */
    --leading-h1: 1.15;
    --leading-h2: 1.2;
    --leading-h3: 1.25;
    --leading-h4: 1.3;
    --leading-body: 1.5;
    --leading-body-sm: 1.5;
}