/* ═══════════════════════════════════════════════════════════════════════════════════
   VIIRU AI - GLOBAL THEME VARIABLES
   ═════════════════════════════════════════════════════════════════════════════════
   
   CHANGE COLORS HERE TO UPDATE THE ENTIRE APP!
   All gradient icons, buttons, and accents will update automatically.
   
   ═══════════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ══════════════════════════════════════════════════════════════════════════════
       PRIMARY THEME COLORS
       These are the main accent colors used throughout the application
       ══════════════════════════════════════════════════════════════════════════════ */
    --theme-primary: #6366f1;      /* Indigo - Main accent color */
    --theme-secondary: #8b5cf6;    /* Violet - Secondary accent */
    --theme-tertiary: #a855f7;     /* Purple - Tertiary accent */
    
    /* ══════════════════════════════════════════════════════════════════════════════
       GRADIENT DEFINITIONS
       Pre-built gradients using the theme colors
       ══════════════════════════════════════════════════════════════════════════════ */
    --theme-gradient: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 50%, var(--theme-tertiary) 100%);
    --theme-gradient-reverse: linear-gradient(135deg, var(--theme-tertiary) 0%, var(--theme-secondary) 50%, var(--theme-primary) 100%);
    --theme-gradient-horizontal: linear-gradient(90deg, var(--theme-primary) 0%, var(--theme-secondary) 50%, var(--theme-tertiary) 100%);
    --theme-gradient-vertical: linear-gradient(180deg, var(--theme-primary) 0%, var(--theme-tertiary) 100%);
    --theme-gradient-diagonal: linear-gradient(336.1deg, var(--theme-primary) 19.27%, var(--theme-tertiary) 84.21%);
    
    /* ══════════════════════════════════════════════════════════════════════════════
       SVG GRADIENT STOP COLORS
       Use these values in SVG <linearGradient> elements
       Example: <stop stop-color="var(--gradient-start)"/>
       ══════════════════════════════════════════════════════════════════════════════ */
    --gradient-start: #6366f1;     /* First <stop> color */
    --gradient-end: #a855f7;       /* Second <stop> color */
    
    /* Legacy color mappings (for backward compatibility) */
    --old-pink: #6366f1;           /* Replaces #E60C84 */
    --old-yellow: #a855f7;         /* Replaces #FFCF4B */
    
    /* ══════════════════════════════════════════════════════════════════════════════
       BACKGROUND COLORS
       ══════════════════════════════════════════════════════════════════════════════ */
    --bg-primary: #0d0d15;
    --bg-secondary: #1a1a2e;
    --bg-card: #0d0d15;
    --bg-dark: #000000;
    
    /* ══════════════════════════════════════════════════════════════════════════════
       BORDER COLORS
       ══════════════════════════════════════════════════════════════════════════════ */
    --border-subtle: rgba(99, 102, 241, 0.12);
    --border-medium: rgba(99, 102, 241, 0.15);
    --border-strong: rgba(99, 102, 241, 0.25);
    --border-hover: rgba(99, 102, 241, 0.4);
    
    /* ══════════════════════════════════════════════════════════════════════════════
       GLOW & SHADOW EFFECTS
       ══════════════════════════════════════════════════════════════════════════════ */
    --glow-primary: rgba(99, 102, 241, 0.1);
    --glow-secondary: rgba(139, 92, 246, 0.08);
    --glow-strong: rgba(99, 102, 241, 0.2);
    --shadow-card: 0 0 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(99, 102, 241, 0.05);
    
    /* ══════════════════════════════════════════════════════════════════════════════
       TEXT COLORS
       ══════════════════════════════════════════════════════════════════════════════ */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-accent: #a5b4fc;
    --text-accent-hover: #c7d2fe;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES USING THEME VARIABLES
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* Text Gradient - Premium style */
.text-theme-gradient {
    background: var(--theme-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Background Gradient */
.bg-theme-gradient {
    background: var(--theme-gradient);
}

/* Border with theme gradient */
.border-theme-gradient {
    border: 1px solid transparent;
    background-image: linear-gradient(var(--bg-card), var(--bg-card)), var(--theme-gradient);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

/* Glow effect on hover */
.theme-glow:hover {
    box-shadow: 0 0 30px var(--glow-primary), 0 0 60px var(--glow-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   OVERRIDE OLD GRADIENT COLORS
   These rules replace the old pink/yellow gradient with the new theme colors
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* Override heading-2 and heading-3 gradient classes */
.heading-2,
.heading-3,
.feature-text {
    background: var(--theme-gradient-diagonal) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Override text-gradient-1 */
.text-gradient-1 {
    background: linear-gradient(0.1deg, var(--theme-primary) 24.27%, var(--theme-tertiary) 77.73%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Override border gradients */
.border-design-1 {
    border-image: linear-gradient(to bottom, var(--theme-tertiary), var(--theme-primary)) 1 !important;
}

.wishlist-border {
    background-image: linear-gradient(white, white), var(--theme-gradient-diagonal) !important;
}

/* Override share button hover */
.share-button-hover:hover {
    background-image: var(--theme-gradient-diagonal) !important;
    color: white !important;
}

/* Override gallery slider active state */
.gallery-slider .swiper-slide-thumb-active img {
    background-image: linear-gradient(white, white), var(--theme-gradient-diagonal) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   SVG GRADIENT OVERRIDES
   Force SVG gradients to use theme colors
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* Override main menu and sidebar SVG gradients */
.main-menu linearGradient stop:first-child,
.sidebar-top linearGradient stop:first-child {
    stop-color: var(--gradient-start) !important;
}

.main-menu linearGradient stop:last-child,
.sidebar-top linearGradient stop:last-child {
    stop-color: var(--gradient-end) !important;
}

/* Dark mode overrides */
.dark .main-menu linearGradient stop,
.dark .sidebar-top linearGradient stop {
    stop-color: #FFFFFF;
}

/* Keep theme colors for specific elements even in dark mode */
.main-menu stop[stop-color="#6366f1"] {
    stop-color: #6366f1 !important;
}

.main-menu stop[stop-color="#a855f7"] {
    stop-color: #a855f7 !important;
}

.sidebar-top stop[stop-color="#6366f1"] {
    stop-color: #6366f1 !important;
}

.sidebar-top stop[stop-color="#a855f7"] {
    stop-color: #a855f7 !important;
}