/* ========================================== */
/* ObriyX Presentations - Color Palette */
/* ========================================== */
/* Centralized, harmonious color system */
/* ========================================== */

:root {
    /* ========== PRIMARY COLOR PALETTE ========== */
    /* Cyan - Main brand color */
    --color-cyan: #00d4ff;
    --color-cyan-light: #33deff;
    --color-cyan-dark: #00a3cc;
    --color-cyan-muted: #0099cc;
    
    /* Purple - Secondary accent */
    --color-purple: #a78bfa;
    --color-purple-light: #c4b5fd;
    --color-purple-dark: #8b5cf6;
    
    /* ========== SEMANTIC COLOR PALETTE ========== */
    /* Success - Positive metrics, gains */
    --color-success: #10b981;
    --color-success-light: #6ee7b7;
    --color-success-dark: #059669;
    --color-success-muted: #047857;
    
    /* Danger/Error - Risks, problems, losses */
    --color-danger: #ef4444;
    --color-danger-light: #fca5a5;
    --color-danger-dark: #dc2626;
    --color-danger-muted: #b91c1c;
    
    /* Warning - Caution, attention needed */
    --color-warning: #f59e0b;
    --color-warning-light: #fcd34d;
    --color-warning-dark: #d97706;
    --color-warning-muted: #b45309;
    
    /* Info - Information, secondary emphasis */
    --color-info: #0799b3;
    --color-info-light: #22d3ee;
    --color-info-dark: #0891b2;
    --color-info-muted: #155e75;
    
    /* ========== EXTENDED PALETTE ========== */
    /* Emerald - Alternative success indicator */
    --color-emerald: #10b981;
    --color-emerald-light: #a7f3d0;
    --color-emerald-dark: #059669;
    
    /* Amber - Alternative warning, warm accents */
    --color-amber: #f59e0b;
    --color-amber-light: #fcd34d;
    --color-amber-dark: #d97706;
    
    /* Red - Alternative danger indicator */
    --color-red: #ef4444;
    --color-red-light: #fca5a5;
    --color-red-dark: #dc2626;
    
    /* ========== NEUTRAL PALETTE ========== */
    /* Background colors */
    --color-bg-dark: #0a0e1a;
    --color-bg-darker: #050711;
    --color-bg-surface: #0f1419;
    --color-bg-surface-alt: #1a1f3a;
    --color-bg-overlay-light: rgba(0, 212, 255, 0.08);
    --color-bg-overlay-medium: rgba(0, 212, 255, 0.15);
    
    /* Text colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: #94a3b8;
    --color-text-tertiary: #64748b;
    --color-text-muted: #475569;
    
    /* Borders & dividers */
    --color-border-light: rgba(255, 255, 255, 0.1);
    --color-border-medium: rgba(255, 255, 255, 0.2);
    --color-border-strong: rgba(0, 212, 255, 0.3);
    
    /* ========== LIGHT MODE OVERRIDES ========== */
}

/* Light Mode - Neutral Palette */
body.light-mode {
    --color-bg-dark: #f5f5f5;
    --color-bg-darker: #ebebeb;
    --color-bg-surface: #fafafa;
    --color-bg-surface-alt: #e8e8e8;
    --color-bg-overlay-light: rgba(69, 129, 142, 0.08);
    --color-bg-overlay-medium: rgba(69, 129, 142, 0.15);
    
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-tertiary: #666666;
    --color-text-muted: #888888;
    
    --color-border-light: rgba(0, 0, 0, 0.1);
    --color-border-medium: rgba(0, 0, 0, 0.2);
    --color-border-strong: rgba(69, 129, 142, 0.3);
}

/* ========== GRADIENT DEFINITIONS ========== */
:root {
    /* Primary gradient */
    --gradient-primary: linear-gradient(135deg, #00d4ff, #0099cc);
    --gradient-primary-light: linear-gradient(135deg, #33deff, #22d3ee);
    
    /* Success gradient */
    --gradient-success: linear-gradient(135deg, #10b981, #059669);
    --gradient-success-light: linear-gradient(135deg, #6ee7b7, #a7f3d0);
    
    /* Danger gradient */
    --gradient-danger: linear-gradient(135deg, #ef4444, #dc2626);
    --gradient-danger-light: linear-gradient(135deg, #fca5a5, #fecaca);
    
    /* Warning gradient */
    --gradient-warning: linear-gradient(135deg, #f59e0b, #d97706);
    --gradient-warning-light: linear-gradient(135deg, #fcd34d, #fde047);
    
    /* Info gradient */
    --gradient-info: linear-gradient(135deg, #0799b3, #0891b2);
    --gradient-info-light: linear-gradient(135deg, #22d3ee, #67e8f9);
    
    /* Purple gradient */
    --gradient-purple: linear-gradient(135deg, #a78bfa, #8b5cf6);
    --gradient-purple-light: linear-gradient(135deg, #c4b5fd, #ddd6fe);
    
    /* Background gradient */
    --gradient-bg: linear-gradient(180deg, #0a0e1a 0%, #1a1f3a 60%, #2d1b4e 100%);
}

body.light-mode {
    --gradient-bg: linear-gradient(180deg, #f5f5f5 0%, #e8e8e8 60%, #dcdcdc 100%);
}

/* ========== RADIAL GRADIENTS FOR CIRCLES ========== */
:root {
    --radial-cyan: radial-gradient(circle, rgba(0, 212, 255, 0.15), rgba(0, 212, 255, 0.05));
    --radial-success: radial-gradient(circle, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    --radial-danger: radial-gradient(circle, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    --radial-warning: radial-gradient(circle, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
    --radial-info: radial-gradient(circle, rgba(7, 153, 179, 0.15), rgba(7, 153, 179, 0.05));
    --radial-purple: radial-gradient(circle, rgba(167, 139, 250, 0.15), rgba(167, 139, 250, 0.05));
}

body.light-mode {
    --radial-cyan: radial-gradient(circle, rgba(69, 129, 142, 0.15), rgba(69, 129, 142, 0.05));
    --radial-success: radial-gradient(circle, rgba(5, 150, 105, 0.15), rgba(5, 150, 105, 0.05));
    --radial-danger: radial-gradient(circle, rgba(220, 38, 38, 0.15), rgba(220, 38, 38, 0.05));
    --radial-warning: radial-gradient(circle, rgba(217, 119, 6, 0.15), rgba(217, 119, 6, 0.05));
    --radial-info: radial-gradient(circle, rgba(6, 114, 142, 0.15), rgba(6, 114, 142, 0.05));
    --radial-purple: radial-gradient(circle, rgba(109, 84, 212, 0.15), rgba(109, 84, 212, 0.05));
}

/* ========== CHART.JS COLOR SCHEMES ========== */
:root {
    /* Chart colors - harmonized palette */
    --chart-color-1: #00d4ff;
    --chart-color-2: #10b981;
    --chart-color-3: #f59e0b;
    --chart-color-4: #ef4444;
    --chart-color-5: #a78bfa;
    --chart-color-6: #0799b3;
    --chart-color-7: #ec4899;
    --chart-color-8: #06b6d4;
    
    /* Chart backgrounds - semi-transparent */
    --chart-bg-1: rgba(0, 212, 255, 0.1);
    --chart-bg-2: rgba(16, 185, 129, 0.1);
    --chart-bg-3: rgba(245, 158, 11, 0.1);
    --chart-bg-4: rgba(239, 68, 68, 0.1);
    --chart-bg-5: rgba(167, 139, 250, 0.1);
    --chart-bg-6: rgba(7, 153, 179, 0.1);
}