/* Playfair Font Family */
/* For Headlines and Banner text */

@font-face {
    font-family: "Playfair";
    src: url("../fonts/playfair/Playfair-VariableFont_opsz,wdth,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair";
    src: url("../fonts/playfair/Playfair-Italic-VariableFont_opsz,wdth,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* Poppins Font Family */
/* For Body text */

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-ThinItalic.ttf") format("truetype");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-ExtraLightItalic.ttf") format("truetype");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-MediumItalic.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-SemiBoldItalic.ttf") format("truetype");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-ExtraBoldItalic.ttf") format("truetype");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-BlackItalic.ttf") format("truetype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* ========================================
   GLOBAL FONT STYLES
   ======================================== */

/* CSS Variables for Font Families */
:root {
    /* Font families */
    --font-banner: "Playfair", Georgia, "Times New Roman", serif;
    --font-body:
        "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        sans-serif;

    /* Legacy variable names for backwards compatibility */
    --font-playfair: var(--font-banner);
    --font-poppins: var(--font-body);
}

/* ========================================
   BASE TYPOGRAPHY
   ======================================== */

/* Body - Default font is Lato (Amazon Ember alternative) */
body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   HEADINGS - Using Lato
   ======================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

h1,
.h1 {
    font-size: 2.5rem;
    font-weight: 900;
    /* font-family: var(--font-body); */
}

h2,
.h2 {
    font-size: 2rem;
    font-weight: 800;
}

h3,
.h3 {
    font-size: 1.75rem;
    font-weight: 700;
}

h4,
.h4 {
    font-size: 1.5rem;
    font-weight: 600;
}

h5,
.h5 {
    font-size: 1.25rem;
    font-weight: 600;
}

h6,
.h6 {
    font-size: 1rem;
    font-weight: 600;
}

/* ========================================
   BANNER HEADINGS - Using Oswald
   ======================================== */

.h2,
.h3,
.h4,
.h5 {
    font-family: var(--font-banner) !important;
}

.banner-heading,
.hero-heading,
.hero-title,
.section-title,
h1.banner,
h2.banner,
.display-1,
.display-2,
.display-3,
.display-4 {
    font-family: var(--font-banner);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.banner-heading {
    font-size: 3.5rem;
    font-weight: 700;
}

.hero-heading {
    font-size: 4rem;
    font-weight: 700;
}

/* Lead text with Oswald */
.lead {
    font-family: var(--font-banner);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ========================================
   BODY TEXT - Using Poppins
   ======================================== */

p,
.body-text,
.description,
.content,
article,
.card-text {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.7;
}

/* Body text variants */
.body-sm {
    font-size: 0.875rem;
}

.body-lg {
    font-size: 1.125rem;
}

/* Text alternatives */
.text-poppins,
.body-alt,
p.poppins {
    font-family: var(--font-body);
}

.text-playfair {
    font-family: var(--font-banner);
}

/* ========================================
   BUTTONS - Using Poppins
   ======================================== */

.btn,
button,
input[type="submit"],
input[type="button"] {
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.025em;
}

/* ========================================
   NAVIGATION - Using Lato
   ======================================== */

nav,
.navbar,
.nav-link,
.menu-item {
    font-family: var(--font-body);
    font-weight: 500;
}

/* ========================================
   FORMS - Using Poppins
   ======================================== */

input,
textarea,
select,
.form-control,
.form-label,
label {
    font-family: var(--font-body);
    font-weight: 400;
}

.form-label,
label {
    font-weight: 500;
}

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

/* Font weight utilities */
.fw-thin {
    font-weight: 100;
}
.fw-extralight {
    font-weight: 200;
}
.fw-light {
    font-weight: 300;
}
.fw-normal {
    font-weight: 400;
}
.fw-medium {
    font-weight: 500;
}
.fw-semibold {
    font-weight: 600;
}
.fw-bold {
    font-weight: 700;
}
.fw-extrabold {
    font-weight: 800;
}
.fw-black {
    font-weight: 900;
}

/* Responsive Typography */
@media (max-width: 768px) {
    h1,
    .h1 {
        font-size: 2rem;
    }
    h2,
    .h2 {
        font-size: 1.75rem;
    }
    h3,
    .h3 {
        font-size: 1.5rem;
    }
    h4,
    .h4 {
        font-size: 1.25rem;
    }
    h5,
    .h5 {
        font-size: 1.125rem;
    }
    h6,
    .h6 {
        font-size: 1rem;
    }

    .banner-heading {
        font-size: 2.5rem;
    }
    .hero-heading {
        font-size: 3rem;
    }
}