/* Local Fonts Definition - Playfair Display, Outfit, Dancing Script, Remachine Script & Arizonia */
@font-face {
    font-family: "remachine-script";
    font-weight: 400;
    font-style: normal;
    src: url("../fonts/RemachineScript_Personal_Use.ttf") format("truetype");
}

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

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Regular.ttf') format('truetype-variations'),
        url('../fonts/PlayfairDisplay-Regular.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Regular.ttf') format('truetype-variations'),
        url('../fonts/Outfit-Regular.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dancing Script';
    src: url('../fonts/DancingScript-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Dancing Script';
    src: url('../fonts/DancingScript-Regular.ttf') format('truetype-variations'),
        url('../fonts/DancingScript-Regular.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* Centralized CSS Variables */
:root {
    /* 1. TYPOGRAPHY (FONTS) */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-accent: 'Dancing Script', cursive;

    /* 2. THEME COLORS */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-primary: #B77916;
    /* Gold / Primary Theme Color */
    --color-primary-dark: #704E2B;
    /* Dark Gold / Tag & Accent */
    --color-brown-accent: #8c5b3e;
    /* Warm Brown Accent */
    --color-brown-dark: #5c3822;
    /* Dark Brown Hover */

    /* 3. TEXT COLORS */
    --color-text-heading: #000000;
    /* Headings Color */
    --color-text-body: #4a4440;
    /* Main Body Text */
    --color-text-muted: #707070;
    /* Muted Subtitles */
    --color-text-secondary: #939393;
    /* Secondary / Old Prices */

    /* 4. BACKGROUND COLORS */
    --color-bg-section: #FFF8F0;
    /* Section Cream Background */
    --color-bg-card: #f7efe9;
    /* Card Soft Background */

    /* 5. FOOTER DESIGN SYSTEM COLORS */
    --footer-bg: rgba(228, 213, 197, 0.20);
    --footer-text: #7E7E7E;
    --footer-contact: #555555;
    --footer-social-icon: #444444;
    --footer-social-border: #777777;
    --footer-border: #e8ded2;

    /* 6. CONVENIENT SHORT ALIASES (BACKWARD COMPATIBILITY) */
    --heading-color: var(--color-text-heading);
    --bg-section: var(--color-bg-section);
    --btn-color: var(--color-primary);
    --tag-arrival-color: var(--color-primary-dark);
    --secondary-price-color: var(--color-text-secondary);
    --tc-card-bg: var(--color-bg-card);
    --tc-overlay-bar-bg: rgba(85, 78, 74, 0.72);
    --tc-overlay-bar-hover-bg: rgba(65, 58, 54, 0.82);
    --tc-top-overlay-bg: rgba(0, 0, 0, 0.04);
    --os-wrapper-bg: rgba(255, 255, 255, 0.85);
    --os-btn-shadow: rgba(140, 91, 62, 0.25);
    --nf-footer-bg: var(--footer-bg);
    --nf-contact-color: var(--footer-contact);
    --nf-text-color: var(--footer-text);
    --nf-social-border: var(--footer-social-border);
    --nf-social-color: var(--footer-social-icon);
    --nf-border-color: var(--footer-border);
}

/* Global Body Font Assignment */
html,
body,
p,
a,
span,
li,
label,
button,
input,
select,
textarea,
td,
th,
small,
strong,
b {
    font-family: var(--font-body);
}

/* Global Heading Font Assignment */
h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 *,
.site-logo,
.nh-site-logo,
.section-title,
.section-title *,
.heading-font,
.title {
    font-family: var(--font-body);
}



.site-btn,
.btn-primary,
.btn-theme {
    background-color: var(--btn-color);
    border-color: var(--btn-color);
    color: #ffffff;
}

.tag-arrival,
.tag-new,
.tag-featured {
    background-color: var(--tag-arrival-color);
    color: #ffffff;
}

.secondary-price,
.old-price,
.strike-price {
    color: var(--secondary-price-color);
}

.bg-section,
.section-bg {
    background-color: var(--bg-section);
}

/* ==========================================================================
   REUSABLE TYPOGRAPHY & COMPONENT UTILITY SYSTEM
   ========================================================================== */

/* 1. Typography Utility Classes */
.heading-xlarge {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-heading);
}

.heading-large {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text-heading);
}

.heading-medium {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-heading);
}

.heading-small {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-heading);
}

.body-large {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-body);
}

.body-text {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-body);
}

.body-small {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* 2. Color & Background Utility Classes */
.text-primary-theme {
    color: var(--color-primary) !important;
}

.text-heading {
    color: var(--color-text-heading) !important;
}

.text-body {
    color: var(--color-text-body) !important;
}

.text-muted-custom {
    color: var(--color-text-muted) !important;
}

.bg-theme-section {
    background-color: var(--color-bg-section) !important;
}

.bg-theme-card {
    background-color: var(--color-bg-card) !important;
}

/* 3. Reusable UI Components */
.btn-primary-theme {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-primary-theme:hover {
    background-color: var(--color-brown-dark);
    border-color: var(--color-brown-dark);
    color: var(--color-white);
}

.card-theme-shadow {
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}