// _colors.scss - Centralized color management for the entire market_dashboard project
// This file should be imported before any other SCSS files that use these colors

// ==========================================
// PRIMARY BRAND COLORS
// ==========================================
$primary-color: #3498db;           // Main brand blue
$primary-hover: #2980b9;           // Darker blue for hover states
$primary-light: #5dade2;           // Light blue for accents

// ==========================================
// BOOTSTRAP OVERRIDE COLORS
// ==========================================
// Primary Bootstrap colors used throughout the app
$bootstrap-primary: #0d6efd;       // Bootstrap primary blue
$bootstrap-primary-hover: #0b5ed7; // Bootstrap primary hover
$bootstrap-primary-active: #0a58ca; // Bootstrap primary active

// Secondary colors
$bootstrap-secondary: #6c757d;     // Bootstrap secondary gray
$bootstrap-secondary-light: #adb5bd; // Light secondary gray
$bootstrap-secondary-dark: #495057; // Dark secondary gray

// Light/Dark theme colors
$bootstrap-light: #f8f9fa;         // Light theme background
$bootstrap-dark: #212529;          // Dark theme background
$bootstrap-white: #ffffff;         // Pure white
$bootstrap-black: #000000;         // Pure black

// ==========================================
// BORDER AND BACKGROUND COLORS
// ==========================================
$primary-border-color: #68686e;    // Main border color
$accordion-bg: #181d1f;            // Accordion background (dark)
$body-bg-dark: #222628;            // Dark body background
$sidebar-bg-light: #ededed;        // Light sidebar background
$sidebar-bg-hover: #227fab;        // Sidebar hover background

// ==========================================
// SOCIAL LOGIN COLORS
// ==========================================
$facebook-blue: #3b5998;          // Facebook brand blue
$google-red: #dd4b39;             // Google brand red

// ==========================================
// UI STATE COLORS
// ==========================================
$hover-overlay-light: rgba(0, 0, 0, 0.1);  // Light hover overlay
$hover-overlay-medium: rgba(0, 0, 0, 0.2);  // Medium hover overlay
$hover-overlay-dark: rgba(0, 0, 0, 0.3);    // Dark hover overlay

$shadow-light: rgba(0, 0, 0, 0.05);         // Light box shadow
$shadow-medium: rgba(0, 0, 0, 0.1);         // Medium box shadow
$shadow-dark: rgba(0, 0, 0, 0.3);           // Dark box shadow

// Form overlay
$form-overlay-bg: rgba(255, 255, 255, 0.9); // Semi-transparent white overlay

// ==========================================
// DIVIDER AND SEPARATOR COLORS
// ==========================================
$divider-gray: gray;               // Default divider color
$divider-gray-hover: #666;         // Divider hover state
$divider-gray-active: #333;        // Divider active state
$border-light-gray: lightgray;     // Light border color

// ==========================================
// CHART AND DATA VISUALIZATION COLORS
// ==========================================
$chart-background-light: #fafafa;  // Light chart background
$chart-background-dark: #000000;   // Dark chart background

// ==========================================
// NAVIGATION COLORS
// ==========================================
$navbar-border: #82888a;          // Navbar border color
$navbar-hover-dark: #222;         // Dark navbar hover
$navbar-hover-light: #e2e6ea;     // Light navbar hover (subtle gray tint)

// ==========================================
// DARK MODE SPECIFIC COLORS
// ==========================================
$dark-mode-border: rgba(255, 255, 255, 0.1); // Dark mode border
$dark-mode-link: #9cb9d5;         // Dark mode link color
$dark-mode-link-hover: white;     // Dark mode link hover color

// ==========================================
// UTILITY FUNCTIONS
// ==========================================
// Function to get opacity variants of colors
@function with-opacity($color, $opacity) {
  @return rgba($color, $opacity);
}

// Function to get hover variant (slightly darker)
@function hover-variant($color, $amount: 10%) {
  @return darken($color, $amount);
}

// Function to get active variant (darker than hover)
@function active-variant($color, $amount: 15%) {
  @return darken($color, $amount);
}