/* 
 * Centralized Theme System
 * All color values are defined here using CSS custom properties
 * This makes it easy to update the entire color scheme from one place
 *
 * HOW TO UPDATE COLORS:
 * 1. Light mode colors: Update the :root section below
 * 2. Dark mode colors: Update the .dark-mode section below
 * 3. Changes will automatically apply across the entire application
 *
 * EXAMPLES:
 * - To change the primary button color: Update --button-bg and --button-hover-bg
 * - To change text colors: Update --text-primary, --text-secondary, etc.
 * - To change background colors: Update --bg-primary, --bg-secondary, etc.
 *
 * QUICK TEST:
 * - Change --text-primary in dark mode from #ffffff to #ff0000 to see all titles turn red
 * - Change --button-bg from #6366f1 to #10b981 to make all buttons green
 *
 * No need to edit individual CSS files anymore!
 */

:root {
    /* Light Mode Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;
    --bg-tertiary: #f9f9f9;
    --bg-accent: #f5f4f2;
    
    --text-primary: #2c2c2c;
    --text-secondary: #444444;
    --text-tertiary: #666666;
    --text-quaternary: #888888;
    --text-muted: #333333;
    
    --border-primary: #e0ddd8;
    --border-secondary: #ddd;
    --border-tertiary: #ccc;
    
    --accent-primary: #2c2c2c;
    --accent-secondary: #000000;
    --accent-hover: #000000;
    
    --link-color: #000000;
    --link-hover: #333333;
    
    --success-bg: #f0f9f0;
    --success-border: #10b981;
    --success-text: #065f46;
    
    --error-bg: #fef2f2;
    --error-border: #ef4444;
    --error-text: #991b1b;
    
    --warning-bg: #fffbeb;
    --warning-border: #f59e0b;
    --warning-text: #92400e;
    
    /* Interactive Elements */
    --button-bg: #10b981;
    --button-text: #ffffff;
    --button-hover-bg: #059669;
    --button-hover-text: #ffffff;
    
    --input-bg: #ffffff;
    --input-border: #ccc;
    --input-focus-border: #10b981;
    --input-text: #2c2c2c;
    --input-placeholder: #666666;
    
    /* Special Elements */
    --code-bg: #f5f4f2;
    --code-text: #2c2c2c;
    --code-border: transparent;
    
    --blockquote-bg: #faf9f7;
    --blockquote-border: #d0ccc7;
    --blockquote-text: #555555;
    
    --table-header-bg: #f9f9f9;
    --table-border: #ddd;
    
    /* Checklist Colors */
    --checkbox-accent: #10b981;
    --checkbox-border: #ccc;
    --checkbox-bg: #ffffff;
    --checkbox-checked-text: #888888;
    
    --red-flag-border: #e74c3c;
    --red-flag-hover-bg: #fdf2f2;
    --red-flag-hover-border: #c0392b;
    
    /* Scrollbar Colors */
    --scrollbar-track: #f5f5f5;
    --scrollbar-thumb: #c1c1c1;
    --scrollbar-thumb-hover: #a8a8a8;
    
    /* Yellow Highlight Colors */
    --yellow-highlight-bg: #d1fae5;
    --yellow-highlight-text: #065f46;

    /* Modal Colors */
    --modal-close-color: #000000;
    --modal-close-bg: #ffffff;
    --modal-close-hover-bg: #f0f0f0;

}

