/**
 * Capital Chronicle - Color System
 * 
 * This file defines the official color palette for the Capital Chronicle theme.
 * All colors are defined as CSS custom properties (variables) for centralized
 * management and easy theming.
 * 
 * Inspired by Bloomberg and WSJ with a minimalist professional aesthetic.
 * Primary color scheme: Dark background, light text, with subtle blue accents.
 */

:root {
    /* Brand Colors */
    --color-brand-primary: #fcd008; /* Gold/Yellow brand color */
    --color-brand-secondary: #e6bc00; /* Darker gold for hover states */
    --color-brand-tertiary: #fff8d9; /* Very light gold for backgrounds */
    
    /* Background Colors */
    --color-background-primary: #121212; /* Dark background for most content */
    --color-background-secondary: #1a1a1a; /* Slightly lighter dark for cards/sections */
    --color-background-tertiary: #222222; /* Medium dark for alternate sections */
    --color-background-dark: #000000; /* Black for dark sections */
    
    /* Text Colors */
    --color-text-primary: #f5f5f5; /* Off-white for primary content */
    --color-text-secondary: #d9d9d9; /* Light gray for secondary content */
    --color-text-tertiary: #a0a0a0; /* Medium gray for less important text */
    --color-text-light: #ffffff; /* Pure white for emphasis */
    --color-text-muted: #777777; /* Darker gray for timestamps, etc. */
    
    /* Accent Colors */
    --color-accent-primary: #0063be; /* Bloomberg-inspired blue for links */
    --color-accent-secondary: #fcd008; /* Gold as secondary accent */
    --color-accent-tertiary: #333333; /* Dark gray for subtle highlights */
    
    /* Data Visualization Colors */
    --color-data-positive: #1c7d43; /* Dark green for positive values */
    --color-data-negative: #c91b1b; /* Dark red for negative values */
    --color-data-neutral: #fcd008; /* Brand gold for neutral values */
    
    /* Financial Sector Colors */
    --color-finance-banking: #7b61ff; /* Purple for banking */
    --color-finance-tech: #0063be; /* Blue for tech */
    --color-finance-energy: #e67a00; /* Orange for energy */
    --color-finance-healthcare: #c91b7a; /* Magenta for healthcare */
    
    /* Border Colors */
    --color-border-primary: #333333; /* Dark gray for most borders */
    --color-border-light: #2a2a2a; /* Very dark gray for subtle borders */
    --color-border-medium: #444444; /* Medium gray for more visible borders */
    --color-border-dark: #666666; /* Light gray for emphasized borders */
    --color-border-brand: #fcd008; /* Brand color for special borders */
    
    /* Status Colors */
    --color-status-success: #1c7d43; /* Dark green for success */
    --color-status-warning: #e67a00; /* Orange for warnings */
    --color-status-error: #c91b1b; /* Dark red for errors */
    --color-status-info: #0063be; /* Blue for information */
    
    /* Overlay Colors */
    --color-overlay-dark: rgba(0, 0, 0, 0.7); /* Dark overlay for modals/popups */
    --color-overlay-light: rgba(255, 255, 255, 0.2); /* Light overlay */
    --color-overlay-brand: rgba(252, 208, 8, 0.1); /* Brand color overlay */
    
    /* Shadow Colors */
    --color-shadow-light: rgba(0, 0, 0, 0.3); /* Very subtle shadow */
    --color-shadow-medium: rgba(0, 0, 0, 0.4); /* Medium shadow */
    --color-shadow-dark: rgba(0, 0, 0, 0.5); /* More pronounced shadow */

    /* Market Ticker Colors - Consistent in both modes */
    --ticker-background: #121212;
    --ticker-text: #ffffff;
    --ticker-border: #333333;
    --ticker-indicator-background: #1a1a1a;
    --ticker-indicator-border: #fcd008;
}

