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

:root {
    /* --- COLOR PALETTE --- */
    --color-background: #ffffff;
    --color-surface: #f8f6f4;
    --color-surface-subtle: #eae5e1;
    --color-border: #dbd4ce;

    /* Text Colors */
    --color-text-main: #221610;
    --color-text-subtle: #53433b;
    --color-text-muted: #8d7f76;

    /* Theme Colors */
    --color-primary: #4e3527;
    --color-primary-hover: #3a271c;
    --color-accent: #be6e40;
    --color-error: #a33c3c;

    /* Component & Shadow Colors */
    --color-grid-line: rgba(78, 53, 39, 0.035);
    --color-model-shadow: rgba(34, 22, 16, 0.45);
    --color-card-bg: #faf9f7;
    --color-card-border: rgba(78, 53, 39, 0.07);
    --color-card-hover-border: rgba(190, 110, 64, 0.25);
    --color-discount-bg: rgba(190, 110, 64, 0.10);
    --color-card-gradient: linear-gradient(to top, rgba(250, 249, 247, 1.0) 0%, rgba(250, 249, 247, 0.85) 50%, rgba(250, 249, 247, 0.3) 80%, transparent 100%);

    /* Borders & Shadows */
    --border: 2px solid var(--color-primary);
    --border-radius: 10px;
    --box-shadow: 0 4px 20px rgba(34, 22, 16, 0.04);
    --box-shadow-card-hover: 0 16px 30px rgba(34, 22, 16, 0.06);
    --box-shadow-btn-hover: 0 4px 10px rgba(190, 110, 64, 0.25);

    /* --- TYPOGRAPHY SCALE (DESKTOP) --- */
    --large-font-size: 4rem;
    --title-font-size: 2rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.75rem;

    /* Element Specific Font Sizes */
    --font-size-nav: 1.25rem;
    --font-size-nav-icon: 1.125rem;
    --font-size-nav-text: 0.85rem;
    --font-size-filter: 0.9rem;
    --font-size-hero-desc: 1rem;
    --font-size-hero-btn: 1rem;
    --font-size-card-category: 0.75rem;
    --font-size-card-title: 1rem;
    --font-size-card-desc: 0.75rem;
    --font-size-card-btn: 0.82rem;
    --font-size-price: 1rem;
    --font-size-price-original: 0.82rem;
    --font-size-badge: 0.75rem;
}

/* ==========================================
   RESPONSIVE VARIABLES ADJUSTMENTS
   ========================================== */

@media (max-width: 1400px) {
    :root {
        --large-font-size: 3.2rem;
    }
}

@media (max-width: 1200px) {
    :root {
        --large-font-size: 2.8rem;
    }
}

@media (max-width: 1024px) {
    :root {
        --large-font-size: 2.4rem;
    }
}

@media (max-width: 768px) {
    :root {
        --large-font-size: 2.2rem;
        --title-font-size: 1.6rem;
        --normal-font-size: 0.95rem;
        --small-font-size: 0.82rem;

        --font-size-nav: 1.15rem;
        --font-size-filter: 0.95rem;
        --font-size-hero-desc: 1rem;
        --font-size-hero-btn: 0.95rem;
        --font-size-card-category: 0.8rem;
        --font-size-card-title: 1rem;
        --font-size-card-desc: 0.82rem;
        --font-size-card-btn: 0.82rem;
        --font-size-price: 1rem;
        --font-size-price-original: 0.82rem;
        --font-size-badge: 0.8rem;
    }
}

@media (max-width: 480px) {
    :root {
        --large-font-size: 1.85rem;
        --title-font-size: 1.45rem;
        --normal-font-size: 0.92rem;
        --small-font-size: 0.8rem;

        --font-size-filter: 0.9rem;
        --font-size-hero-desc: 0.95rem;
        --font-size-hero-btn: 0.92rem;
        --font-size-card-category: 0.75rem;
        --font-size-card-title: 0.9rem;
        --font-size-card-desc: 0.8rem;
        --font-size-card-btn: 0.8rem;
        --font-size-price: 0.95rem;
        --font-size-price-original: 0.78rem;
        --font-size-badge: 0.75rem;
    }
}