/* ============================================
   CENTRALIZED COLOR SYSTEM - SINGLE SOURCE OF TRUTH
   All colors in the application are defined here
   Change colors once, they update everywhere
   ============================================ */

:root {
  /* FOREST BACKGROUND COLORS */
  --color-forest-bg-main: #0F1A16;
  --color-forest-bg-deep: #0B1310;
  --color-forest-bg-base: #05070C;
  --color-forest-panel: #141C18;
  --color-forest-panel-2: #1A2420;
  
  /* BRASS ACCENT COLORS */
  --color-brass-primary: #C2A35E;
  --color-brass-hover: #D4B46E;
  --color-brass-dark: #8F753C;
  
  /* TEXT COLORS */
  --color-text-primary: #E6E2D3;
  --color-text-secondary: #A8B3AD;
  --color-text-muted: #7C8A84;
  --color-text-tab-inactive: #CFC8B0;
  
  /* BORDER & DIVIDER COLORS */
  --color-border-main: #22302A;
  --color-border-soft: #2A3A33;
  
  /* NAVBAR COLORS */
  --color-navbar-bg: #0B1310;
  --color-navbar-border: #22302A;
  --color-navbar-text: #E6E2D3;
  
  /* GLOW & SHADOW EFFECTS */
  --color-brass-glow: rgba(194, 163, 94, 0.35);
  --color-brass-glow-light: rgba(194, 163, 94, 0.25);
  --color-brass-glow-lighter: rgba(194, 163, 94, 0.12);
  
  /* SEMANTIC COLORS */
  --color-success: #0ca06f;
  --color-error: #dc2626;
  --color-warning: #f59e0b;
  --color-info: #0ea5e9;
  
  /* LEGACY - Keep for gradients if needed */
  --color-overlay-dark: rgba(0, 0, 0, 0.7);
  --color-overlay-light: rgba(0, 0, 0, 0.6);
  
  /* DEPRECATED - Do not use */
  --color-deprecated-teal: #198597;
  --color-deprecated-cyan: #06b6d4;
  --color-deprecated-gold: #C9A96A;
  --color-deprecated-gold-light: #E6C27A;
}

/* ============================================
   UTILITY CLASSES FOR COMMON COLOR PATTERNS
   Use these classes instead of inline styles
   ============================================ */