/* Dark Mode Colors */
.dark-mode {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #2d2d2d;
    --bg-accent: #2d2d2d;
    
    /* Scrollbar Colors */
    --scrollbar-track: #1a1a1a;
    --scrollbar-thumb: #404040;
    --scrollbar-thumb-hover: #525252;
    
    --text-primary: #ffffff; /* Main titles - "How to Get Acquired", "By: Harsh Patel" */
    --text-secondary: #cccccc; /* Body text, subtitles, important content */
    --text-tertiary: #888888;  /* Supporting details, taglines */
    --text-quaternary: #888888; /* Less important text */
    --text-muted: #666666;      /* Very subtle text, timestamps */
    
    --border-primary: #404040;
    --border-secondary: #525252;
    --border-tertiary: #525252;
    
    --accent-primary: #10b981;
    --accent-secondary: #059669;
    --accent-hover: #059669;
    
    --link-color: #34d399;
    --link-hover: #6ee7b7;
    
    --success-bg: #2d2d2d;
    --success-border: #10b981;
    --success-text: #ffffff;
    
    --error-bg: #2d2d2d;
    --error-border: #ef4444;
    --error-text: #ffffff;
    
    --warning-bg: #2d2d2d;
    --warning-border: #f59e0b;
    --warning-text: #ffffff;
    
    /* Interactive Elements - Change these to update all buttons */
    --button-bg: #10b981;        /* Button background color */
    --button-text: #ffffff;      /* Button text color */
    --button-hover-bg: #059669;  /* Button hover background */
    --button-hover-text: #ffffff; /* Button hover text */
    
    --input-bg: #1a1a1a;
    --input-border: #525252;
    --input-focus-border: #34d399;
    --input-text: #ffffff;
    --input-placeholder: #b0b0b0;
    
    /* Special Elements */
    --code-bg: #2d2d2d;
    --code-text: #34d399;
    --code-border: #404040;
    
    --blockquote-bg: #2d2d2d;
    --blockquote-border: #10b981;
    --blockquote-text: #f0f0f0;
    
    --table-header-bg: #2d2d2d;
    --table-border: #525252;
    
    /* Checklist Colors */
    --checkbox-accent: #34d399;
    --checkbox-border: #525252;
    --checkbox-bg: #1a1a1a;
    --checkbox-checked-text: #8a8a8a;
    
    --red-flag-border: #ef4444;
    --red-flag-hover-bg: #2d2d2d;
    --red-flag-hover-border: #f87171;
    
    /* Dark Mode Toggle Specific Colors */
    --toggle-bg: rgba(16, 185, 129, 0.15);
    --toggle-border: rgba(52, 211, 153, 0.3);
    --toggle-text: rgba(229, 229, 229, 0.9);
    --toggle-shadow: 0 6px 20px rgba(26, 26, 26, 0.15), 0 3px 10px rgba(26, 26, 26, 0.08), inset 0 1px 0 rgba(52, 211, 153, 0.3);
    
    --toggle-hover-bg: rgba(16, 185, 129, 0.2);
    --toggle-hover-border: rgba(52, 211, 153, 0.4);
    --toggle-hover-shadow: 0 8px 28px rgba(26, 26, 26, 0.18), 0 4px 14px rgba(26, 26, 26, 0.1), inset 0 1px 0 rgba(52, 211, 153, 0.35);
    
    --toggle-active-bg: rgba(16, 185, 129, 0.12);
    --toggle-active-border: rgba(52, 211, 153, 0.25);
    --toggle-active-shadow: 0 3px 12px rgba(26, 26, 26, 0.12), 0 1px 6px rgba(26, 26, 26, 0.06), inset 0 1px 0 rgba(52, 211, 153, 0.25);
    
    /* Sidebar Colors */
    --sidebar-bg: #1a1a1a;
    --sidebar-border: #404040;
    --sidebar-item-hover: #2d2d2d;
    --sidebar-item-active: #2d2d2d;
    --sidebar-active-accent: #34d399;
    
    /* Mobile Specific */
    --mobile-sidebar-shadow: 2px 0 8px rgba(0,0,0,0.3);
    --mobile-overlay-bg: rgba(0, 0, 0, 0.8);
    
    /* Share Button Colors */
    --share-btn-bg: #2d2d2d;
    --share-btn-hover-bg: #2d2d2d;
    --share-icon-color: #cccccc;
    --share-icon-hover-color: #ffffff;
    
    /* Yellow Highlight Colors */
    --yellow-highlight-bg: #065f46;
    --yellow-highlight-text: #ffffff;
    
    /* Modal Colors */
    --modal-close-color: #ffffff;
    --modal-close-bg: #000000;
    --modal-close-hover-bg: #333333;

}

/* Light Mode Toggle Colors (default) */
:root {
    --toggle-bg: rgba(0, 0, 0, 0.05);
    --toggle-border: rgba(0, 0, 0, 0.15);
    --toggle-text: rgba(0, 0, 0, 0.8);
    --toggle-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 3px 10px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.3);

    --toggle-hover-bg: rgba(0, 0, 0, 0.08);
    --toggle-hover-border: rgba(0, 0, 0, 0.2);
    --toggle-hover-shadow: 0 8px 28px rgba(0, 0, 0, 0.1), 0 4px 14px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.35);

    --toggle-active-bg: rgba(0, 0, 0, 0.1);
    --toggle-active-border: rgba(0, 0, 0, 0.25);
    --toggle-active-shadow: 0 3px 12px rgba(0, 0, 0, 0.06), 0 1px 6px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    
    /* Sidebar Colors */
    --sidebar-bg: #ffffff;
    --sidebar-border: #e0ddd8;
    --sidebar-item-hover: #f9f9f9;
    --sidebar-item-active: #f9f9f9;
    --sidebar-active-accent: #10b981;
    
    /* Mobile Specific */
    --mobile-sidebar-shadow: 2px 0 8px rgba(0,0,0,0.1);
    --mobile-overlay-bg: rgba(0, 0, 0, 0.5);
    
    /* Share Button Colors */
    --share-btn-bg: rgba(0, 0, 0, 0.05);
    --share-btn-hover-bg: rgba(0, 0, 0, 0.1);
    --share-icon-color: #666666;
    --share-icon-hover-color: #333333;
}

/* Utility Classes for Common Patterns */
.theme-bg-primary { background-color: var(--bg-primary); }
.theme-bg-secondary { background-color: var(--bg-secondary); }
.theme-bg-tertiary { background-color: var(--bg-tertiary); }
.theme-bg-accent { background-color: var(--bg-accent); }

.theme-text-primary { color: var(--text-primary); }
.theme-text-secondary { color: var(--text-secondary); }
.theme-text-tertiary { color: var(--text-tertiary); }
.theme-text-quaternary { color: var(--text-quaternary); }
.theme-text-muted { color: var(--text-muted); }

.theme-border-primary { border-color: var(--border-primary); }
.theme-border-secondary { border-color: var(--border-secondary); }
.theme-border-tertiary { border-color: var(--border-tertiary); }

.theme-button {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--button-bg);
    transition: all 0.2s ease;
}

.theme-button:hover {
    background-color: var(--button-hover-bg);
    color: var(--button-hover-text);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.theme-input {
    background-color: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
}

.theme-input:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 1px var(--input-focus-border);
}

.theme-input::placeholder {
    color: var(--input-placeholder);
}

.theme-link {
    color: var(--link-color);
    transition: color 0.2s ease;
}

.theme-link:hover {
    color: var(--link-hover);
}

/* Scrollbar Theming */
/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Yellow Highlight Text */
.yellow-highlight {
    background: var(--yellow-highlight-bg) !important;
    color: var(--yellow-highlight-text) !important;
    padding: 2px 0px;
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 500;
    border: none !important;
}