/**
 * ============================================
 * MASTER CSS VARIABLES - THEME CONFIGURATION
 * ============================================
 *
 * This file is the SINGLE SOURCE OF TRUTH for all theme variables.
 * Changing values here will update the entire USER dashboard theme.
 *
 * DO NOT edit colors directly in other CSS files.
 * ALWAYS use these CSS variables via var(--variable-name)
 *
 * To change the entire theme:
 * 1. Edit color values in this file
 * 2. Or override via inline styles in app.blade.php (for admin-controlled colors)
 * 3. Or use data-theme attribute for theme switching
 */

:root {
    /* ============================================
       PRIMARY BRAND COLORS
       CHANGE THESE TO CHANGE ENTIRE THEME
       ============================================ */

    /* Main Primary Color - Used for buttons, links, highlights */
    --color-primary: #010a12;      /* #1E73BE; */
    --color-primary-dark: #155A96;        /* Hover states */
    --color-primary-light: #E3F2FD;       /* Backgrounds */
    --color-primary-rgb: 30, 115, 190;    /* For transparency effects */

    /* Main Secondary Color - Used for accents */
    --color-secondary: #FFA500;   /* #FFA500; */
    --color-secondary-dark: #CC8400;
    --color-secondary-light: #FFF3E0;

    /* Legacy support - Maps to existing variables in app.blade.php */
    --base: var(--color-primary);
    --base-2: var(--color-secondary);
    --web-primary: var(--color-primary);
    --web-secondary: var(--color-secondary);
    --web-primary-10: var(--color-primary);
    --web-primary-20: var(--color-primary);
    --web-primary-40: var(--color-primary);

    /* ============================================
       SEMANTIC COLORS - For States & Messages
       ============================================ */

    --color-success: #4CAF50;             /* Success messages, available items */
    --color-danger: #F44336;              /* Errors, sold out, delete */
    --color-warning: #FF9800;             /* Warnings, low stock */
    --color-info: #2196F3;                /* Information, tooltips */

    /* ============================================
       NEUTRAL COLORS - Grayscale Palette
       ============================================ */

    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-gray-100: #F5F5F5;            /* Lightest - backgrounds */
    --color-gray-200: #EEEEEE;            /* Very light */
    --color-gray-300: #E0E0E0;            /* Light borders */
    --color-gray-400: #BDBDBD;            /* Medium light */
    --color-gray-500: #9E9E9E;            /* Medium */
    --color-gray-600: #757575;            /* Medium dark */
    --color-gray-700: #616161;            /* Dark */
    --color-gray-800: #424242;            /* Very dark */
    --color-gray-900: #212121;            /* Darkest - text */

    /* ============================================
       TEXT COLORS
       ============================================ */

    --color-text-primary: #fbf6f6;        /* #212121 Main text */
    --color-text-secondary: #757575;      /* Secondary text */
    --color-text-disabled: #BDBDBD;       /* Disabled elements */
    --color-text-hint: #9E9E9E;           /* Placeholder text */
    --color-text-white: #FFFFFF;          /* White text (for dark backgrounds) */

   /* DARK LIGHT THEME SUPPORT BELOW */
    --color-bg-dark-light: #000006;       /* Dark or Light Background Change here */
    --color-bg-light: #FFFFFF;       /* Dark or Light Background Change here */
    --color-text-bg-dark-light: #f7f5f5;  /* Text color for dark or light background */
    --color-text-bg-dark: #000000;  /* Text color for dark or light background */
    --color-hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

/* ============================================
       BACKGROUND COLORS
       CHANGE THESE TO CHANGE SITE BACKGROUNDS       
   ============================================ */

    --color-bg-primary: #FFFFFF;          /* Main page background - KEEP WHITE */
    --color-bg-secondary: #FFFFFF;        /* Secondary backgrounds, sections - KEEP WHITE */
    --color-bg-dark: #212121;             /* Dark sections */

    /* ============================================
       BORDER COLORS
       ============================================ */

    --color-border: #E0E0E0;              /* Default borders */
    --color-border-light: #EEEEEE;        /* Light borders */
    --color-border-dark: #BDBDBD;         /* Dark borders */

    /* ============================================
       PRODUCT-SPECIFIC COLORS
       CHANGE THESE TO CUSTOMIZE PRODUCT DISPLAYS
       ============================================ */

    --product-card-bg: var(--color-black);
    --product-card-border: var(--color-border);
    --product-card-hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --product-title-color: var(--color-text-primary);
    --product-price-color: var(--color-white);
    --product-discount-bg: var(--color-white);
    --product-discount-color: var(--color-white);
    --product-badge-new-bg: var(--color-success);
    --product-badge-sale-bg: var(--color-danger);

    /* ============================================
       CATEGORY-SPECIFIC COLORS
       CHANGE THESE TO CUSTOMIZE CATEGORY DISPLAYS
       ============================================ */

    --category-card-bg: var(--color-white);
    --category-card-border: var(--color-border);
    --category-card-hover-bg: var(--color-primary-light);
    --category-title-color: var(--color-text-white);
    --category-count-color: var(--color-text-white);

    /* ============================================
       TYPOGRAPHY - Font System
       ============================================ */

    --font-family-primary: 'Roboto', sans-serif;
    --font-family-secondary: 'Open Sans', sans-serif;
    --font-family-heading: 'Poppins', sans-serif;
    --font-family-mono: 'Courier New', monospace;

    /* Font Sizes */
    --font-size-xs: 0.75rem;              /* 12px */
    --font-size-sm: 0.875rem;             /* 14px */
    --font-size-base: 1rem;               /* 16px */
    --font-size-lg: 1.125rem;             /* 18px */
    --font-size-xl: 1.25rem;              /* 20px */
    --font-size-2xl: 1.5rem;              /* 24px */
    --font-size-3xl: 1.875rem;            /* 30px */
    --font-size-4xl: 2.25rem;             /* 36px */

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;

    /* ============================================
       SPACING SYSTEM
       ============================================ */

    --spacing-xs: 0.25rem;                /* 4px */
    --spacing-sm: 0.5rem;                 /* 8px */
    --spacing-md: 1rem;                   /* 16px */
    --spacing-lg: 1.5rem;                 /* 24px */
    --spacing-xl: 2rem;                   /* 32px */
    --spacing-2xl: 3rem;                  /* 48px */
    --spacing-3xl: 4rem;                  /* 64px */
    --spacing-4xl: 6rem;                  /* 96px */

    /* ============================================
       BORDERS & RADIUS
       ============================================ */

    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;

    --border-radius-sm: 0.25rem;          /* 4px */
    --border-radius-md: 0.375rem;         /* 6px */
    --border-radius-lg: 0.5rem;           /* 8px */
    --border-radius-xl: 0.75rem;          /* 12px */
    --border-radius-2xl: 1rem;            /* 16px */
    --border-radius-full: 9999px;         /* Fully rounded */

    /* ============================================
       SHADOWS - Depth & Elevation
       ============================================ */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* ============================================
       TRANSITIONS & ANIMATIONS
       ============================================ */

    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-slower: 500ms ease;

    /* ============================================
       Z-INDEX LAYERS - Stacking Order
       ============================================ */

    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;

    /* ============================================
       BREAKPOINTS (for reference in JS)
       ============================================ */

    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;

    /* ============================================
       RTL/LTR DIRECTION SUPPORT
       ============================================ */

    --direction: ltr;
    --text-align-start: left;
    --text-align-end: right;
    --web-direction: ltr;
    --text-align-direction: left;
    --text-align-direction-alt: right;
}

