/**
 * Enhanced Store-specific CSS Variables
 * Adds missing variables while preserving multi-store theming
 * Date: 2025-09-07
 */

/* ========== UNIVERSAL VARIABLES (Same for all stores) ========== */
:root {
    /* === EXISTING STORE-SPECIFIC VARIABLES === */
    /* Primary color variants (overridden per store) */
    --color-primary: #0091d7;
    --color-primary-light: #7cc7f0;
    --color-primary-dark: #006bb3;
    --color-primary-rgb: 0, 145, 215;

    /* Secondary color variants */
    --color-secondary: #334155;
    --color-secondary-light: #34495E;
    --color-secondary-dark: #1A252F;
    --color-secondary-rgb: 51, 65, 85;

    /* Accent color (consistent across stores) */
    --color-accent: #f5f5f0;
    --color-accent-light: #f5f5f0;
    --color-accent-dark: #f5f3e8;
    --color-accent-rgb: 245, 245, 240;

    /* === NEW UNIVERSAL VARIABLES === */

    /* Basic colors (same for all stores) */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-transparent: transparent;

    /* Gray scale (same for all stores) */
    --gray-50: #f5f5f0;
    --gray-100: #f5f5f0;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #111827;
    
    /* State colors (same for all stores) */
    --color-success: #22c55e; /* green-500 (lighter, more vibrant) */
    --color-success-light: #dcfce7; /* green-100 */
    --color-success-dark: #16a34a; /* green-600 */
    --color-error: #ef4444;
    --color-error-light: #fee2e2;
    --color-error-dark: #dc2626;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-warning-dark: #d97706;
    --color-info: #3b82f6;
    --color-info-light: #dbeafe;
    --color-info-dark: #2563eb;
    --color-info-lighter: #dbeafe;

    /* Component colors (same for all stores) */
    --color-gold: #c69f32; /* Sparkles gold */
    --color-gold-light: #d4b44a; /* Light gold */
    --color-gold-medium: #c69f32; /* Medium gold */
    --color-gold-dark: #a88929; /* Dark gold */
    --color-gold-darker: #8a7020; /* Darker gold */

    --color-taupe-dark: #4a4741; /* Dark taupe/brown */
    --color-taupe: #605d56; /* Medium taupe */
    --color-taupe-light: #7b776b; /* Light taupe */

    --color-magenta: #e91e63; /* Bright magenta */
    --color-magenta-dark: #c2185b; /* Dark magenta */
    --color-pink: #ec4899; /* Bright pink */

    --color-slate: #1e293b; /* Dark slate */
    --color-slate-light: #334155; /* Light slate */

    --color-orange: #fb923c; /* Bright orange */
    --color-orange-light: #fde68a; /* Light orange/amber */
    --color-orange-dark: #f97316; /* Dark orange */
    --color-amber: #fbbf24; /* Amber yellow */

    /* Additional grays (same for all stores) */
    --gray-950: #333333; /* Extra dark gray */
    --gray-350: #cccccc; /* Between 300-400 */
    --gray-250: #e0e0e0; /* Between 200-300 */
    --gray-150: #f5f5f0; /* Consolidated off-white */
    --off-white: #f5f5f0; /* Off-white with warm tone */

    /* Animation-specific colors */
    --color-error-bright: #ff6b6b; /* Bright error for animations */
    --color-error-coral: #ee5a52; /* Coral error for animations */

    /* Semantic mappings */
    --color-text: var(--color-secondary);
    --color-text-muted: var(--gray-600);
    --color-text-light: var(--gray-400);
    --color-text-inverse: var(--color-white);
    --color-background: var(--color-white);
    --color-surface: var(--gray-50);
    --color-surface-dark: var(--gray-100);
    --color-border: var(--gray-200);
    --color-border-light: var(--gray-100);
    --color-border-dark: var(--gray-300);
    --color-border-focus: var(--color-primary);
    
    /* Links */
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-dark);
    --color-link-visited: var(--color-primary-dark);
    
    /* Buttons - Standard mappings */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-color: var(--color-white);
    --btn-primary-hover-bg: var(--color-primary-dark);
    --btn-primary-hover-color: var(--color-white);
    --btn-primary-border: var(--color-primary);
    
    --btn-secondary-bg: var(--color-white);
    --btn-secondary-color: var(--color-primary);
    --btn-secondary-hover-bg: var(--color-primary);
    --btn-secondary-hover-color: var(--color-white);
    --btn-secondary-border: var(--color-primary);
    
    --btn-tertiary-bg: transparent;
    --btn-tertiary-color: var(--color-primary);
    --btn-tertiary-hover-bg: var(--color-primary-light);
    --btn-tertiary-hover-color: var(--color-primary-dark);
    --btn-tertiary-border: transparent;
    
    /* Forms */
    --input-bg: var(--color-white);
    --input-color: var(--color-text);
    --input-border: var(--gray-300);
    --input-border-focus: var(--color-primary);
    --input-placeholder: var(--gray-400);
    --input-disabled-bg: var(--gray-100);
    --input-disabled-color: var(--gray-500);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-none: none;
    
    /* Z-index layers */
    --z-below: -1;
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* Spacing (matches Tailwind) */
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    
    /* Border radius */
    --radius-none: 0;
    --radius-sm: 0.125rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Transition durations */
    --duration-75: 75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;
    --duration-700: 700ms;
    --duration-1000: 1000ms;
    
    /* Font families */
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
    
    /* Font sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    
    /* Line heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* Font weights */
    --font-thin: 100;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* Opacity values */
    --opacity-0: 0;
    --opacity-25: 0.25;
    --opacity-50: 0.5;
    --opacity-75: 0.75;
    --opacity-100: 1;

    /* ========== GRADIENT DEFINITIONS (Store-aware) ========== */
    /* Primary gradients (use store colors) */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-primary-reverse: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    --gradient-primary-light: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    
    /* Neutral gradients */
    --gradient-gray: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-300) 100%);
    --gradient-dark: linear-gradient(135deg, var(--gray-700) 0%, var(--gray-900) 100%);
    
    /* Special effect gradients */
    --gradient-shimmer: linear-gradient(90deg, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%);
    --gradient-glow: radial-gradient(circle, var(--color-primary-light) 0%, transparent 70%);

    /* ========== CUSTOM COMPONENT VARIABLES ========== */
    /* Header - Removed: unused variables, template uses inline classes */
    
    /* Navigation */
    --nav-link-color: var(--color-text);
    --nav-link-hover-color: var(--color-primary);
    --nav-link-active-color: var(--color-primary);
    --nav-link-active-bg: var(--color-accent);
    
    /* Cards */
    --card-bg: var(--color-white);
    --card-border: var(--color-border);
    --card-shadow: var(--shadow-md);
    --card-hover-shadow: var(--shadow-lg);
    
    /* Modals */
    --modal-bg: var(--color-white);
    --modal-overlay-bg: rgba(0, 0, 0, 0.5);
    --modal-border: var(--color-border);
    --modal-shadow: var(--shadow-xl);
    
    /* Tables */
    --table-bg: var(--color-white);
    --table-border: var(--color-border);
    --table-header-bg: var(--gray-50);
    --table-hover-bg: var(--gray-50);
    --table-stripe-bg: var(--gray-50);
    
    /* Badges */
    --badge-primary-bg: var(--color-primary);
    --badge-primary-color: var(--color-white);
    --badge-success-bg: var(--color-success);
    --badge-success-color: var(--color-white);
    --badge-warning-bg: var(--color-warning);
    --badge-warning-color: var(--color-white);
    --badge-error-bg: var(--color-error);
    --badge-error-color: var(--color-white);
    
    /* Product specific */
    --product-price-color: var(--color-primary);
    --product-sale-color: var(--color-error);
    --product-rating-color: var(--color-warning);
}

