/* ===================================
   DHIRAJ CHEMICALS - COLOR SCHEMES
   ===================================
   
   Configurable color system for easy theme customization.
   To change colors, modify the values in the :root section below.
   
   Color Categories:
   1. Brand Colors - Primary brand colors
   2. Background Colors - Page and section backgrounds  
   3. Text Colors - All text content
   4. Interactive Colors - Buttons, links, hover states
   5. Neutral Colors - Borders, dividers, subtle elements
   6. Semantic Colors - Success, error, warning states
   7. Shadow Colors - Drop shadows and depth
*/

/* ===================================
   DEFAULT COLOR SCHEME - DHIRAJ BLUE
   =================================== */

:root {
    /* === BRAND COLORS === */
    --color-brand-primary: #1e3a8a;      /* Deep blue - main brand color */
    --color-brand-secondary: #64748b;     /* Slate gray - secondary brand */
    --color-brand-accent: #f97316;        /* Orange - accent highlights */
    --color-brand-accent-light: #fed7aa;  /* Light orange for subtle accents */
    
    /* === BACKGROUND COLORS === */
    --color-bg-primary: #f8fafc;          /* Light gray - main background */
    --color-bg-secondary: #ffffff;        /* Pure white - cards, sections */
    --color-bg-tertiary: #f1f5f9;         /* Slightly darker gray - alternate sections */
    --color-bg-overlay: rgba(0, 0, 0, 0.8); /* Dark overlay for modals */
    
    /* === TEXT COLORS === */
    --color-text-primary: #1f2937;        /* Dark gray - main text */
    --color-text-secondary: #6b7280;      /* Medium gray - secondary text */
    --color-text-tertiary: #9ca3af;       /* Light gray - subtle text */
    --color-text-inverse: #ffffff;        /* White text on dark backgrounds */
    --color-text-muted: #d1d5db;          /* Very light gray - disabled text */
    
    /* === INTERACTIVE COLORS === */
    --color-interactive-primary: #1e3a8a;    /* Primary button color */
    --color-interactive-primary-hover: #1e40af; /* Primary button hover */
    --color-interactive-secondary: #64748b;   /* Secondary button color */
    --color-interactive-secondary-hover: #475569; /* Secondary button hover */
    --color-interactive-accent: #f97316;      /* Accent button color */
    --color-interactive-accent-hover: #ea580c; /* Accent button hover */
    --color-interactive-link: #1e3a8a;        /* Link color */
    --color-interactive-link-hover: #f97316;  /* Link hover color */
    
    /* === NEUTRAL COLORS === */
    --color-neutral-border: #e5e7eb;       /* Standard borders */
    --color-neutral-border-light: #f3f4f6; /* Light borders */
    --color-neutral-border-dark: #d1d5db;  /* Darker borders */
    --color-neutral-divider: #e5e7eb;      /* Section dividers */
    
    /* === SEMANTIC COLORS === */
    --color-semantic-success: #10b981;     /* Success states */
    --color-semantic-success-bg: #d1fae5;  /* Success background */
    --color-semantic-warning: #f59e0b;     /* Warning states */
    --color-semantic-warning-bg: #fef3c7;  /* Warning background */
    --color-semantic-error: #ef4444;       /* Error states */
    --color-semantic-error-bg: #fee2e2;    /* Error background */
    --color-semantic-info: #3b82f6;        /* Info states */
    --color-semantic-info-bg: #dbeafe;     /* Info background */
    
    /* === SHADOW COLORS === */
    --color-shadow-light: rgba(0, 0, 0, 0.1);  /* Light shadows */
    --color-shadow-medium: rgba(0, 0, 0, 0.15); /* Medium shadows */
    --color-shadow-dark: rgba(0, 0, 0, 0.25);   /* Dark shadows */
    --color-shadow-colored: rgba(30, 58, 138, 0.15); /* Brand-colored shadow */
    
    /* === LEGACY MAPPINGS === */
    /* Map new system to existing variable names for backward compatibility */
    --primary: var(--color-brand-primary);
    --secondary: var(--color-brand-secondary);
    --accent: var(--color-brand-accent);
    --bg-primary: var(--color-bg-primary);
    --bg-secondary: var(--color-bg-secondary);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-light: var(--color-text-tertiary);
    --border: var(--color-neutral-border);
}

/* ===================================
   ALTERNATIVE COLOR SCHEMES
   =================================== */

