/**
 * CUBIX INVESTMENT PLATFORM - GLOBAL THEME
 * ===========================================
 * All color variables are defined here.
 * Change colors in this file to update the entire application theme.
 */

:root {
  /* ========================================
     PRIMARY BRAND COLORS (from Cubix logo)
     ======================================== */
  --primary-color: #42aaab;           /* Main brand color (teal) */
  --primary-hover: #389091;           /* Darker variant for hover states */
  --primary-light: #d1f4f4;           /* Light variant for backgrounds */
  --primary-rgb: 66, 170, 171;        /* RGB values for transparency */
  
  --secondary-color: #389091;         /* Secondary brand color */
  --accent-color: #42aaab;            /* Accent color (same as primary) */
  
  /* ========================================
     SEMANTIC COLORS
     ======================================== */
  --success-color: #10b981;           /* Green for success states */
  --success-light: #dcfce7;           /* Light green background */
  --success-dark: #16a34a;            /* Dark green text */
  
  --danger-color: #ef4444;            /* Red for errors/danger */
  --danger-light: #fee2e2;            /* Light red background */
  --danger-dark: #dc2626;             /* Dark red text */
  
  --warning-color: #f59e0b;           /* Orange/Yellow for warnings */
  --warning-light: #fef9c3;           /* Light yellow background */
  --warning-dark: #ca8a04;            /* Dark yellow text */
  
  --info-color: #3b82f6;              /* Blue for informational */
  --info-light: #dbeafe;              /* Light blue background */
  --info-dark: #2563eb;               /* Dark blue text */
  
  /* ========================================
     NEUTRAL COLORS
     ======================================== */
  --dark-color: #0f172a;              /* Very dark for text/headers */
  --gray-color: #64748b;              /* Medium gray for secondary text */
  --light-gray: #94a3b8;              /* Light gray for muted text */
  --border-color: #e2e8f0;            /* Border color */
  --divider-color: #f1f5f9;           /* Divider/separator color */
  
  /* ========================================
     BACKGROUND COLORS
     ======================================== */
  --body-bg: #f1f5f9;                 /* Main body background */
  --light-bg: #f8fafc;                /* Light background variant */
  --card-bg: #ffffff;                 /* Card/panel background */
  --hover-bg: #fafafe;                /* Hover background for rows */
  --input-bg: #ffffff;                /* Form input background */
  
  /* ========================================
     SIDEBAR COLORS (Admin Panel)
     ======================================== */
  --sidebar-bg: #0f172a;              /* Sidebar background */
  --sidebar-accent: #1e293b;          /* Sidebar accent areas */
  --sidebar-active: #42aaab;          /* Active menu item */
  --sidebar-text: #94a3b8;            /* Sidebar text color */
  --sidebar-text-active: #f8fafc;     /* Active text color */
  
  /* ========================================
     TEXT COLORS
     ======================================== */
  --text-primary: #0f172a;            /* Primary text */
  --text-secondary: #64748b;          /* Secondary text */
  --text-muted: #94a3b8;              /* Muted/placeholder text */
  --text-light: #f8fafc;              /* Light text on dark bg */
  --text-white: #ffffff;              /* Pure white text */
  
  /* ========================================
     STATUS BADGE COLORS
     ======================================== */
  --badge-active-bg: #dcfce7;
  --badge-active-text: #16a34a;
  
  --badge-pending-bg: #fef9c3;
  --badge-pending-text: #ca8a04;
  
  --badge-rejected-bg: #fee2e2;
  --badge-rejected-text: #dc2626;
  
  --badge-withdrawn-bg: #d1f4f4;
  --badge-withdrawn-text: #42aaab;
  
  --badge-matured-bg: #dbeafe;
  --badge-matured-text: #1d4ed8;
  
  --badge-paid-bg: #d1fae5;
  --badge-paid-text: #059669;
  
  /* ========================================
     BUTTON COLORS
     ======================================== */
  --btn-primary-bg: #42aaab;
  --btn-primary-hover: #389091;
  --btn-primary-text: #ffffff;
  
  --btn-secondary-bg: transparent;
  --btn-secondary-border: #42aaab;
  --btn-secondary-text: #42aaab;
  --btn-secondary-hover-bg: #d1f4f4;
  
  --btn-danger-bg: #ef4444;
  --btn-danger-hover: #dc2626;
  --btn-danger-text: #ffffff;
  
  --btn-success-bg: #10b981;
  --btn-success-hover: #059669;
  --btn-success-text: #ffffff;
  
  /* ========================================
     FORM COLORS
     ======================================== */
  --form-border: #e2e8f0;
  --form-border-focus: #42aaab;
  --form-bg: #ffffff;
  --form-text: #0f172a;
  --form-placeholder: #94a3b8;
  --form-label: #374151;
  
  /* ========================================
     SHADOW COLORS
     ======================================== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 4px 15px rgba(66, 170, 171, 0.4);
  
  /* ========================================
     NAVBAR/TOPBAR COLORS
     ======================================== */
  --topbar-bg: #ffffff;
  --topbar-border: #e2e8f0;
  --topbar-text: #0f172a;
  
  /* ========================================
     TABLE COLORS
     ======================================== */
  --table-header-bg: #f8fafc;
  --table-border: #f1f5f9;
  --table-hover: #fafafe;
  
  /* ========================================
     GRADIENT COLORS
     ======================================== */
  --gradient-primary: linear-gradient(135deg, #42aaab 0%, #389091 100%);
  --gradient-hero: linear-gradient(135deg, #42aaab 0%, #389091 100%);
  --gradient-card: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  
  /* ========================================
     BORDER RADIUS
     ======================================== */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 50%;
  
  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  
  /* ========================================
     SPACING (for consistent padding/margin)
     ======================================== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 28px;
  --spacing-4xl: 32px;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Background Colors */
.bg-primary { background-color: var(--primary-color) !important; }
.bg-primary-light { background-color: var(--primary-light) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-success { background-color: var(--success-color) !important; }
.bg-danger { background-color: var(--danger-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-info { background-color: var(--info-color) !important; }
.bg-dark { background-color: var(--dark-color) !important; }
.bg-light { background-color: var(--light-bg) !important; }
.bg-white { background-color: var(--card-bg) !important; }

/* Text Colors */
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-success { color: var(--success-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-info { color: var(--info-color) !important; }
.text-dark { color: var(--text-primary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-white { color: var(--text-white) !important; }

/* Border Colors */
.border-primary { border-color: var(--primary-color) !important; }
.border-secondary { border-color: var(--border-color) !important; }
.border-success { border-color: var(--success-color) !important; }
.border-danger { border-color: var(--danger-color) !important; }

/* Status Badges */
.badge-active {
  background-color: var(--badge-active-bg);
  color: var(--badge-active-text);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-pending {
  background-color: var(--badge-pending-bg);
  color: var(--badge-pending-text);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-rejected {
  background-color: var(--badge-rejected-bg);
  color: var(--badge-rejected-text);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-withdrawn {
  background-color: var(--badge-withdrawn-bg);
  color: var(--badge-withdrawn-text);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-matured {
  background-color: var(--badge-matured-bg);
  color: var(--badge-matured-text);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-paid {
  background-color: var(--badge-paid-bg);
  color: var(--badge-paid-text);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* Buttons */
.btn-cubix-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  transition: var(--transition-base);
}

.btn-cubix-primary:hover {
  background-color: var(--btn-primary-hover);
  color: var(--btn-primary-text);
}

.btn-cubix-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 2px solid var(--btn-secondary-border);
  transition: var(--transition-base);
}

.btn-cubix-secondary:hover {
  background-color: var(--btn-secondary-hover-bg);
  color: var(--btn-secondary-text);
}

/* Cards */
.card-cubix {
  background-color: var(--card-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
}

.card-cubix:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Gradients */
.gradient-primary {
  background: var(--gradient-primary);
}

.gradient-hero {
  background: var(--gradient-hero);
}