/* ========== STORE THEME MAPPINGS ========== */
html.sparkleshome-store-view,
html.store-sparkleshome,
html.store-sparkles,
html[data-store="sparkleshome_main"],
html.store-rhinestones,
html[data-store="default"],
html.studio-store-view,
html.store-studio,
html[data-store="studioview"],
body.sparkleshome-store-view,
body.store-sparkleshome,
body.store-sparkles,
body[data-store="sparkleshome_main"],
body.store-rhinestones,
body[data-store="default"],
body.studio-store-view,
body.store-studio,
body[data-store="studioview"] {
    --color-primary: var(--sparkles-store-primary);
    --color-primary-rgb: var(--sparkles-store-primary-rgb);
    --color-primary-light: var(--sparkles-store-primary-light);
    --color-primary-lighter: var(--sparkles-store-primary-light);
    --color-primary-dark: var(--sparkles-store-primary-dark);
    --color-secondary: var(--sparkles-store-secondary);
    --color-secondary-light: var(--sparkles-store-secondary-light);
    --color-secondary-dark: var(--sparkles-store-secondary-dark);
    --color-secondary-rgb: var(--sparkles-store-secondary-rgb);
}

/* ========== SPARKLES HOME STORE (Gold Theme) ========== */
/* Primary and secondary color variants - Sparkles Gold & Charcoal */
html.sparkleshome-store-view,
html.store-sparkleshome,
html.store-sparkles,
html[data-store="sparkleshome_main"],
body.sparkleshome-store-view,
body.store-sparkleshome,
body.store-sparkles,
body[data-store="sparkleshome_main"] {
    --sparkles-store-primary: #c69f32; /* Sparkles gold */
    --sparkles-store-primary-rgb: 198, 159, 50;
    --sparkles-store-primary-light: #d4b44a;
    --sparkles-store-primary-dark: #a88929;
    --sparkles-store-secondary: #353839;
    --sparkles-store-secondary-light: #4a4d4f;
    --sparkles-store-secondary-dark: #262829;
    --sparkles-store-secondary-rgb: 53, 56, 57;
}

/* ========== RHINESTONES STORE (Blue Theme) ========== */
/* Primary and secondary color variants - Rhinestones Blue & Dark Blue */
html.store-rhinestones,
html[data-store="default"],
body.store-rhinestones,
body[data-store="default"] {
    --sparkles-store-primary: #0091d7;
    --sparkles-store-primary-rgb: 0, 145, 215;
    --sparkles-store-primary-light: #7cc7f0;
    --sparkles-store-primary-dark: #006bb3;
    --color-primary-darker: #00508c;
}

/* Shared secondary palette - Rhinestones + Studio */
html.store-rhinestones,
html[data-store="default"],
html.studio-store-view,
html.store-studio,
html[data-store="studioview"],
body.store-rhinestones,
body[data-store="default"],
body.studio-store-view,
body.store-studio,
body[data-store="studioview"] {
    --sparkles-store-secondary: #2C3E50;
    --sparkles-store-secondary-light: #34495E;
    --sparkles-store-secondary-dark: #1A252F;
    --sparkles-store-secondary-rgb: 44, 62, 80;
}

/* ========== STUDIO STORE (Pink Theme) ========== */
/* Primary and secondary color variants - Studio Pink & Dark Blue */
html.studio-store-view,
html.store-studio,
html[data-store="studioview"],
body.studio-store-view,
body.store-studio,
body[data-store="studioview"] {
    --sparkles-store-primary: #f93781;
    --sparkles-store-primary-rgb: 249, 55, 129;
    --sparkles-store-primary-light: #ffb3d1;
    --sparkles-store-primary-dark: #e91e63;
}