/* static/colors.css */

/* --- Bảng màu cho Light Mode (Mặc định) --- */
:root {
    /* -- Core Palette -- */
    --bg-primary: #faf7f2;  /* warmer beige-cream, very easy on eyes */
    --bg-secondary: #fffdf7;  /* warm ivory for cards */
    --bg-gradient-start: #faf7f2;
    --bg-gradient-end: #f3f0eb;  /* warm beige gradient */
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-accent: #4338ca;
    --border-color: #e5e7eb;
    --card-bg: rgba(255, 253, 247, 0.95);  /* warm ivory with high opacity */
    --card-border: rgba(229, 231, 235, 1);  /* fully opaque for better definition */
    --card-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.1);  /* increased from 0.07 to 0.1 */
    --nav-link-bg-active: #f3f4f6;  /* neutral gray instead of blue */
    --accent-color: #6366f1;
    --positive-color: #16a34a;
    --negative-color: #dc2626;
    --neutral-color: #f59e0b;
    --warning-color: #f59e0b;
    --bull-card-bg: #f0fdf4;
    --bear-card-bg: #fef2f2;
    --sideway-card-bg: #fffbeb;
    --table-row-hover-bg: #f0f9ff;
    
    /* -- Additional UI Variables -- */
    --text-muted: #9ca3af;
    --background-light: #faf7f2;  /* warm beige background */
    --primary-blue: #3b82f6;
    --primary-blue-dark: #1d4ed8;
    --card-hover: #f0ebe4;  /* warm beige on hover */
    --skeleton-base: #f3f0eb;  /* warm beige skeleton */
    --skeleton-highlight: #e9e5df;  /* warm highlight */
    --success-bg: #dcfce7;
    --success-text: #166534;
    --error-bg: #fef2f2;
    --error-text: #991b1b;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    
    /* -- Original Added Colors -- */
    --crimson-color: #dc143c;
    --tomato-color: #ff6347;
    --teal-color: #008080;
    --steel-blue-color: #4682b4;
    --slate-gray-color: #708090;

    /* -- Extended Color Palette (Mới) -- */
    --gold-color: #ffd700;
    --hot-pink-color: #ff69b4;
    --indigo-color: #4b0082;
    --lime-green-color: #32cd32;
    --dark-orange-color: #ff8c00;
    --royal-blue-color: #4169e1;
    --olive-drab-color: #6b8e23;
    --sienna-color: #a0522d;
    --dark-violet-color: #9400d3;
    --deep-sky-blue-color: #00bfff;
    --chocolate-color: #d2691e;
    --medium-sea-green-color: #3cb371;
    --firebrick-color: #b22222;
    --dark-slate-blue-color: #483d8b;
    --cadet-blue-color: #5f9ea0;
    --saddle-brown-color: #8b4513;

    /* -- Gauge & Meter Colors -- */
    --rsi-track-color: #e5e7eb;
    --rsi-overbought-color: #ef4444;
    --rsi-oversold-color: #22c55e;
    --rsi-neutral-color: #f59e0b;
    --fng-track-color: #e5e7eb;
    --fng-extreme-fear-color: #dc2626;
    --fng-fear-color: #f97316;
    --fng-neutral-color: #6b7280;
    --fng-greed-color: #84cc16;
    --fng-extreme-greed-color: #22c55e;
    
    /* -- Gauge Text Colors -- */
    --gauge-value-text-color: #3b82f6;      /* Blue for value text */
    --gauge-needle-color: #000000;          /* Black for needle */
    --gauge-needle-pivot-color: #000000;    /* Black for needle pivot */

    /* -- Icon Colors -- */
    --icon-color-summary: #3b82f6;      /* Blue */
    --icon-color-macro-legal: #f59e0b;   /* Amber */
    --icon-color-on-chain-sentiment: #14b8a6; /* Teal */
    --icon-color-btc-analysis: #f97316;  /* Orange */
    --icon-color-eth-analysis: #6366f1;  /* Indigo */
    --icon-color-market-activity: #22c55e; /* Green */
    --icon-color-expert-outlook: #8b5cf6;/* Violet */
    --icon-color-outlook: #d946ef;      /* Fuchsia */
    
    /* -- Top Crypto Icon Colors -- */
    --icon-color-btc: #F7931A;
    --icon-color-eth: #627EEA;
    --icon-color-usdt: #26A17B;
    --icon-color-bnb: #F3BA2F;
    --icon-color-sol: #a968fa;
    --icon-color-xrp: #00A3FF;
    --icon-color-usdc: #2775CA;
    --icon-color-doge: #C3A634;
    --icon-color-ada: #0033AD;
    --icon-color-trx: #EF0027;
    
    /* -- Disclaimer Colors -- */
    --disclaimer-bg-gradient-start: #fef3c7;
    --disclaimer-bg-gradient-end: #fed7aa;
    --disclaimer-border-color: #f59e0b;
    --disclaimer-text-primary: #1f2937;
    --disclaimer-text-secondary: #f3f4f6;
    --disclaimer-ai-bg: #eff6ff;
    --disclaimer-ai-border: #3b82f6;
    --disclaimer-ai-text: #1e40af;
    --disclaimer-shadow: 0 10px 25px rgba(245, 158, 11, 0.3);
    
    /* -- Scrollbar Colors (Light Mode) -- */
    --scrollbar-track-bg: #f3f0eb;  /* warm beige track */
    --scrollbar-thumb-bg: #d1d5db;
    --scrollbar-thumb-hover-bg: #9ca3af;
    --scrollbar-width: thin;
    
    /* -- Scroll Hint Gradient (Light Mode) -- */
    --scroll-hint-from: rgba(250, 247, 242, 1);  /* warm beige-cream - matches bg-primary */
    --scroll-hint-to: rgba(250, 247, 242, 0);
}