/* ============================================
   RTL (Right-to-Left) OVERRIDE
   For Arabic, Hebrew, Urdu, etc.
   ============================================ */

html[dir="rtl"] {
    --direction: rtl;
    --text-align-start: right;
    --text-align-end: left;
    --web-direction: rtl;
    --text-align-direction: right;
    --text-align-direction-alt: left;
}

/* ============================================
   DARK THEME OVERRIDE
   Toggle with: data-theme="dark" on html element
   ============================================ */

[data-theme="dark"],
.dark-theme {
    /* Primary colors remain the same for brand consistency */

    /* Inverted neutral colors */
    --color-gray-100: #212121;
    --color-gray-200: #424242;
    --color-gray-300: #616161;
    --color-gray-400: #757575;
    --color-gray-500: #9E9E9E;
    --color-gray-600: #BDBDBD;
    --color-gray-700: #E0E0E0;
    --color-gray-800: #EEEEEE;
    --color-gray-900: #F5F5F5;

    /* Dark theme text colors */
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #BDBDBD;
    --color-text-disabled: #757575;

    /* Dark theme backgrounds */
    --color-bg-primary: #121212;
    --color-bg-secondary: #1E1E1E;

    /* Dark theme borders */
    --color-border: #424242;
    --color-border-light: #2C2C2C;
    --color-border-dark: #616161;

    /* Dark theme product colors */
    --product-card-bg: #1E1E1E;
    --product-card-border: #424242;

    /* Dark theme category colors */
    --category-card-bg: #1E1E1E;
    --category-card-border: #424242;
    --category-card-hover-bg: #2C2C2C;
}

/* ============================================
   SEASONAL/SPECIAL THEMES (Optional)
   Uncomment and customize as needed
   ============================================ */

/*
[data-theme="winter"] {
    --color-primary: #2196F3;
    --color-secondary: #00BCD4;
}

[data-theme="summer"] {
    --color-primary: #FF9800;
    --color-secondary: #FFC107;
}

[data-theme="festive"] {
    --color-primary: #E91E63;
    --color-secondary: #9C27B0;
}
*/

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

   BUTTONS:
   .btn-primary {
       background-color: var(--color-primary);
       color: var(--color-white);
       border-radius: var(--border-radius-md);
       padding: var(--spacing-sm) var(--spacing-lg);
   }

   PRODUCT CARDS:
   .product-card {
       background-color: var(--product-card-bg);
       border: 1px solid var(--product-card-border);
       border-radius: var(--border-radius-lg);
   }

   CATEGORY CARDS:
   .category-card {
       background-color: var(--category-card-bg);
       color: var(--category-title-color);
   }

   ============================================ */