/* TEXT COLOR UTILITIES */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-tab-inactive { color: var(--color-text-tab-inactive); }
.text-brass { color: var(--color-brass-primary); }
.text-white { color: #ffffff; }

/* BACKGROUND COLOR UTILITIES */
.bg-forest-main { background-color: var(--color-forest-bg-main); }
.bg-forest-deep { background-color: var(--color-forest-bg-deep); }
.bg-forest-base { background-color: var(--color-forest-bg-base); }
.bg-forest-panel { background-color: var(--color-forest-panel); }
.bg-forest-panel-2 { background-color: var(--color-forest-panel-2); }
.bg-brass { background-color: var(--color-brass-primary); }
.bg-brass-hover { background-color: var(--color-brass-hover); }
.bg-brass-dark { background-color: var(--color-brass-dark); }

/* BORDER COLOR UTILITIES */
.border-main { border-color: var(--color-border-main); }
.border-soft { border-color: var(--color-border-soft); }
.border-brass { border-color: var(--color-brass-primary); }

/* COMBINED BUTTON AND INTERACTIVE UTILITIES */

/* Primary Button Style */
.btn-primary-style {
  background-color: var(--color-brass-primary);
  color: var(--color-forest-bg-deep);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  transition: background-color 0.3s, color 0.3s;
}

.btn-primary-style:hover {
  background-color: var(--color-brass-hover);
}

.btn-primary-style:active {
  background-color: var(--color-brass-dark);
}

/* Secondary Button Style */
.btn-secondary-style {
  background-color: var(--color-forest-panel);
  color: var(--color-text-primary);
  border: 2px solid var(--color-border-soft);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  transition: all 0.3s;
}

.btn-secondary-style:hover {
  border-color: var(--color-brass-primary);
  color: var(--color-brass-primary);
}

/* Danger Button Style */
.btn-danger-style {
  background-color: var(--color-error);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  transition: background-color 0.3s;
}

.btn-danger-style:hover {
  background-color: #b91c1c;
}

/* Modal Styles */
.modal-overlay-style {
  background-color: var(--color-overlay-dark);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-content-style {
  background-color: var(--color-forest-panel);
  border: 2px solid var(--color-border-main);
  border-radius: 8px;
  padding: 2rem;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

/* Card Styles */
.card-style {
  background-color: var(--color-forest-panel);
  border: 2px solid var(--color-border-soft);
  border-radius: 8px;
  transition: all 0.3s;
}

.card-style:hover {
  border-color: var(--color-brass-primary);
  box-shadow: 0 0 16px rgba(194, 163, 94, 0.25);
}

/* Input Styles */
.input-style {
  background-color: var(--color-forest-panel-2);
  border: 2px solid var(--color-border-soft);
  border-radius: 4px;
  color: var(--color-text-primary);
  padding: 0.75rem;
  transition: border-color 0.3s;
}

.input-style:focus {
  outline: none;
  border-color: var(--color-brass-primary);
}

.input-style::placeholder {
  color: var(--color-text-muted);
}

/* Label Styles */
.label-style {
  color: var(--color-brass-primary);
  font-weight: bold;
  font-size: 0.75rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5rem;
}

/* Tab/Filter Styles */
.tab-style {
  padding: 0.375rem 1.25rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid var(--color-border-soft);
  background-color: transparent;
  color: var(--color-text-tab-inactive);
  cursor: pointer;
  transition: all 0.3s;
}

.tab-style.active {
  background-color: var(--color-brass-primary);
  border-color: var(--color-brass-primary);
  color: var(--color-forest-bg-deep);
}

.tab-style:hover:not(.active) {
  border-color: var(--color-brass-primary);
  color: var(--color-brass-primary);
}

/* Icon Button Styles */
.icon-btn-style {
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-brass-primary);
  color: var(--color-forest-bg-deep);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.icon-btn-style:hover {
  background-color: var(--color-brass-hover);
}

.icon-btn-style.danger:hover {
  background-color: var(--color-error);
  color: white;
}

/* Gradient Utility */
.gradient-brass {
  background: linear-gradient(135deg, var(--color-brass-primary), var(--color-brass-hover));
}

.gradient-forest {
  background: radial-gradient(circle at 50% 0%, #1A2420 0%, #0F1A16 45%, #05070C 85%),
              radial-gradient(circle at 50% 120%, rgba(194,163,94,0.12), transparent 60%);
}

/* Scrollbar Custom Styling */
.scrollbar-brass {
  scrollbar-color: var(--color-brass-primary) var(--color-forest-bg-main);
  scrollbar-width: thin;
}

.scrollbar-brass::-webkit-scrollbar {
  width: 10px;
}

.scrollbar-brass::-webkit-scrollbar-track {
  background: var(--color-forest-bg-main);
}

.scrollbar-brass::-webkit-scrollbar-thumb {
  background: var(--color-brass-primary);
  border-radius: 5px;
  border: 2px solid var(--color-forest-bg-main);
}

.scrollbar-brass::-webkit-scrollbar-thumb:hover {
  background: var(--color-brass-hover);
}

/* NAVBAR STYLING */
.navbar-style {
  background-color: var(--color-navbar-bg);
  border-bottom: 1px solid var(--color-navbar-border);
  color: var(--color-navbar-text);
}

.navbar-style a {
  color: var(--color-navbar-text);
}

.navbar-style a:hover {
  color: var(--color-brass-primary);
}

/* CARD & PANEL HOVER GLOW */
.card-glow,
.panel-glow {
  box-shadow: 0 0 12px var(--color-brass-glow-light);
}

.card-glow:hover,
.panel-glow:hover {
  box-shadow: 0 0 16px var(--color-brass-glow);
}

/* ACCENT GLOW EFFECTS */
.accent-glow {
  box-shadow: 0 0 16px var(--color-brass-glow);
}

.accent-glow-light {
  box-shadow: 0 0 12px var(--color-brass-glow-light);
}

/* INPUT FOCUS GLOW */
.input-glow:focus {
  border-color: var(--color-brass-primary);
  box-shadow: 0 0 8px var(--color-brass-glow-lighter);
}

/* ACCESSIBILITY & SEMANTIC */
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }

.bg-success { background-color: var(--color-success); }
.bg-error { background-color: var(--color-error); }
.bg-warning { background-color: var(--color-warning); }
.bg-info { background-color: var(--color-info); }