/**
 * Shop Genius - Global Theme System
 *
 * This file contains all color variables for the application.
 * Change colors easily for seasonal themes by uncommenting sections below.
 */

:root {
    /* ========================================
       DEFAULT THEME (Futuristic Purple/Blue)
       v4.0.0 - Updated 2025-11-29
       ======================================== */

    /* Primary Colors - Royal Blue */
    --theme-primary: #667eea;           /* Royal Blue - Main brand color */
    --theme-primary-light: #818cf8;     /* Light Indigo - Light accents */
    --theme-primary-dark: #4f46e5;      /* Indigo-600 - Hover states */
    --theme-primary-lighter: #e0e7ff;   /* Indigo-100 - Very light backgrounds */

    /* Secondary Colors - Electric Purple */
    --theme-secondary: #764ba2;         /* Electric Purple - Secondary accents */
    --theme-secondary-light: #a78bfa;   /* Violet-400 - Light backgrounds */
    --theme-secondary-dark: #5b21b6;    /* Violet-800 - Dark accents */

    /* Accent Colors - Pink Glow */
    --theme-accent: #f093fb;            /* Pink Glow - Highlights, special effects */
    --theme-accent-light: #fae8ff;      /* Fuchsia-100 - Light backgrounds */

    /* Platform Brand Colors - Keep consistent across seasons */
    --platform-lazada: #0F156D;         /* Lazada blue */
    --platform-shopee: #EE4D2D;         /* Shopee orange-red */
    --platform-tamu: #FF6A00;           /* Tamu orange */
    --platform-aliexpress: #E62E04;     /* AliExpress red */

    /* Neutral Colors - Grays for text and backgrounds */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --white: #ffffff;

    /* Semantic Colors - Status and feedback */
    --success-color: #10b981;           /* Green - Success messages */
    --success-light: #d1fae5;
    --warning-color: #f59e0b;           /* Amber - Warnings */
    --warning-light: #fef3c7;
    --danger-color: #ef4444;            /* Red - Errors, delete */
    --danger-light: #fee2e2;
    --danger-50: #fef2f2;               /* Very light red/pink background */
    --danger-200: #fecaca;              /* Light red border */
    --danger-500: #ef4444;              /* Base red (same as --danger-color) */
    --danger-600: #dc2626;              /* Dark red text */
    --info-color: #3b82f6;              /* Blue - Info messages */
    --info-light: #dbeafe;

    /* Shadows - For depth and elevation */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --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);

    /* Border Radius - Consistent rounded corners */
    --radius-sm: 0.25rem;
    --radius: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* Star Rating Colors */
    --star-color: #FFA41C;              /* Amazon gold star */
    --star-color-hover: #fbbf24;        /* Hover/active state */

    /* Alert System Colors (Backgrounds + Text) */
    --alert-success-bg: #d1fae5;        /* Green background */
    --alert-success-text: #065f46;      /* Dark green text */
    --alert-error-bg: #fee2e2;          /* Red background */
    --alert-error-text: #991b1b;        /* Dark red text */
    --alert-warning-bg: #fef3c7;        /* Yellow background */
    --alert-warning-text: #92400e;      /* Dark amber text */
    --alert-info-bg: #dbeafe;           /* Blue background */
    --alert-info-text: #1e40af;         /* Dark blue text */

    /* Difficulty Badge Colors */
    --difficulty-easy-bg: #d1fae5;      /* Green - easy tasks */
    --difficulty-easy-text: #065f46;
    --difficulty-medium-bg: #fef3c7;    /* Yellow - medium tasks */
    --difficulty-medium-text: #92400e;
    --difficulty-hard-bg: #fee2e2;      /* Red - hard tasks */
    --difficulty-hard-text: #991b1b;

    /* Light Cyan Theme Colors (From User's Image) */
    --theme-bg-cyan: #D4F1F4;           /* Light cyan background */
    --theme-bg-blue-light: #E0F7FA;     /* Alternative light blue */
    --theme-accent-blue: #75E6DA;       /* Cyan accent for decorations */
    --theme-icon-dark: #3D3D3D;         /* Dark gray for icons/text */
    --theme-card-white: #FFFFFF;        /* Pure white for cards */

    /* Gradient Variables - Reusable gradients (theme-aware) */
    --gradient-primary: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    --gradient-secondary: linear-gradient(135deg, var(--theme-secondary), var(--theme-secondary-dark));
    --gradient-success: linear-gradient(135deg, #10b981, #059669);
    --gradient-info: linear-gradient(135deg, #dbeafe, #e0e7ff);
    --gradient-warning: linear-gradient(135deg, #f59e0b, #d97706);
    --gradient-danger: linear-gradient(135deg, #ef4444, #dc2626);
    --gradient-shine: linear-gradient(90deg, var(--theme-primary), var(--theme-accent), var(--theme-primary));

    /* Glow Shadows - For futuristic effects */
    --shadow-glow-blue: 0 0 30px rgba(102, 126, 234, 0.6);
    --shadow-glow-purple: 0 0 30px rgba(118, 75, 162, 0.6);
    --shadow-glow-pink: 0 0 20px rgba(240, 147, 251, 0.5);

    /* Dark Section Colors */
    --dark-bg-primary: #0f0f23;         /* Deep Navy */
    --dark-bg-secondary: #1a1a3e;       /* Dark Purple */
    --dark-surface: #2a2a4a;            /* Card surface on dark bg */
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #a0a0c0;
    --dark-text-muted: #666680;
}


/* ========================================
   SEASONAL THEMES
   Uncomment the theme you want to use
   ======================================== */

/* ---------------------------------------
   CHRISTMAS THEME (Red & Green)
   Uncomment for December holidays
   --------------------------------------- */
/*
:root {
    --theme-primary: #DC2626;
    --theme-primary-light: #FEE2E2;
    --theme-primary-dark: #991B1B;
    --theme-primary-lighter: #FEF2F2;

    --theme-secondary: #16A34A;
    --theme-secondary-light: #DCFCE7;
    --theme-secondary-dark: #15803D;

    --theme-accent: #F59E0B;
    --theme-accent-light: #FEF3C7;
}
*/

/* ---------------------------------------
   NEW YEAR THEME (Gold & Blue)
   Uncomment for New Year celebrations
   --------------------------------------- */
/*
:root {
    --theme-primary: #F59E0B;
    --theme-primary-light: #FEF3C7;
    --theme-primary-dark: #B45309;
    --theme-primary-lighter: #FFFBEB;

    --theme-secondary: #3B82F6;
    --theme-secondary-light: #DBEAFE;
    --theme-secondary-dark: #1D4ED8;

    --theme-accent: #8B5CF6;
    --theme-accent-light: #EDE9FE;
}
*/

/* ---------------------------------------
   VALENTINE'S DAY (Romantic Pink & Red)
   Uncomment for February 14th
   --------------------------------------- */
/*
:root {
    --theme-primary: #F472B6;
    --theme-primary-light: #FCE7F3;
    --theme-primary-dark: #DB2777;
    --theme-primary-lighter: #FDF2F8;

    --theme-secondary: #EF4444;
    --theme-secondary-light: #FEE2E2;
    --theme-secondary-dark: #DC2626;

    --theme-accent: #EC4899;
    --theme-accent-light: #FCE7F3;
}
*/

/* ---------------------------------------
   SUMMER SALE (Bright Orange & Yellow)
   Uncomment for summer promotions
   --------------------------------------- */
/*
:root {
    --theme-primary: #F97316;
    --theme-primary-light: #FFEDD5;
    --theme-primary-dark: #C2410C;
    --theme-primary-lighter: #FFF7ED;

    --theme-secondary: #EAB308;
    --theme-secondary-light: #FEF9C3;
    --theme-secondary-dark: #A16207;

    --theme-accent: #FB923C;
    --theme-accent-light: #FFEDD5;
}
*/

/* ---------------------------------------
   BLACK FRIDAY (Black & Yellow)
   Uncomment for Black Friday sales
   --------------------------------------- */
/*
:root {
    --theme-primary: #18181B;
    --theme-primary-light: #E4E4E7;
    --theme-primary-dark: #09090B;
    --theme-primary-lighter: #FAFAFA;

    --theme-secondary: #EAB308;
    --theme-secondary-light: #FEF9C3;
    --theme-secondary-dark: #A16207;

    --theme-accent: #F59E0B;
    --theme-accent-light: #FEF3C7;
}
*/

/* ---------------------------------------
   HALLOWEEN (Orange & Purple)
   Uncomment for October 31st
   --------------------------------------- */
/*
:root {
    --theme-primary: #EA580C;
    --theme-primary-light: #FFEDD5;
    --theme-primary-dark: #C2410C;
    --theme-primary-lighter: #FFF7ED;

    --theme-secondary: #9333EA;
    --theme-secondary-light: #F3E8FF;
    --theme-secondary-dark: #6B21A8;

    --theme-accent: #A855F7;
    --theme-accent-light: #F3E8FF;
}
*/

/* ========================================
   USAGE EXAMPLES
   ======================================== */

/*
Usage in your CSS:

.primary-button {
    background-color: var(--theme-primary);
    color: var(--white);
}

.primary-button:hover {
    background-color: var(--theme-primary-dark);
}

.product-card {
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.lazada-badge {
    background-color: var(--platform-lazada);
}
*/

/* ========================================
   THEME SWITCHING SYSTEM
   Modern data-attribute based themes
   Change theme by adding data-theme attribute to <body>
   Example: <body data-theme="cyan">
   ======================================== */

/* Default Theme - Futuristic Purple/Blue */
[data-theme="default"], :root {
    --theme-primary: #667eea;
    --theme-primary-light: #818cf8;
    --theme-primary-dark: #4f46e5;
    --theme-secondary: #764ba2;

    /* Component variable aliases */
    --primary-color: #667eea;
    --primary-light: #818cf8;
    --primary-dark: #4f46e5;
    --secondary-color: #764ba2;
    --body-bg: #ffffff;
}

/* Royal Blue Elegance Theme - Deep, sophisticated, multi-color */
[data-theme="cyan"] {
    /* Primary - Royal Blue family */
    --theme-primary: #1e40af;           /* Royal Blue */
    --theme-primary-light: #93c5fd;     /* Light Sky Blue */
    --theme-primary-dark: #1e3a8a;      /* Deep Royal Blue */
    --theme-primary-lighter: #dbeafe;   /* Powder Blue */

    /* Secondary - Teal/Turquoise family */
    --theme-secondary: #14b8a6;         /* Vibrant Teal */
    --theme-secondary-dark: #0d9488;    /* Deep Teal */
    --theme-secondary-light: #99f6e4;   /* Light Aqua */

    /* Accent - Gold elegance */
    --theme-accent: #f59e0b;            /* Warm Gold */
    --theme-accent-light: #fcd34d;      /* Light Gold */

    /* Component variable aliases (for theme switching) */
    --primary-color: #1e40af;           /* Royal Blue */
    --primary-light: #93c5fd;           /* Light Sky Blue */
    --primary-dark: #1e3a8a;            /* Deep Royal Blue */
    --secondary-color: #14b8a6;         /* Vibrant Teal */

    /* Backgrounds */
    --body-bg: #ffffff;                 /* Pure white */
    --card-bg: #f8fafc;                 /* Very light gray */

    /* Text colors (for elegance and contrast) */
    --text-primary: #0f172a;            /* Deep navy */
    --text-secondary: #334155;          /* Dark gray-blue */
    --text-muted: #64748b;              /* Medium gray */
}

/* Christmas Theme - Red & Green Festive */
[data-theme="christmas"] {
    --theme-primary: #DC2626;           /* Christmas red */
    --theme-primary-light: #FEE2E2;
    --theme-primary-dark: #991B1B;
    --theme-secondary: #16A34A;         /* Christmas green */
    --theme-accent: #F59E0B;            /* Gold accent */

    /* Component variable aliases */
    --primary-color: #DC2626;
    --primary-light: #FEE2E2;
    --primary-dark: #991B1B;
    --secondary-color: #16A34A;
    --body-bg: #F9FAFB;
}

/* Black Friday Theme - Dark & Bold */
[data-theme="blackfriday"] {
    --theme-primary: #1F2937;           /* Almost black */
    --theme-primary-light: #F3F4F6;
    --theme-primary-dark: #000000;      /* Pure black */
    --theme-secondary: #EF4444;         /* Hot red for deals */
    --theme-accent: #EAB308;            /* Yellow tag */

    /* Component variable aliases */
    --primary-color: #1F2937;
    --primary-light: #F3F4F6;
    --primary-dark: #000000;
    --secondary-color: #EF4444;
    --body-bg: #111827;
}

/* Summer Sale Theme - Bright & Energetic */
[data-theme="summer"] {
    --theme-primary: #F59E0B;           /* Sunny amber */
    --theme-primary-light: #FEF3C7;
    --theme-primary-dark: #B45309;
    --theme-secondary: #10B981;         /* Fresh green */
    --theme-accent: #FB923C;            /* Orange accent */

    /* Component variable aliases */
    --primary-color: #F59E0B;
    --primary-light: #FEF3C7;
    --primary-dark: #B45309;
    --secondary-color: #10B981;
    --body-bg: #FFFBEB;
}

/* Valentine's Day Theme - Romantic Pink & Red */
[data-theme="valentine"] {
    --theme-primary: #EC4899;           /* Hot pink */
    --theme-primary-light: #FCE7F3;
    --theme-primary-dark: #BE185D;
    --theme-secondary: #EF4444;         /* Love red */
    --theme-accent: #F472B6;            /* Soft pink */

    /* Component variable aliases */
    --primary-color: #EC4899;
    --primary-light: #FCE7F3;
    --primary-dark: #BE185D;
    --secondary-color: #EF4444;
    --body-bg: #FDF2F8;
}

/* New Year Theme - Gold & Elegant */
[data-theme="newyear"] {
    --theme-primary: #F59E0B;           /* Gold */
    --theme-primary-light: #FEF3C7;
    --theme-primary-dark: #B45309;
    --theme-secondary: #3B82F6;         /* Midnight blue */
    --theme-accent: #8B5CF6;            /* Purple celebration */

    /* Component variable aliases */
    --primary-color: #F59E0B;
    --primary-light: #FEF3C7;
    --primary-dark: #B45309;
    --secondary-color: #3B82F6;
    --body-bg: #FFFBEB;
}

/* Halloween Theme - Spooky Orange & Purple */
[data-theme="halloween"] {
    --theme-primary: #EA580C;           /* Pumpkin orange */
    --theme-primary-light: #FFEDD5;
    --theme-primary-dark: #C2410C;
    --theme-secondary: #9333EA;         /* Spooky purple */
    --theme-accent: #A855F7;            /* Witch purple */

    /* Component variable aliases */
    --primary-color: #EA580C;
    --primary-light: #FFEDD5;
    --primary-dark: #C2410C;
    --secondary-color: #9333EA;
    --body-bg: #FFF7ED;
}

/* Spring Theme - Fresh Mint Green & Cherry Blossom Pink */
[data-theme="spring"] {
    --theme-primary: #4caf50;           /* Grass green */
    --theme-primary-light: #c8e6c9;     /* Soft green */
    --theme-primary-dark: #2e7d32;      /* Forest green */
    --theme-primary-lighter: #e8f5e9;   /* Mint green */
    --theme-secondary: #e91e63;         /* Cherry pink */
    --theme-secondary-light: #fce4ec;   /* Blossom pink */
    --theme-accent: #ffb7c5;            /* Petal pink */
    --theme-accent-light: #fff0f3;      /* Light blossom */

    /* Component variable aliases */
    --primary-color: #4caf50;
    --primary-light: #c8e6c9;
    --primary-dark: #2e7d32;
    --secondary-color: #e91e63;
    --body-bg: #e8f5e9;
}

/* Autumn Theme - Warm Orange & Brown */
[data-theme="autumn"] {
    --theme-primary: #ff8c00;           /* Dark orange */
    --theme-primary-light: #ffcc80;     /* Light orange */
    --theme-primary-dark: #e65100;      /* Deep orange */
    --theme-primary-lighter: #fff3e0;   /* Cream orange */
    --theme-secondary: #8b4513;         /* Saddle brown */
    --theme-secondary-light: #d7ccc8;   /* Light brown */
    --theme-accent: #daa520;            /* Goldenrod */
    --theme-accent-light: #fff8e1;      /* Light gold */

    /* Component variable aliases */
    --primary-color: #ff8c00;
    --primary-light: #ffcc80;
    --primary-dark: #e65100;
    --secondary-color: #8b4513;
    --body-bg: #fff3e0;
}