/**
 * ============================================
 * BRAND CONFIGURATION - EASY CUSTOMIZATION
 * ============================================
 * 
 * 🎨 QUICK START:
 * Just change the 3 main colors below to customize the entire UI!
 * 
 * 1. PRIMARY_COLOR: Your main brand color (buttons, links, accents)
 * 2. SECONDARY_COLOR: Success/accent color (green by default)
 * 3. HERO_DARK: Dark color for hero/login backgrounds
 * 
 * 💡 TIP: Use these tools to generate color palettes:
 *    - https://uicolors.app/create (paste your hex color)
 *    - https://coolors.co/generate
 *    - https://tailwindcss.com/docs/customizing-colors
 */

:root {
    /* ==========================================
       🎨 MAIN BRAND COLORS - CHANGE THESE!
       ========================================== */
   
      /* Primary Brand Color */
      --brand-color: #281942;      /* Deep purple */
    
      /* Accent / Highlight Color */
      --brand-accent: #6A4FB3;     /* Soft vibrant purple for buttons & links */
    
      /* Hero / Dark Background */
      --brand-dark: #140C24;       /* Extra-dark purple for headers & hero sections */
    
        /*   Alternative color schemes (uncomment to use):*/
        /*   Blue theme:*/
        /*   --brand-color: #2563eb;*/
        /*   --brand-accent: #22c55e;*/
        /*   --brand-dark: #1e40af;*/
        /**
    
    /* ==========================================
       AUTO-GENERATED SHADES (from main colors)
       You can adjust these if needed
       ========================================== */
    
    /* Primary color shades - based on your brand color */
    /* Lighter shades (mix with white) */
    --brand-50: #fdf2f6;
    --brand-100: #fce4eb;
    --brand-200: #facede;
    --brand-300: #f5a3c2;
    --brand-400: #ed6f9c;
    --brand-500: var(--brand-color);
    --brand-600: var(--brand-color);
    --brand-700: var(--brand-dark);
    --brand-800: #4a0628;
    --brand-900: #300419;

    /* Gradient */
    --brand-gradient-start: var(--brand-color);
    --brand-gradient-end: var(--brand-700);
    
    /* Hero gradient */
    --brand-hero-start: var(--brand-dark);
    --brand-hero-end: var(--brand-color);
}

/* ==========================================
   TAILWIND-STYLE UTILITY OVERRIDES
   These override Tailwind's default blue-* classes
   to use your brand colors instead
   ========================================== */

/* Background overrides */
.bg-blue-50, .bg-brand-50 { background-color: var(--brand-50) !important; }
.bg-blue-100, .bg-brand-100 { background-color: var(--brand-100) !important; }
.bg-blue-200, .bg-brand-200 { background-color: var(--brand-200) !important; }
.bg-blue-500, .bg-brand-500 { background-color: var(--brand-500) !important; }
.bg-blue-600, .bg-brand-600 { background-color: var(--brand-color) !important; }
.bg-blue-700, .bg-brand-700 { background-color: var(--brand-700) !important; }
.bg-blue-800, .bg-brand-800 { background-color: var(--brand-800) !important; }
.bg-blue-900, .bg-brand-900 { background-color: var(--brand-900) !important; }

/* Text color overrides */
.text-blue-50, .text-brand-50 { color: var(--brand-50) !important; }
.text-blue-100, .text-brand-100 { color: var(--brand-100) !important; }
.text-blue-500, .text-brand-500 { color: var(--brand-500) !important; }
.text-blue-600, .text-brand-600 { color: var(--brand-color) !important; }
.text-blue-700, .text-brand-700 { color: var(--brand-700) !important; }
.text-blue-800, .text-brand-800 { color: var(--brand-800) !important; }

/* Border color overrides */
.border-blue-500, .border-brand-500 { border-color: var(--brand-500) !important; }
.border-blue-600, .border-brand-600 { border-color: var(--brand-color) !important; }

/* Ring/Focus overrides */
.ring-blue-500, .ring-brand-500 { --tw-ring-color: var(--brand-500) !important; }
.ring-blue-600, .ring-brand-600 { --tw-ring-color: var(--brand-color) !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: var(--brand-500) !important; }
.focus\:border-blue-500:focus { border-color: var(--brand-500) !important; }

/* Gradient overrides */
.from-blue-600, .from-brand { --tw-gradient-from: var(--brand-color) !important; }
.to-blue-700, .to-brand { --tw-gradient-to: var(--brand-700) !important; }
.from-blue-800 { --tw-gradient-from: var(--brand-800) !important; }
.to-blue-500 { --tw-gradient-to: var(--brand-500) !important; }
.from-blue-900 { --tw-gradient-from: var(--brand-900) !important; }

/* Hover state overrides */
.hover\:bg-blue-700:hover { background-color: var(--brand-700) !important; }
.hover\:bg-blue-50:hover { background-color: var(--brand-50) !important; }
.hover\:text-blue-600:hover { color: var(--brand-color) !important; }
.hover\:text-blue-800:hover { color: var(--brand-800) !important; }
.hover\:border-blue-600:hover { border-color: var(--brand-color) !important; }

/* Group hover overrides */
.group:hover .group-hover\:text-blue-600 { color: var(--brand-color) !important; }

/* ==========================================
   SPECIAL COMPONENTS
   ========================================== */

/* Gradient button */
.btn-gradient {
    background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end)) !important;
}

.btn-gradient:hover {
    background: linear-gradient(135deg, var(--brand-700), var(--brand-800)) !important;
}

/* Hero section */
.hero-gradient {
    background: linear-gradient(135deg, var(--brand-hero-start), var(--brand-hero-end)) !important;
}

/* Focus ring with brand color */
.focus-brand:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-color), 0.3) !important;
    border-color: var(--brand-color) !important;
}

/* Accent circles */
.accent-circle {
    background: linear-gradient(135deg, var(--brand-400), var(--brand-color)) !important;
}