/*
Theme Name: Clodzup Luxury Fashion & Jewelry
Theme URI: https://clodzup.ma
Author: Clodzup Team
Author URI: https://clodzup.ma
Description: Premium WooCommerce theme for CLODZUP — Walk with confidence. Tailored for luxury fashion and jewelry e-commerce in Morocco, featuring AJAX cart drawer, circular free delivery progress, Moroccan COD, and high-conversion UX.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clodzup-theme
Tags: e-commerce, custom-colors, custom-menu, featured-images, translation-ready, woocommerce
*/

:root {
    --clodzup-gold: #C5A059;
    --clodzup-gold-light: #E6D5B8;
    --clodzup-gold-dark: #A88239;
    --clodzup-dark: #1A1A1A;
    --clodzup-dark-light: #2D2D2D;
    --clodzup-cream: #FBF9F5;
    --clodzup-soft-gray: #F4F4F5;
    --clodzup-border: #E5E7EB;
    --clodzup-text: #1A1A1A;
    --clodzup-muted: #6B7280;
    --clodzup-success: #10B981;
    --clodzup-error: #EF4444;
    --clodzup-radius: 1rem;
    --clodzup-radius-sm: 0.5rem;
    --clodzup-radius-lg: 1.25rem;
    --clodzup-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --clodzup-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --clodzup-shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    --clodzup-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --clodzup-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --clodzup-font-serif: 'Playfair Display', Georgia, serif;
    --clodzup-container: 1280px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--clodzup-font-sans);
    background-color: var(--clodzup-cream);
    color: var(--clodzup-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main#app-container,
main.site-main {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: var(--clodzup-font-serif);
    font-weight: 700;
    line-height: 1.25;
    color: var(--clodzup-dark);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

button, input, select, textarea {
    font-family: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--clodzup-cream);
}
::-webkit-scrollbar-thumb {
    background: var(--clodzup-gold);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--clodzup-gold-dark);
}

/* Selection Highlight */
::selection {
    background-color: var(--clodzup-gold);
    color: #ffffff;
}