/* Custom Color Theme for 4KFINEART */
:root {
  /* Primary Colors */
  --black-bean: #3D0F00;
  --black-bean-100: #0c0300;
  --black-bean-200: #180600;
  --black-bean-300: #250900;
  --black-bean-400: #310c00;
  --black-bean-500: #3d0f00;
  --black-bean-600: #972600;
  --black-bean-700: #f13c00;
  --black-bean-800: #ff784b;
  --black-bean-900: #ffbca5;

  /* Secondary Colors */
  --chamoisee: #AC7F54;
  --chamoisee-100: #221911;
  --chamoisee-200: #453221;
  --chamoisee-300: #674c32;
  --chamoisee-400: #8a6542;
  --chamoisee-500: #ac7f54;
  --chamoisee-600: #bd9875;
  --chamoisee-700: #cdb298;
  --chamoisee-800: #decbba;
  --chamoisee-900: #eee5dd;

  /* Accent Colors */
  --earth-yellow: #F3B767;
  --earth-yellow-100: #402705;
  --earth-yellow-200: #804d0a;
  --earth-yellow-300: #c07410;
  --earth-yellow-400: #ee9828;
  --earth-yellow-500: #f3b767;
  --earth-yellow-600: #f5c586;
  --earth-yellow-700: #f8d4a4;
  --earth-yellow-800: #fae2c3;
  --earth-yellow-900: #fdf1e1;

  /* Brown Colors */
  --brown: #893303;
  --brown-100: #1b0a01;
  --brown-200: #361401;
  --brown-300: #511d02;
  --brown-400: #6c2702;
  --brown-500: #893303;
  --brown-600: #d04c04;
  --brown-700: #fb6f24;
  --brown-800: #fc9f6d;
  --brown-900: #fecfb6;

  /* Seal Brown Colors */
  --seal-brown: #511A03;
  --seal-brown-100: #100501;
  --seal-brown-200: #1f0a01;
  --seal-brown-300: #2f0f02;
  --seal-brown-400: #3f1402;
  --seal-brown-500: #511a03;
  --seal-brown-600: #a13506;
  --seal-brown-700: #f44f09;
  --seal-brown-800: #f9895a;
  --seal-brown-900: #fcc4ac;
}

/* Global Theme Application */
body {
  font-family: 'Nunito', sans-serif;
}

/* Primary Theme Colors */
.bg-black-bean { background-color: var(--black-bean); }
.bg-chamoisee { background-color: var(--chamoisee); }
.bg-earth-yellow { background-color: var(--earth-yellow); }
.bg-brown { background-color: var(--brown); }
.bg-seal-brown { background-color: var(--seal-brown); }

.text-black-bean { color: var(--black-bean); }
.text-chamoisee { color: var(--chamoisee); }
.text-earth-yellow { color: var(--earth-yellow); }
.text-brown { color: var(--brown); }
.text-seal-brown { color: var(--seal-brown); }

.border-black-bean { border-color: var(--black-bean); }
.border-chamoisee { border-color: var(--chamoisee); }
.border-earth-yellow { border-color: var(--earth-yellow); }
.border-brown { border-color: var(--brown); }
.border-seal-brown { border-color: var(--seal-brown); }

/* Gradient Backgrounds */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--black-bean) 0%, var(--seal-brown) 100%);
}

.bg-gradient-secondary {
  background: linear-gradient(135deg, var(--chamoisee) 0%, var(--brown) 100%);
}

.bg-gradient-accent {
  background: linear-gradient(135deg, var(--earth-yellow) 0%, var(--chamoisee) 100%);
}

.bg-gradient-to-br {
  background: linear-gradient(to bottom right, var(--chamoisee), var(--earth-yellow));
}

/* Custom Shadows */
.shadow-custom {
  box-shadow: 0 4px 6px -1px rgba(61, 15, 0, 0.1), 0 2px 4px -1px rgba(61, 15, 0, 0.06);
}

.shadow-custom-lg {
  box-shadow: 0 10px 15px -3px rgba(61, 15, 0, 0.1), 0 4px 6px -2px rgba(61, 15, 0, 0.05);
}

/* Button Styles */
.btn-primary {
  background-color: var(--seal-brown);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--black-bean);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: var(--chamoisee);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--brown);
  transform: translateY(-1px);
}

.btn-accent {
  background-color: var(--earth-yellow);
  color: var(--seal-brown);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-accent:hover {
  background-color: var(--earth-yellow-600);
  transform: translateY(-1px);
}

/* Card Styles */
.card-theme {
  background: white;
  border: 2px solid var(--chamoisee);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(61, 15, 0, 0.1);
  transition: all 0.3s ease;
}

.card-theme:hover {
  box-shadow: 0 10px 15px -3px rgba(61, 15, 0, 0.1);
  transform: translateY(-2px);
}

/* Header Styles */
.header-theme {
  background: linear-gradient(135deg, var(--black-bean) 0%, var(--seal-brown) 100%);
  color: white;
}

/* Sidebar Styles */
.sidebar-theme {
  background: linear-gradient(180deg, var(--seal-brown) 0%, var(--black-bean) 100%);
  color: white;
}

/* Navigation Styles */
.nav-item-theme {
  color: var(--chamoisee);
  transition: all 0.3s ease;
}

.nav-item-theme:hover {
  color: var(--earth-yellow);
  background-color: rgba(243, 183, 103, 0.1);
}

.nav-item-theme.active {
  background-color: var(--earth-yellow);
  color: var(--seal-brown);
}

/* Form Styles */
.input-theme {
  border: 2px solid var(--chamoisee);
  border-radius: 0.5rem;
  padding: 0.5rem;
  transition: all 0.3s ease;
}

.input-theme:focus {
  border-color: var(--earth-yellow);
  box-shadow: 0 0 0 3px rgba(243, 183, 103, 0.1);
  outline: none;
}

/* Status Indicators */
.status-scheduled {
  background-color: var(--earth-yellow);
  color: var(--seal-brown);
}

.status-ongoing {
  background-color: var(--chamoisee);
  color: white;
}

.status-completed {
  background-color: var(--brown);
  color: white;
}

/* Badge Styles */
.badge-primary {
  background-color: var(--seal-brown);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-secondary {
  background-color: var(--chamoisee);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-accent {
  background-color: var(--earth-yellow);
  color: var(--seal-brown);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Timeline Styles */
.timeline-item {
  border-left: 3px solid var(--chamoisee);
  padding-left: 1rem;
  margin-bottom: 1rem;
  position: relative;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--earth-yellow);
  border-radius: 50%;
  border: 2px solid var(--seal-brown);
}

/* Responsive Design */
@media (max-width: 768px) {
  .card-theme {
    margin: 0.5rem;
  }
  
  .btn-primary,
  .btn-secondary,
  .btn-accent {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .card-theme {
    background: var(--black-bean-100);
    color: white;
  }
  
  .input-theme {
    background: var(--black-bean-200);
    color: white;
  }
}