/* ==============================================
   variables.css
   CSS custom properties, theme variables, and
   color scheme preferences.
   ============================================== */

/* ============================================
   CSS VARIABLES - Change theme in one place
   ============================================ */
:root {
    /* Background Colors */
    --bg-primary: #f5f7fa;          /* Main page background */
    --bg-secondary: #ffffff;        /* Cards, panels, headers */
    --bg-tertiary: #fafbfc;         /* Subtle backgrounds */
    --bg-hover: #f6f8fa;            /* Hover states */
    --bg-active: #e1e4e8;           /* Active/pressed states */

    /* Text Colors */
    --text-primary: #24292e;        /* Main text */
    --text-secondary: #586069;      /* Secondary text, labels */
    --text-tertiary: #6a737d;       /* Muted text */
    --text-inverse: #ffffff;        /* Text on dark backgrounds */

    /* Border Colors */
    --border-light: #e1e4e8;        /* Default borders */
    --border-medium: #d1d5da;       /* Stronger borders */
    --border-dark: #c6cbd1;         /* Hover borders */

    /* Status Colors */
    --status-success: #28a745;      /* Green - success, resolved */
    --status-warning: #ffc107;      /* Yellow - pending, warning */
    --status-danger: #dc3545;       /* Red - overdue, critical */
    --status-info: #0366d6;         /* Blue - info, normal */

    /* Chart & Data Visualization */
    --chart-primary: #0366d6;       /* Main chart color */
    --chart-secondary: #6f42c1;     /* Secondary chart color */
    --chart-peak: #28a745;          /* Peak activity (green) */
    --chart-low: #959da5;           /* Low activity (gray) */
    --chart-gradient-start: rgba(3, 102, 214, 0.1);
    --chart-gradient-end: rgba(3, 102, 214, 0);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.1);

    /* Accent */
    --accent-primary: #0366d6;       /* Primary accent (blue) */

    /* Component Specific */
    --metric-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --priority-high: #dc3545;
    --priority-medium: #ffc107;
    --priority-low: #28a745;

    /* Gradients for visual components */
    --gradient-success: linear-gradient(135deg, #28a745, #34d058);
    --gradient-warning: linear-gradient(135deg, #ffc107, #ffd454);
    --gradient-danger: linear-gradient(135deg, #d73a49, #ff4d5e);
    --gradient-chart-normal: linear-gradient(180deg, #0366d6, #1a7ff0);
    --gradient-chart-normal-hover: linear-gradient(180deg, #0256c2, #1670dd);
    --gradient-chart-peak: linear-gradient(180deg, #28a745, #34ce57);
    --gradient-chart-low: linear-gradient(180deg, #959da5, #b1b9c1);
    --gradient-heatmap-bg: linear-gradient(to top, #f6f8fa 0%, transparent 100%);
}

/* ============================================
   DARK THEME - Activated with body.dark-theme class
   ============================================ */
body.dark-theme {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #1c2128;
    --bg-hover: #21262d;
    --bg-active: #30363d;

    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --text-tertiary: #6e7681;
    --text-inverse: #0d1117;

    --border-light: #30363d;
    --border-medium: #21262d;
    --border-dark: #484f58;

    --status-success: #3fb950;
    --status-warning: #e3b341;
    --status-danger: #f85149;
    --status-info: #58a6ff;

    --chart-primary: #58a6ff;
    --chart-secondary: #bc8cff;
    --chart-peak: #3fb950;
    --chart-low: #6e7681;
    --chart-gradient-start: rgba(88, 166, 255, 0.15);
    --chart-gradient-end: rgba(88, 166, 255, 0);

    --accent-primary: #58a6ff;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);

    --metric-bg: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
    --priority-high: #f85149;
    --priority-medium: #d29922;
    --priority-low: #3fb950;

    --gradient-success: linear-gradient(135deg, #3fb950, #56d364);
    --gradient-warning: linear-gradient(135deg, #d29922, #e3b341);
    --gradient-danger: linear-gradient(135deg, #f85149, #ff7b72);
    --gradient-chart-normal: linear-gradient(180deg, #58a6ff, #79c0ff);
    --gradient-chart-normal-hover: linear-gradient(180deg, #4493f8, #58a6ff);
    --gradient-chart-peak: linear-gradient(180deg, #3fb950, #56d364);
    --gradient-chart-low: linear-gradient(180deg, #6e7681, #8b949e);
    --gradient-heatmap-bg: linear-gradient(to top, #161b22 0%, transparent 100%);
}