/* Green Chemical Theme */
.theme-green {
    --color-brand-primary: #059669;       /* Emerald green */
    --color-brand-secondary: #64748b;     /* Keep slate gray */
    --color-brand-accent: #f59e0b;        /* Amber accent */
    --color-brand-accent-light: #fef3c7;
    
    --color-interactive-primary: #059669;
    --color-interactive-primary-hover: #047857;
    --color-interactive-accent: #f59e0b;
    --color-interactive-accent-hover: #d97706;
    --color-interactive-link: #059669;
    --color-interactive-link-hover: #f59e0b;
    
    --color-shadow-colored: rgba(5, 150, 105, 0.15);
    
    /* Legacy mappings */
    --primary: var(--color-brand-primary);
    --secondary: var(--color-brand-secondary);
    --accent: var(--color-brand-accent);
}

/* Professional Navy Theme */
.theme-navy {
    --color-brand-primary: #1e40af;       /* Navy blue */
    --color-brand-secondary: #64748b;     /* Keep slate gray */
    --color-brand-accent: #dc2626;        /* Red accent */
    --color-brand-accent-light: #fee2e2;
    
    --color-interactive-primary: #1e40af;
    --color-interactive-primary-hover: #1d4ed8;
    --color-interactive-accent: #dc2626;
    --color-interactive-accent-hover: #b91c1c;
    --color-interactive-link: #1e40af;
    --color-interactive-link-hover: #dc2626;
    
    --color-shadow-colored: rgba(30, 64, 175, 0.15);
}

/* Modern Teal Theme */
.theme-teal {
    --color-brand-primary: #0d9488;       /* Teal */
    --color-brand-secondary: #64748b;     /* Keep slate gray */
    --color-brand-accent: #8b5cf6;        /* Purple accent */
    --color-brand-accent-light: #ede9fe;
    
    --color-interactive-primary: #0d9488;
    --color-interactive-primary-hover: #0f766e;
    --color-interactive-accent: #8b5cf6;
    --color-interactive-accent-hover: #7c3aed;
    --color-interactive-link: #0d9488;
    --color-interactive-link-hover: #8b5cf6;
    
    --color-shadow-colored: rgba(13, 148, 136, 0.15);
}

/* Spotify Theme - Vibrant Green */
.theme-spotify {
    --color-brand-primary: #1db954;       /* Spotify green */
    --color-brand-secondary: #64748b;     /* Keep slate gray */
    --color-brand-accent: #1ed760;        /* Brighter green accent */
    --color-brand-accent-light: #dcfce7;
    
    --color-interactive-primary: #1db954;
    --color-interactive-primary-hover: #1ed760;
    --color-interactive-secondary: #64748b;
    --color-interactive-secondary-hover: #475569;
    --color-interactive-accent: #1ed760;
    --color-interactive-accent-hover: #22c55e;
    --color-interactive-link: #1db954;
    --color-interactive-link-hover: #1ed760;
    
    --color-shadow-colored: rgba(29, 185, 84, 0.15);
}

/* Stripe Theme - Elegant Purple */
.theme-stripe {
    --color-brand-primary: #635bff;       /* Stripe purple */
    --color-brand-secondary: #64748b;     /* Keep slate gray */
    --color-brand-accent: #0070f3;        /* Blue accent */
    --color-brand-accent-light: #dbeafe;
    
    --color-interactive-primary: #635bff;
    --color-interactive-primary-hover: #5b52ff;
    --color-interactive-secondary: #64748b;
    --color-interactive-secondary-hover: #475569;
    --color-interactive-accent: #0070f3;
    --color-interactive-accent-hover: #0061d5;
    --color-interactive-link: #635bff;
    --color-interactive-link-hover: #0070f3;
    
    --color-shadow-colored: rgba(99, 91, 255, 0.15);
}

/* Slack Theme - Warm Aubergine */
.theme-slack {
    --color-brand-primary: #4a154b;       /* Slack aubergine */
    --color-brand-secondary: #64748b;     /* Keep slate gray */
    --color-brand-accent: #007a5a;        /* Slack green */
    --color-brand-accent-light: #dcfdf7;
    
    --color-interactive-primary: #4a154b;
    --color-interactive-primary-hover: #611f69;
    --color-interactive-secondary: #64748b;
    --color-interactive-secondary-hover: #475569;
    --color-interactive-accent: #007a5a;
    --color-interactive-accent-hover: #059669;
    --color-interactive-link: #4a154b;
    --color-interactive-link-hover: #007a5a;
    
    --color-shadow-colored: rgba(74, 21, 75, 0.15);
}

