/* ========================================
   SHARED STYLESHEET: FONTS & COLORS
   ======================================== */


/* ==============================
   FONT IMPORTS
   ============================== */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Lexend:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
    font-family: 'ITC Benguiat';
    src: url('../fonts/ITC Benguiat.otf');
}

@font-face {
    font-family: 'ITC Benguiat';
    src: url("../fonts/ITC Benguiat Medium.otf");
    font-weight: bold;
}

@font-face {
    font-family: 'ITC Benguiat';
    src: url("../fonts/ITC Benguiat Bold.otf");
    font-weight: bolder;
}

@font-face {
    font-family: 'Cooper BT';
    src: url('../fonts/Cooper BT.ttf');
}


/* ==============================
   CSS VARIABLES
   ============================== */

:root {
    /* ======= FONT FAMILIES ======= */
    --font-eb-garamond: 'EB Garamond', 'Times New Roman', serif;
    --font-itc-benguiat: 'ITC Benguiat', 'Times New Roman', serif;
    --font-cooper-bt: 'Cooper BT', 'Times New Roman', serif;
    --font-montserrat: 'Montserrat', Arial, sans-serif;
    --font-open-sans: 'Open Sans', Arial, sans-serif;
    --font-sans: 'Montserrat', Arial, sans-serif;
    --font-lora: 'Lora', serif;
    --font-noto-sans: "Noto Sans", sans-serif;
    /* ======= COLOR PALETTE ======= */
    --color-white: #f0f1f5;
    --color-yellow-1: #fff234;
    --color-yellow-2: #dbb43e;
    --color-green-1: #648062;
    --color-green-2: #264027;
    --color-green-3: #112112;
    --color-brown-1: #ca945f;
    --color-brown-2: #8d5a33;
    --color-brown-3: #693a1b;
    /* ======= COLOR PALETTE OLD ======= 
    --color-green: rgb(96, 108, 56);
    --color-dark-green: rgb(40, 54, 24);
    --color-light: rgb(254, 250, 224);
    --color-light-brown: rgb(221, 161, 94);
    --color-brown: rgb(188, 108, 37);
    /* ======= BORDER RADIUS ======= */
    --border-radius: 20px;
    --border-radius-button: 10px;
    --shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    --shadow-light: 0px 0px 5px rgba(0, 0, 0, 0.3);
    /* ======= NAVIGATION HEIGHT ======= */
    --nav-height: clamp(3rem, 8vh, 4rem);
}


/* ==============================
   UTILITY CLASSES
   ============================== */


/* Font Families */

.font-serif {
    font-family: var(--font-serif);
}

.font-sans {
    font-family: var(--font-sans);
}