/**
 * ================================================================
 * LOVE STORY — Global Design System
 * Kids & Ladies Wear, Mandvi
 * ================================================================
 * SINGLE SOURCE OF TRUTH for all colors, fonts, buttons, etc.
 * Change a variable here -> updates everywhere in the project.
 * ================================================================
 */

/* ================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
================================================================ */
:root {
    /* Brand Colors */
    --ls-primary:        #D12E65;
    --ls-primary-dark:   #b91c4a;
    --ls-primary-mid:    #e84580;
    --ls-primary-light:  #fce4ef;
    --ls-primary-bg:     #fff5f8;

    /* Neutral */
    --ls-dark:           #1E293B;
    --ls-gray-700:       #374151;
    --ls-gray-500:       #64748b;
    --ls-gray-300:       #cbd5e1;
    --ls-gray-100:       #f1f5f9;
    --ls-white:          #ffffff;

    /* Accent Colors */
    --ls-amber:          #f59e0b;
    --ls-amber-dark:     #d97706;
    --ls-amber-light:    #fef3c7;
    --ls-purple:         #8b5cf6;
    --ls-purple-dark:    #6d28d9;
    --ls-purple-light:   #ede9fe;
    --ls-success:        #10b981;
    --ls-danger:         #ef4444;

    /* Gradient Presets */
    --ls-grad-primary:        linear-gradient(135deg, #D12E65, #b91c4a);
    --ls-grad-hero-pink:      linear-gradient(120deg, #fff0f6 0%, #fce4ef 55%, #f9cde2 100%);
    --ls-grad-hero-amber:     linear-gradient(120deg, #fff8f0 0%, #fef3e2 55%, #fde8cc 100%);
    --ls-grad-hero-purple:    linear-gradient(120deg, #f5f0ff 0%, #ede4fb 55%, #ddd0f7 100%);

    /* Typography */
    --ls-font:           'Outfit', 'Noto Sans Gujarati', system-ui, sans-serif;
    --ls-font-gujarati:  'Noto Sans Gujarati', sans-serif;

    /* Border Radius */
    --ls-radius-sm:   4px;
    --ls-radius-md:   8px;
    --ls-radius-lg:   12px;
    --ls-radius-xl:   16px;
    --ls-radius-2xl:  24px;
    --ls-radius-full: 9999px;

    /* Shadows */
    --ls-shadow-sm:      0 1px 3px rgba(0,0,0,0.08);
    --ls-shadow-md:      0 4px 16px rgba(0,0,0,0.10);
    --ls-shadow-lg:      0 8px 32px rgba(0,0,0,0.12);
    --ls-shadow-primary: 0 4px 20px rgba(209,46,101,0.35);
    --ls-shadow-amber:   0 4px 16px rgba(245,158,11,0.40);
    --ls-shadow-purple:  0 4px 16px rgba(139,92,246,0.35);

    /* Transitions */
    --ls-transition:        all 0.22s ease;
    --ls-transition-slow:   all 0.40s ease;
    --ls-transition-bounce: all 0.4s cubic-bezier(0.34,1.56,0.64,1);

    /* Z-Index */
    --ls-z-nav:   100;
    --ls-z-modal: 200;
    --ls-z-toast: 300;
}

/* ================================================================
   2. GLOBAL BASE
================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--ls-font);
    font-size: 0.9375rem;
    color: var(--ls-dark);
    background: #FAFAFA;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: var(--ls-transition); }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }

/* ================================================================
   3. TEXT UTILITIES
================================================================ */
.ls-text-primary  { color: var(--ls-primary)  !important; }
.ls-text-dark     { color: var(--ls-dark)     !important; }
.ls-text-muted    { color: var(--ls-gray-500) !important; }
.ls-text-white    { color: var(--ls-white)    !important; }
.ls-text-amber    { color: var(--ls-amber)    !important; }
.ls-text-purple   { color: var(--ls-purple)   !important; }
.ls-text-success  { color: var(--ls-success)  !important; }
.ls-guj { font-family: var(--ls-font-gujarati); }
.ls-upper { text-transform: uppercase; letter-spacing: 0.08em; }

/* ================================================================
   4. BUTTON SYSTEM
================================================================ */
.ls-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--ls-font);
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 2px solid transparent;
    border-radius: var(--ls-radius-full);
    padding: 0.75rem 1.75rem;
    transition: var(--ls-transition);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    line-height: 1;
}
.ls-btn-sm  { padding: 0.5rem 1.25rem; font-size: 0.7rem; }
.ls-btn-lg  { padding: 1rem 2.5rem;   font-size: 0.9375rem; }
.ls-btn-xl  { padding: 1.1rem 3rem;   font-size: 1rem; }
.ls-btn-icon{ padding: 0.75rem; border-radius: 50%; }

/* Primary */
.ls-btn-primary { background: var(--ls-primary); color: var(--ls-white); box-shadow: var(--ls-shadow-primary); }
.ls-btn-primary:hover { background: var(--ls-primary-dark); box-shadow: 0 6px 28px rgba(209,46,101,0.5); transform: translateY(-2px); }

/* Outline */
.ls-btn-outline { background: transparent; color: var(--ls-primary); border-color: var(--ls-primary); }
.ls-btn-outline:hover { background: var(--ls-primary); color: var(--ls-white); transform: translateY(-2px); }

/* Ghost */
.ls-btn-ghost { background: rgba(209,46,101,0.08); color: var(--ls-primary); }
.ls-btn-ghost:hover { background: var(--ls-primary); color: var(--ls-white); }

/* Amber */
.ls-btn-amber { background: var(--ls-amber); color: var(--ls-white); box-shadow: var(--ls-shadow-amber); }
.ls-btn-amber:hover { background: var(--ls-amber-dark); transform: translateY(-2px); }

/* Purple */
.ls-btn-purple { background: var(--ls-purple); color: var(--ls-white); box-shadow: var(--ls-shadow-purple); }
.ls-btn-purple:hover { background: var(--ls-purple-dark); transform: translateY(-2px); }

/* White */
.ls-btn-white { background: var(--ls-white); color: var(--ls-primary); border-color: var(--ls-primary-light); box-shadow: var(--ls-shadow-sm); }
.ls-btn-white:hover { background: var(--ls-primary-bg); border-color: var(--ls-primary); transform: translateY(-2px); }

/* Dark */
.ls-btn-dark { background: var(--ls-dark); color: var(--ls-white); box-shadow: var(--ls-shadow-md); }
.ls-btn-dark:hover { background: var(--ls-gray-700); transform: translateY(-2px); }

/* Success */
.ls-btn-success { background: var(--ls-success); color: var(--ls-white); }
.ls-btn-success:hover { background: #059669; transform: translateY(-2px); }

/* Danger */
.ls-btn-danger { background: var(--ls-danger); color: var(--ls-white); }
.ls-btn-danger:hover { background: #dc2626; transform: translateY(-2px); }

/* ================================================================
   5. BADGE SYSTEM
================================================================ */
.ls-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--ls-font);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.85rem;
    border-radius: var(--ls-radius-full);
    line-height: 1;
}
.ls-badge-primary      { background: var(--ls-primary);      color: var(--ls-white); box-shadow: var(--ls-shadow-primary); }
.ls-badge-primary-soft { background: var(--ls-primary-light); color: var(--ls-primary); }
.ls-badge-amber        { background: var(--ls-amber);         color: var(--ls-white); box-shadow: var(--ls-shadow-amber); }
.ls-badge-amber-soft   { background: var(--ls-amber-light);   color: var(--ls-amber-dark); }
.ls-badge-purple       { background: var(--ls-purple);        color: var(--ls-white); box-shadow: var(--ls-shadow-purple); }
.ls-badge-purple-soft  { background: var(--ls-purple-light);  color: var(--ls-purple-dark); }
.ls-badge-success      { background: #d1fae5;                 color: #065f46; }
.ls-badge-danger       { background: #fee2e2;                 color: #991b1b; }
.ls-badge-dark         { background: var(--ls-dark);          color: var(--ls-white); }
.ls-badge-outline      { background: transparent; color: var(--ls-primary); border: 1.5px solid var(--ls-primary); }

/* ================================================================
   6. CARD SYSTEM
================================================================ */
.ls-card { background: var(--ls-white); border-radius: var(--ls-radius-xl); box-shadow: var(--ls-shadow-sm); overflow: hidden; transition: var(--ls-transition-slow); }
.ls-card:hover { box-shadow: var(--ls-shadow-lg); transform: translateY(-4px); }
.ls-card-flat { background: var(--ls-white); border-radius: var(--ls-radius-lg); border: 1px solid var(--ls-gray-100); }
.ls-card-pink { background: linear-gradient(135deg, var(--ls-primary-bg), var(--ls-primary-light)); border-radius: var(--ls-radius-xl); }

/* ================================================================
   7. FORM ELEMENTS
================================================================ */
.ls-input {
    width: 100%;
    font-family: var(--ls-font);
    font-size: 0.875rem;
    color: var(--ls-dark);
    background: var(--ls-white);
    border: 1.5px solid var(--ls-gray-300);
    border-radius: var(--ls-radius-lg);
    padding: 0.75rem 1rem;
    transition: var(--ls-transition);
    outline: none;
}
.ls-input:focus { border-color: var(--ls-primary); box-shadow: 0 0 0 3px rgba(209,46,101,0.12); }
.ls-input::placeholder { color: var(--ls-gray-300); }
.ls-input-pill { border-radius: var(--ls-radius-full); padding: 0.75rem 1.25rem; }
.ls-label { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ls-gray-500); margin-bottom: 0.4rem; }

/* ================================================================
   8. LAYOUT HELPERS
================================================================ */
.ls-section     { padding: 3rem 1rem; }
.ls-section-sm  { padding: 2rem 1rem; }
.ls-container   { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.ls-section-title { text-align: center; font-size: 1.1rem; font-weight: 900; color: var(--ls-dark); text-transform: uppercase; letter-spacing: 0.1em; }
.ls-section-divider { width: 2.5rem; height: 3px; background: var(--ls-primary); border-radius: var(--ls-radius-full); margin: 0.5rem auto 2rem; }
.ls-section-divider-wide { width: 6rem; height: 3px; background: linear-gradient(90deg, transparent, var(--ls-primary), transparent); border-radius: var(--ls-radius-full); margin: 0.5rem auto 2rem; }

/* ================================================================
   9. UTILITY HELPERS
================================================================ */
.ls-no-scrollbar::-webkit-scrollbar { display: none; }
.ls-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.ls-safe-bottom { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
.ls-glass { background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.5); }
.ls-divider { height: 1px; background: var(--ls-gray-100); margin: 1.5rem 0; }

/* ================================================================
   10. ANIMATIONS
================================================================ */
@keyframes ls-fade-in  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes ls-float    { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes ls-spin     { to { transform:rotate(360deg); } }
@keyframes ls-bounce-in{ 0% { transform:scale(0.6); opacity:0; } 70% { transform:scale(1.08); opacity:1; } 100% { transform:scale(1); } }
@keyframes ls-pulse    { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }

.ls-animate-fade-in   { animation: ls-fade-in   0.5s ease forwards; }
.ls-animate-float     { animation: ls-float      3s ease-in-out infinite; }
.ls-animate-spin      { animation: ls-spin       1s linear infinite; }
.ls-animate-bounce-in { animation: ls-bounce-in  0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.ls-animate-pulse     { animation: ls-pulse      2s ease-in-out infinite; }

/* ================================================================
   11. NAVIGATION DROPDOWN
================================================================ */
.nav-dropdown { position: relative; }
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    min-width: 180px;
    z-index: 100;
    padding: 6px 0;
}
.nav-dropdown-menu a, .nav-dropdown-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.15s;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu button:hover {
    background: var(--ls-primary-bg);
    color: var(--ls-primary);
}