/* LuxSleep Shared Styles - Standardized UI/UX */
/* CONSISTENT HEADER AND FOOTER ARE NOW IN SEPARATE GLOBAL FILES */
@import url('header.css?v=v3');
@import url('footer.css?v=v2');

/* ============================================
   GLOBAL TYPOGRAPHY — Single source of truth
   Body: Inter (self-hosted via /public/fonts.css)
   Headings: Playfair Display via .font-display
   ============================================ */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--color-page-bg);
    overflow-x: hidden;
    max-width: 100%;
}

h1, h2, h3 {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.font-display,
h1.display,
.heading-display {
    font-family: 'Playfair Display', Georgia, serif !important;
}

/* ============================================
   COLOR SYSTEM - Global Premium Theme (Deep Navy & Soft Gold)
   ============================================ */
:root {
    /* ════════════════════════════════════════════════
       MINIMAL COLOR SYSTEM — 14 core values
       ════════════════════════════════════════════════ */

    /* ── Brand (3) ─────────────────────────────────── */
    --deep-navy: #0B1D3A;           /* Midnight navy — header, footer, headings */
    --soft-gold: #C9A96E;           /* Champagne gold — CTAs, ratings, accents */
    --gold-hover: #B8945A;          /* Deep gold — hover/active state */

    /* ── Interactive Blue (3) ──────────────────────── */
    --color-primary: #1D4ED8;       /* Royal blue — links, primary buttons */
    --color-primary-hover: #1E40AF; /* Darker blue — hover state */
    --color-primary-focus: rgba(29, 78, 216, 0.35); /* Focus ring */

    /* ── Typography (2) ────────────────────────────── */
    --color-text-primary: #0F172A;  /* Near-black — body text */
    --color-text-secondary: #6B7280;/* Medium gray — metadata, captions */

    /* ── Surfaces & Borders (3) ────────────────────── */
    --color-surface: #f7f7f7;       /* Light gray — section backgrounds */
    --color-border: #E5E7EB;        /* Soft gray — dividers, card edges */
    --color-shadow: rgba(0, 0, 0, 0.08); /* Generic shadow */

    /* ── Status (3) ────────────────────────────────── */
    --color-success: #059669;       /* Emerald green — in stock, verified */
    --color-error: #DC2626;         /* Crimson red — errors, sale badges */
    --color-warning: #B45309;       /* Amber — discounts, warnings */

    /* ════════════════════════════════════════════════
       ALIASES — backward compatibility only
       ════════════════════════════════════════════════ */
    --color-secondary:    var(--soft-gold);
    --color-accent:       var(--soft-gold);
    --color-accent-gold:  var(--soft-gold);
    --color-star:         var(--soft-gold);
    --color-star-empty:   #DDD5CA;
    --color-discount:     var(--color-warning);
    --color-price-sale:   var(--color-error);
    --color-white:        #ffffff;
    --dominant-white:     #ffffff;
    --soft-white:         var(--color-surface);
    --color-warm-bg:      var(--color-surface);
    --color-hover-bg:     #f0f0f0;
    --light-silver:       var(--color-border);
    --silver-hover:       #D5D5D5;
    --border-gray:        var(--color-border);
    --navy-hover:         var(--color-primary-hover);
    --navy-light:         rgba(29, 78, 216, 0.15);
    --bg-navy:            var(--deep-navy);
    --text-gold:          var(--soft-gold);
    --text-cream:         var(--color-surface);
    --text-light-gray:    var(--color-text-secondary);
    --cta-gold:           var(--soft-gold);
    --cta-gold-hover:     var(--gold-hover);
    --color-background-light: #ffffff;
    --color-background-dark:  var(--deep-navy);

    /* ════════════════════════════════════════════════
       NEW THEME TOKENS — Ice Blue / Royal Navy scheme
       ════════════════════════════════════════════════ */
    --color-announce-1:          #2D6A2F;
    --color-announce-2:          #C44E1A;
    --color-announce-text:       #FFFFFF;
    --color-nav-bg:              #FFFFFF;
    --color-nav-border:          #E5EDF8;
    --color-brand:               #152B7A;
    --color-nav-link:            #2D4EC7;
    --color-nav-link-hover:      #152B7A;
    --color-page-bg:             #ffffff;
    --color-section-alt:         #ffffff;
    --color-heading:             #152B7A;
    --color-body:                #6B7280;
    --color-body-dark:           #374151;
    --color-cta-primary:         #1A3AAF;
    --color-cta-primary-hover:   #152B7A;
    --color-cta-text:            #FFFFFF;
    --color-cta-secondary:       transparent;
    --color-cta-secondary-border:#1A3AAF;
    --color-cta-secondary-text:  #1A3AAF;
    --color-badge-bg:            #FFFFFF;
    --color-badge-border:        #D1E3F8;
    --color-badge-icon:          #2D6A2F;
    --color-badge-text:          #374151;
    --color-savings-bg:          #EBF3FC;
    --color-savings-text:        #152B7A;
    --color-price:               #152B7A;
    --color-price-old:           #9CA3AF;
    --color-footer-bg:           #152B7A;
    --color-footer-text:         #FFFFFF;
    --color-footer-link:         #A5B8E8;
    --color-footer-border:       #1E3A8A;
    --color-floating-btn:        #C44E1A;
    --color-floating-text:       #FFFFFF;
    --color-stars:               #F59E0B;
    --color-in-stock:            #2D6A2F;
}

/* Tailwind CSS Utility Classes */
.bg-primary-navy {
    background-color: var(--deep-navy);
}

.text-accent-gold {
    color: var(--soft-gold);
}

.text-primary-cream {
    color: var(--text-cream);
}

.text-secondary-gray {
    color: var(--color-text-secondary);
}

.border-subtle-gray {
    border-color: var(--light-silver);
}

.hover\:text-accent-gold:hover {
    color: var(--soft-gold);
}

.bg-cta-gold {
    background-color: var(--soft-gold);
}

.hover\:bg-cta-gold-hover:hover {
    background-color: var(--gold-hover);
}

/* Note: Header and Footer styles are now imported from header.css and footer.css */

/* Footer styles are imported from footer.css */

/* ============================================
   FOCUS STATES FOR ACCESSIBILITY
   ============================================ */
button:focus,
input:focus,
select:focus,
a:focus {
    outline: 2px dashed var(--color-primary-focus);
    outline-offset: 2px;
}