/*
Theme Name: Sahara Shop Luxury Theme
Theme URI: https://saharashop.com/sahara-theme
Author: Sahara Shop UX/UI Design Team
Author URI: https://saharashop.com
Description: Fast, lightweight, mobile-first starter theme designed to integrate seamlessly with WooCommerce and Elementor Pro. Enforces premium typography, luxury dark-charcoal and gold color palettes, and glassmorphism micro-interactions.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sahara-theme
Tags: e-commerce, custom-colors, two-columns, translation-ready, accessibility-ready, grid-layout
*/

/* -------------------------------------------------------------------------
   1. Import Google Fonts
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* -------------------------------------------------------------------------
   2. Design Tokens (CSS Variables)
   ------------------------------------------------------------------------- */
:root {
    --color-primary-base: 41;
    --color-primary: hsl(var(--color-primary-base), 53%, 52%);
    --color-primary-hover: hsl(var(--color-primary-base), 53%, 42%);
    --color-primary-light: hsl(var(--color-primary-base), 53%, 95%);
    
    --color-secondary: #111111;
    --color-text-dark: #222222;
    --color-text-muted: #666666;
    --color-background-cream: #faf9f6;
    --color-background-white: #ffffff;
    --color-border: #eaeaea;
    
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    
    --transition-smooth: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* -------------------------------------------------------------------------
   3. Base HTML Resets
   ------------------------------------------------------------------------- */
body {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    background-color: var(--color-background-white);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-secondary);
    font-weight: 600;
    margin-top: 0;
    letter-spacing: -0.02em;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-smooth);
}

a:hover {
    color: var(--color-primary-hover);
}

/* -------------------------------------------------------------------------
   4. Glassmorphism & Visual Utility Classes
   ------------------------------------------------------------------------- */
.sahara-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.sahara-shadow-luxury {
    box-shadow: 0 16px 48px rgba(17, 17, 17, 0.05);
}

.sahara-btn-premium {
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px 28px;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-smooth);
}

/* -------------------------------------------------------------------------
   5. Accessible Skip-link (WCAG 2.1 compliance)
   ------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-secondary);
    color: #fff;
    padding: 10px 20px;
    z-index: 999999;
}
.skip-link:focus {
    top: 0;
}