/* Notion Theme - Soft Black & Gold */
.theme-notion {
    --color-brand-primary: #2f3437;       /* Notion dark gray */
    --color-brand-secondary: #64748b;     /* Keep slate gray */
    --color-brand-accent: #fbbf24;        /* Gold accent */
    --color-brand-accent-light: #fef3c7;
    
    --color-interactive-primary: #2f3437;
    --color-interactive-primary-hover: #374151;
    --color-interactive-secondary: #64748b;
    --color-interactive-secondary-hover: #475569;
    --color-interactive-accent: #fbbf24;
    --color-interactive-accent-hover: #f59e0b;
    --color-interactive-link: #2f3437;
    --color-interactive-link-hover: #fbbf24;
    
    --color-shadow-colored: rgba(47, 52, 55, 0.15);
    
    /* Legacy mappings for compatibility with existing CSS */
    --primary: var(--color-brand-primary);
    --secondary: var(--color-brand-secondary);
    --accent: var(--color-brand-accent);
    --bg-primary: var(--color-bg-primary);
    --bg-secondary: var(--color-bg-secondary);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-light: var(--color-text-tertiary);
    --border: var(--color-neutral-border);
}

/* Linear Theme - Modern Purple Gradient */
.theme-linear {
    --color-brand-primary: #8b5cf6;       /* Purple */
    --color-brand-secondary: #64748b;     /* Keep slate gray */
    --color-brand-accent: #06b6d4;        /* Cyan accent */
    --color-brand-accent-light: #cffafe;
    
    --color-interactive-primary: #8b5cf6;
    --color-interactive-primary-hover: #7c3aed;
    --color-interactive-secondary: #64748b;
    --color-interactive-secondary-hover: #475569;
    --color-interactive-accent: #06b6d4;
    --color-interactive-accent-hover: #0891b2;
    --color-interactive-link: #8b5cf6;
    --color-interactive-link-hover: #06b6d4;
    
    --color-shadow-colored: rgba(139, 92, 246, 0.15);
}

/* Figma Theme - Vibrant Multi-color */
.theme-figma {
    --color-brand-primary: #0d99ff;       /* Figma blue */
    --color-brand-secondary: #64748b;     /* Keep slate gray */
    --color-brand-accent: #ff6250;        /* Figma orange-red */
    --color-brand-accent-light: #fef2f2;
    
    --color-interactive-primary: #0d99ff;
    --color-interactive-primary-hover: #0284c7;
    --color-interactive-secondary: #64748b;
    --color-interactive-secondary-hover: #475569;
    --color-interactive-accent: #ff6250;
    --color-interactive-accent-hover: #ef4444;
    --color-interactive-link: #0d99ff;
    --color-interactive-link-hover: #ff6250;
    
    --color-shadow-colored: rgba(13, 153, 255, 0.15);
}

/* Airbnb Theme - Coral Pink */
.theme-airbnb {
    --color-brand-primary: #ff5a5f;       /* Airbnb coral */
    --color-brand-secondary: #64748b;     /* Keep slate gray */
    --color-brand-accent: #00a699;        /* Teal accent */
    --color-brand-accent-light: #f0fdfa;
    
    --color-interactive-primary: #ff5a5f;
    --color-interactive-primary-hover: #ff385c;
    --color-interactive-secondary: #64748b;
    --color-interactive-secondary-hover: #475569;
    --color-interactive-accent: #00a699;
    --color-interactive-accent-hover: #0d9488;
    --color-interactive-link: #ff5a5f;
    --color-interactive-link-hover: #00a699;
    
    --color-shadow-colored: rgba(255, 90, 95, 0.15);
}

/* ===================================
   DHIRAJ LOGO-BASED THEMES
   =================================== */

/* Dhiraj Blue Theme - Based on logo's blue element */
.theme-dhiraj-blue {
    --color-brand-primary: #1e5f74;       /* Logo deep blue */
    --color-brand-secondary: #64748b;     /* Keep slate gray */
    --color-brand-accent: #f97316;        /* Logo orange as accent */
    --color-brand-accent-light: #fed7aa;
    
    --color-interactive-primary: #1e5f74;
    --color-interactive-primary-hover: #0f4c5c;
    --color-interactive-secondary: #64748b;
    --color-interactive-secondary-hover: #475569;
    --color-interactive-accent: #f97316;
    --color-interactive-accent-hover: #ea580c;
    --color-interactive-link: #1e5f74;
    --color-interactive-link-hover: #f97316;
    
    --color-shadow-colored: rgba(30, 95, 116, 0.15);
}

/* Dhiraj Green Theme - Based on logo's green element */
.theme-dhiraj-green {
    --color-brand-primary: #7cb342;       /* Logo vibrant green */
    --color-brand-secondary: #64748b;     /* Keep slate gray */
    --color-brand-accent: #1e5f74;        /* Logo blue as accent */
    --color-brand-accent-light: #e0f2fe;
    
    --color-interactive-primary: #7cb342;
    --color-interactive-primary-hover: #689f38;
    --color-interactive-secondary: #64748b;
    --color-interactive-secondary-hover: #475569;
    --color-interactive-accent: #1e5f74;
    --color-interactive-accent-hover: #0f4c5c;
    --color-interactive-link: #7cb342;
    --color-interactive-link-hover: #1e5f74;
    
    --color-shadow-colored: rgba(124, 179, 66, 0.15);
}