/* --- Bảng màu cho Dark Mode --- */
[data-theme="dark"] {
    /* -- Core Palette -- */
    --bg-primary: #0a0d12;  /* darker for higher contrast */
    --bg-secondary: #161b22;
    --bg-gradient-start: #0a0d12;
    --bg-gradient-end: #1a1f26;  /* reduced blue, more neutral */
    --text-primary: #e5e7eb;
    --text-secondary: #9ca3af;
    --text-accent: #818cf8;
    --border-color: #30363d;
    --card-bg: rgba(22, 27, 34, 0.95);  /* increased opacity from 0.7 to 0.95 */
    --card-border: rgba(48, 54, 61, 1);  /* fully opaque for better definition */
    --card-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.4);  /* increased from 0.2 to 0.4 */
    --nav-link-bg-active: #1f2937;  /* darker gray, less blue */
    --accent-color: #818cf8;
    --positive-color: #22c55e;
    --negative-color: #ef4444;
    --neutral-color: #f59e0b;
    --warning-color: #f59e0b;
    --bull-card-bg: #052e16;
    --bear-card-bg: #450a0a;
    --sideway-card-bg: #451a03;
    --table-row-hover-bg: #1e293b;
    
    /* -- Additional UI Variables (Dark Mode) -- */
    --text-muted: #6b7280;
    --background-light: #1f2937;
    --primary-blue: #60a5fa;
    --primary-blue-dark: #3b82f6;
    --card-hover: #374151;
    --skeleton-base: #374151;
    --skeleton-highlight: #4b5563;
    --success-bg: #052e16;
    --success-text: #4ade80;
    --error-bg: #450a0a;
    --error-text: #f87171;
    --warning-bg: #451a03;
    --warning-text: #fb923c;

    /* -- Original Added Colors -- */
    --crimson-color: #ff5277;
    --tomato-color: #ff7e6b;
    --teal-color: #00a0a0;
    --steel-blue-color: #6ca5d6;
    --slate-gray-color: #8c9ba8;
    
    /* -- Extended Color Palette (Mới) -- */
    --gold-color: #fce57e;
    --hot-pink-color: #ff80c1;
    --indigo-color: #9370db; /* Medium Purple for better readability */
    --lime-green-color: #55da55;
    --dark-orange-color: #ff9d2d;
    --royal-blue-color: #6a89f9;
    --olive-drab-color: #8ab444;
    --sienna-color: #c0724d;
    --dark-violet-color: #ae47f5;
    --deep-sky-blue-color: #33ccff;
    --chocolate-color: #e58b45;
    --medium-sea-green-color: #5ddc91;
    --firebrick-color: #d14444;
    --dark-slate-blue-color: #7d70cf;
    --cadet-blue-color: #89c0c2;
    --saddle-brown-color: #b1663c;

    /* -- Gauge & Meter Colors (Dark Mode) -- */
    --rsi-track-color: #374151;
    --rsi-overbought-color: #f87171;
    --rsi-oversold-color: #4ade80;
    --rsi-neutral-color: #fb923c;
    --fng-track-color: #374151;
    --fng-extreme-fear-color: #f87171;
    --fng-fear-color: #fb923c;
    --fng-neutral-color: #9ca3af;
    --fng-greed-color: #a3e635;
    --fng-extreme-greed-color: #4ade80;
    
    /* -- Gauge Text Colors (Dark Mode) -- */
    --gauge-value-text-color: #60a5fa;      /* Light blue for value text in dark mode */
    --gauge-needle-color: #ffffff;          /* White for needle in dark mode */
    --gauge-needle-pivot-color: #ffffff;    /* White for needle pivot in dark mode */
    
    /* Icon colors are generally kept the same for brand recognition, so no overrides needed unless desired */
    
    /* -- Disclaimer Colors (Dark Mode) -- */
    --disclaimer-bg-gradient-start: #451a03;
    --disclaimer-bg-gradient-end: #7c2d12;
    --disclaimer-border-color: #f59e0b;
    --disclaimer-text-primary: #fbbf24;
    --disclaimer-text-secondary: #f3f4f6;
    --disclaimer-ai-bg: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    --disclaimer-ai-border: #3b82f6;
    --disclaimer-ai-text: #93c5fd;
    --disclaimer-shadow: 0 10px 25px rgba(245, 158, 11, 0.3);
    
    /* -- Scrollbar Colors (Dark Mode) -- */
    --scrollbar-track-bg: #374151;  /* Gray-700 - darker but visible */
    --scrollbar-thumb-bg: #6b7280;  /* Gray-500 - medium gray */
    --scrollbar-thumb-hover-bg: #9ca3af;  /* Gray-400 - lighter on hover */
    --scrollbar-width: thin;
    
    /* -- Scroll Hint Gradient (Dark Mode) -- */
    --scroll-hint-from: rgba(10, 13, 18, 1);  /* #0a0d12 - matches updated bg-primary */
    --scroll-hint-to: rgba(10, 13, 18, 0);
}