/* Light Mode Color Scheme */
@media (prefers-color-scheme: light) {
    :root {
        /* Background Colors - Light Mode */
        --color-background-primary: #f0f0f0ff;
        --color-background-secondary: #f9f9f9;
        --color-background-tertiary: #f0f0f0;
        --color-background-dark: #e0e0e0;
        
        /* Text Colors - Light Mode */
        --color-text-primary: #000000;
        --color-text-secondary: #333333;
        --color-text-tertiary: #666666;
        --color-text-light: #ffffff;
        --color-text-muted: #999999;
        
        /* Border Colors - Light Mode */
        --color-border-primary: #e0e0e0;
        --color-border-light: #f0f0f0;
        --color-border-medium: #d1d1d1;
        --color-border-dark: #999999;
        
        /* Shadow Colors - Light Mode */
        --color-shadow-light: rgba(0, 0, 0, 0.05);
        --color-shadow-medium: rgba(0, 0, 0, 0.1);
        --color-shadow-dark: rgba(0, 0, 0, 0.2);
        
        /* Accent Colors - Light Mode */
        --color-accent-tertiary: #f0f0f0;
    }
}

/* Class-based theme overrides */
body.light-mode {
    /* Background Colors - Light Mode */
    --color-background-primary: #ffffff;
    --color-background-secondary: #f9f9f9;
    --color-background-tertiary: #f0f0f0;
    --color-background-dark: #e0e0e0;
    
    /* Text Colors - Light Mode */
    --color-text-primary: #000000;
    --color-text-secondary: #333333;
    --color-text-tertiary: #666666;
    --color-text-muted: #999999;
    
    /* Border Colors - Light Mode */
    --color-border-primary: #e0e0e0;
    --color-border-light: #f0f0f0;
    --color-border-medium: #d1d1d1;
    --color-border-dark: #999999;
    
    /* Shadow Colors - Light Mode */
    --color-shadow-light: rgba(0, 0, 0, 0.05);
    --color-shadow-medium: rgba(0, 0, 0, 0.1);
    --color-shadow-dark: rgba(0, 0, 0, 0.2);
    
    /* Accent Colors - Light Mode */
    --color-accent-tertiary: #f0f0f0;
}

body.dark-mode {
    /* Background Colors - Dark Mode */
    --color-background-primary: #121212;
    --color-background-secondary: #1a1a1a;
    --color-background-tertiary: #222222;
    --color-background-dark: #000000;
    
    /* Text Colors - Dark Mode */
    --color-text-primary: #f5f5f5;
    --color-text-secondary: #d9d9d9;
    --color-text-tertiary: #a0a0a0;
    --color-text-muted: #777777;
    
    /* Border Colors - Dark Mode */
    --color-border-primary: #333333;
    --color-border-light: #2a2a2a;
    --color-border-medium: #444444;
    --color-border-dark: #666666;
    
    /* Shadow Colors - Dark Mode */
    --color-shadow-light: rgba(0, 0, 0, 0.3);
    --color-shadow-medium: rgba(0, 0, 0, 0.4);
    --color-shadow-dark: rgba(0, 0, 0, 0.5);
    
    /* Accent Colors - Dark Mode */
    --color-accent-tertiary: #333333;
}

/* Color Utility Classes */
.bg-primary { background-color: var(--color-background-primary); }
.bg-secondary { background-color: var(--color-background-secondary); }
.bg-tertiary { background-color: var(--color-background-tertiary); }
.bg-dark { background-color: var(--color-background-dark); }
.bg-brand { background-color: var(--color-brand-primary); }
.bg-brand-light { background-color: var(--color-brand-tertiary); }

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-light { color: var(--color-text-light); }
.text-muted { color: var(--color-text-muted); }
.text-brand { color: var(--color-brand-primary); }
.text-accent { color: var(--color-accent-secondary); }

.border-primary { border-color: var(--color-border-primary); }
.border-light { border-color: var(--color-border-light); }
.border-medium { border-color: var(--color-border-medium); }
.border-dark { border-color: var(--color-border-dark); }
.border-brand { border-color: var(--color-brand-primary); }

/* Value Indicator Color Classes */
.value-positive { color: var(--color-data-positive); }
.value-negative { color: var(--color-data-negative); }
.value-neutral { color: var(--color-data-neutral); }