/* ============================================
   CSS Custom Properties (Variables)
   Standardized Color Scheme for RestorePoint
   ============================================ */

:root {
    /* ========== Primary Brand Colors ========== */
    --primary-color: #C9AD66;
    --primary-hover: #b69b59;
    --primary-light: rgba(201, 173, 102, 0.1);
    --primary-rgb: 201, 173, 102;
    
    /* Secondary (Dark) Colors */
    --secondary-color: #1a1a2e;
    --secondary-light: #16213e;
    --secondary-rgb: 26, 26, 46;
    
    /* ========== Status Colors ========== */
    /* Success */
    --success-color: #28a745;
    --success-hover: #218838;
    --success-light: #dcfce7;
    --success-gradient: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    
    /* Warning */
    --warning-color: #f0ad4e;
    --warning-hover: #e0a800;
    --warning-light: #fef3c7;
    --warning-gradient: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    
    /* Danger */
    --danger-color: #dc3545;
    --danger-hover: #c82333;
    --danger-light: #f8d7da;
    --danger-gradient: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    
    /* Info */
    --info-color: #17a2b8;
    --info-hover: #138496;
    --info-light: #e3f2fd;
    --info-gradient: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
    
    /* ========== Text Colors ========== */
    --text-dark: #1a1a2e;
    --text-primary: #333333;
    --text-secondary: #6c757d;
    --text-muted: #64748b;
    --text-light: #94a3b8;
    
    /* ========== Background Colors ========== */
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --bg-page: #f5f7fa;
    --bg-page-gradient: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    --bg-dark: #1a1a2e;
    --bg-dark-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    
    /* ========== Border Colors ========== */
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    --border-dark: #dee2e6;
    
    /* ========== UI Component Colors ========== */
    /* Buttons */
    --btn-primary-bg: var(--primary-color);
    --btn-primary-hover: var(--primary-hover);
    --btn-primary-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    
    /* Cards */
    --card-bg: #ffffff;
    --card-border: #eef2f7;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --card-hover-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    
    /* Form Elements */
    --input-border: #e9ecef;
    --input-focus-border: var(--primary-color);
    --input-focus-shadow: 0 0 0 3px rgba(201, 173, 102, 0.15);
    
    /* ========== Border Radius ========== */
    --border-radius-sm: 8px;
    --border-radius: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 20px;
    --border-radius-pill: 50px;
    
    /* ========== Transitions ========== */
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s ease;
}