/* ===================================
   Simplified Color System - 5 Color Maximum
   Following UI Design 16 Rules
   =================================== */

:root {
    /* ===== Primary Functional Colors (5 Maximum) ===== */
    
    /* 1. Brand Primary - Interactive elements, links, CTAs */
    --color-primary: #03c4eb;
    
    /* 2. Text/Structure - Headings, important UI elements */
    --color-secondary: #1a1a2e;
    
    /* 3. Success - Positive actions, confirmations */
    --color-success: #28a745;
    
    /* 4. Warning - Alerts, pending states */
    --color-warning: #ffc107;
    
    /* 5. Error - Errors, destructive actions */
    --color-error: #dc3545;
    
    /* ===== Neutral Colors (Don't count toward 5-color limit) ===== */
    --color-white: #ffffff;
    --color-gray-50: #f8f9fa;
    --color-gray-100: #f1f3f5;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;
    --color-black: #000000;
    
    /* ===== Semantic Aliases ===== */
    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-600);
    --text-muted: var(--color-gray-500);
    --text-inverse: var(--color-white);
    
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-gray-50);
    --bg-tertiary: var(--color-gray-100);
    
    --border-color: var(--color-gray-300);
    --border-color-light: var(--color-gray-200);
    
    /* ===== Component-Specific Mappings ===== */
    
    /* Links */
    --link-color: var(--color-primary);
    --link-hover-color: var(--color-secondary);
    
    /* Buttons */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-text: var(--color-white);
    --btn-secondary-bg: var(--color-secondary);
    --btn-secondary-text: var(--color-white);
    
    /* Forms */
    --input-border: var(--color-gray-300);
    --input-focus-border: var(--color-primary);
    --input-error-border: var(--color-error);
    --input-success-border: var(--color-success);
    
    /* Alerts/Notifications */
    --alert-info-bg: var(--color-primary);
    --alert-success-bg: var(--color-success);
    --alert-warning-bg: var(--color-warning);
    --alert-error-bg: var(--color-error);
    
    /* ===== Legacy Color Replacements ===== */
    /* Map old colors to new system */
    --primary-color: var(--color-primary);
    --secondary-color: var(--color-secondary);
    --accent-red: var(--color-error);  /* Reuse error color */
    --accent-turquoise: var(--color-primary);  /* Reuse primary */
    
    /* Replace multiple shades with single colors */
    --success-color: var(--color-success);
    --warning-color: var(--color-warning);
    --error-color: var(--color-error);
    
    /* Gray scale mappings */
    --white: var(--color-white);
    --gray-50: var(--color-gray-50);
    --gray-100: var(--color-gray-100);
    --gray-200: var(--color-gray-200);
    --gray-300: var(--color-gray-300);
    --gray-400: var(--color-gray-400);
    --gray-500: var(--color-gray-500);
    --gray-600: var(--color-gray-600);
    --gray-700: var(--color-gray-700);
    --gray-800: var(--color-gray-800);
    --gray-900: var(--color-gray-900);
    --black: var(--color-black);
}

/* ===== Color Application Guidelines ===== */

/* Primary Color Uses */
.text-primary { color: var(--color-primary); }
.bg-primary { background-color: var(--color-primary); }
.border-primary { border-color: var(--color-primary); }

/* Secondary Color Uses */
.text-secondary { color: var(--color-secondary); }
.bg-secondary { background-color: var(--color-secondary); }
.border-secondary { border-color: var(--color-secondary); }

/* Success Color Uses */
.text-success { color: var(--color-success); }
.bg-success { background-color: var(--color-success); }
.border-success { border-color: var(--color-success); }

/* Warning Color Uses */
.text-warning { color: var(--color-warning); }
.bg-warning { background-color: var(--color-warning); }
.border-warning { border-color: var(--color-warning); }

/* Error Color Uses */
.text-error { color: var(--color-error); }
.bg-error { background-color: var(--color-error); }
.border-error { border-color: var(--color-error); }

/* Neutral Color Uses */
.text-muted { color: var(--text-muted); }
.text-light { color: var(--color-gray-600); }
.text-dark { color: var(--color-gray-900); }

/* ===== Gradient Simplification ===== */
/* Use only primary color variations for gradients */
.gradient-primary {
    background: linear-gradient(135deg, 
        var(--color-primary) 0%, 
        color-mix(in srgb, var(--color-primary) 80%, var(--color-white)) 100%
    );
}

.gradient-secondary {
    background: linear-gradient(135deg, 
        var(--color-secondary) 0%, 
        color-mix(in srgb, var(--color-secondary) 80%, var(--color-white)) 100%
    );
}

/* ===== Transparency Utilities ===== */
.opacity-10 { opacity: 0.1; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-90 { opacity: 0.9; }

/* ===== Dark Mode Adjustments ===== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Invert text and background */
        --text-primary: var(--color-gray-100);
        --text-secondary: var(--color-gray-400);
        --text-muted: var(--color-gray-500);
        
        --bg-primary: var(--color-gray-900);
        --bg-secondary: var(--color-gray-800);
        --bg-tertiary: var(--color-gray-700);
        
        --border-color: var(--color-gray-600);
        --border-color-light: var(--color-gray-700);
        
        /* Adjust functional colors for dark mode */
        --color-primary: #4dd0fa;  /* Brighter for dark backgrounds */
        --color-success: #48c774;
        --color-warning: #ffdd57;
        --color-error: #ff3860;
    }
}

/* ===== High Contrast Mode ===== */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #0080ff;
        --color-secondary: #000000;
        --color-success: #008000;
        --color-warning: #ff8000;
        --color-error: #ff0000;
    }
}

/* ===== Color Blindness Support ===== */
/* Patterns and icons should supplement color meaning */
.status-indicator {
    position: relative;
}

.status-indicator::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 50%;
}

.status-indicator.success::before {
    background: var(--color-success);
    /* Add checkmark icon for non-color indication */
}

.status-indicator.warning::before {
    background: var(--color-warning);
    /* Add exclamation icon for non-color indication */
}

.status-indicator.error::before {
    background: var(--color-error);
    /* Add X icon for non-color indication */
}