/* Dhiraj Orange Theme - Based on logo's orange element */
.theme-dhiraj-orange {
    --color-brand-primary: #f97316;       /* Logo bright orange */
    --color-brand-secondary: #64748b;     /* Keep slate gray */
    --color-brand-accent: #7cb342;        /* Logo green as accent */
    --color-brand-accent-light: #f0f9e8;
    
    --color-interactive-primary: #f97316;
    --color-interactive-primary-hover: #ea580c;
    --color-interactive-secondary: #64748b;
    --color-interactive-secondary-hover: #475569;
    --color-interactive-accent: #7cb342;
    --color-interactive-accent-hover: #689f38;
    --color-interactive-link: #f97316;
    --color-interactive-link-hover: #7cb342;
    
    --color-shadow-colored: rgba(249, 115, 22, 0.15);
}

/* Dhiraj Harmony Theme - Balanced combination of all logo colors */
.theme-dhiraj-harmony {
    --color-brand-primary: #7cb342;       /* Logo green as primary for harmony */
    --color-brand-secondary: #1e5f74;     /* Logo blue as secondary */
    --color-brand-accent: #f97316;        /* Logo orange as accent */
    --color-brand-accent-light: #fed7aa;
    
    /* Background colors with slight tint */
    --color-bg-primary: #fafbfc;          /* Very light neutral */
    --color-bg-secondary: #ffffff;        /* Pure white */
    --color-bg-tertiary: #f5f7f9;         /* Light blue-gray */
    
    /* Text colors adapted for harmony */
    --color-text-primary: #1a2332;        /* Darker blue-based text */
    --color-text-secondary: #4a5568;      /* Medium gray text */
    --color-text-tertiary: #718096;       /* Light gray text */
    --color-text-inverse: #ffffff;        /* White text */
    
    --color-interactive-primary: #7cb342;
    --color-interactive-primary-hover: #689f38;
    --color-interactive-secondary: #1e5f74;
    --color-interactive-secondary-hover: #0f4c5c;
    --color-interactive-accent: #f97316;
    --color-interactive-accent-hover: #ea580c;
    --color-interactive-link: #7cb342;
    --color-interactive-link-hover: #f97316;
    
    --color-shadow-colored: rgba(124, 179, 66, 0.15);  /* Green shadow */
    
    /* Legacy mappings for compatibility with existing CSS */
    --primary: var(--color-brand-primary);
    --secondary: var(--color-brand-secondary);
    --accent: var(--color-brand-accent);
    --bg-primary: var(--color-bg-primary);
    --bg-secondary: var(--color-bg-secondary);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-light: var(--color-text-tertiary);
    --border: var(--color-neutral-border);
}

/* ===================================
   USAGE INSTRUCTIONS
   ===================================
   
   1. To change the default theme, modify values in the main :root selector above
   
   2. To apply an alternative theme, add the theme class to the <body> tag:
      <body class="theme-green">         <!-- Chemical green -->
      <body class="theme-navy">          <!-- Professional navy -->
      <body class="theme-teal">          <!-- Modern teal -->
      <body class="theme-spotify">       <!-- Spotify green -->
      <body class="theme-stripe">        <!-- Stripe purple -->
      <body class="theme-slack">         <!-- Slack aubergine -->
      <body class="theme-notion">        <!-- Notion gray & gold -->
      <body class="theme-linear">        <!-- Linear purple & cyan -->
      <body class="theme-figma">         <!-- Figma blue & orange -->
      <body class="theme-airbnb">        <!-- Airbnb coral & teal -->
      <body class="theme-dhiraj-blue">   <!-- Dhiraj logo blue -->
      <body class="theme-dhiraj-green">  <!-- Dhiraj logo green -->
      <body class="theme-dhiraj-orange"> <!-- Dhiraj logo orange -->
      <body class="theme-dhiraj-harmony"><!-- Dhiraj logo harmony -->
   
   3. To create a custom theme:
      - Copy one of the alternative theme blocks above
      - Rename the class (e.g., .theme-custom)
      - Modify the color values as needed
   
   4. When adding new components, use the semantic color variables:
      - Use --color-brand-* for brand elements
      - Use --color-text-* for all text
      - Use --color-bg-* for backgrounds
      - Use --color-interactive-* for buttons and links
      - Use --color-semantic-* for status messages
   
   5. Color Accessibility:
      - Ensure sufficient contrast ratios
      - Test with the high-contrast theme
      - Consider color-blind users
   
   ===================================
*/