/*!
 * Skintoria Typography System
 * Applies Playfair Display for headings and Inter for body text
 */

/* ============================================
   FONT IMPORTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
}

/* ============================================
   BASE TYPOGRAPHY
   ============================================ */
html,
body {
    font-family: var(--font-body) !important;
}

/* ============================================
   HEADINGS - Playfair Display
   ============================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading) !important;
}

/* Additional heading classes */
.page-title,
.section-title,
.product-title,
.card-title,
.modal-title,
.navbar-brand {
    font-family: var(--font-heading) !important;
}

/* ============================================
   BODY TEXT - Inter
   ============================================ */
body,
p,
span,
div,
a,
li,
td,
th,
label,
input,
textarea,
select,
button,
.btn,
.nav-link,
.dropdown-item {
    font-family: var(--font-body) !important;
}

/* ============================================
   SPECIFIC COMPONENTS
   ============================================ */
/* Navigation */
.navbar,
.navbar-nav .nav-link {
    font-family: var(--font-body) !important;
}

.navbar-brand {
    font-family: var(--font-heading) !important;
}

/* Cards */
.card-title,
.card-header {
    font-family: var(--font-heading) !important;
}

.card-text,
.card-body {
    font-family: var(--font-body) !important;
}

/* Forms */
.form-label,
.form-control,
input,
textarea,
select {
    font-family: var(--font-body) !important;
}

/* Buttons */
.btn,
button {
    font-family: var(--font-body) !important;
}

/* Tables */
table,
thead,
tbody,
th,
td {
    font-family: var(--font-body) !important;
}

/* Modals */
.modal-title {
    font-family: var(--font-heading) !important;
}

.modal-body,
.modal-footer {
    font-family: var(--font-body) !important;
}

/* Footer */
footer,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
    font-family: var(--font-heading) !important;
}

footer p,
footer span,
footer a,
footer li {
    font-family: var(--font-body) !important;
}

/* ============================================
   PRODUCT RELATED
   ============================================ */
.product-title,
.product-name,
.product-card-title {
    font-family: var(--font-heading) !important;
}

.product-price,
.product-description,
.product-text {
    font-family: var(--font-body) !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.font-heading {
    font-family: var(--font-heading) !important;
}

.font-body {
    font-family: var(--font-body) !important;
}