/* webcolor.css - Baoboza Brand Colors */

/* Core Brand Colors */
:root {
  /* Dark Base Colors */
  --color-dark-blue: #0d1c26;
  --color-dark-green: #0d261c;
  --color-dark-brown: #5c3a2a;
  
  /* Brown Palette */
  --color-light-brown: #e89652;
  --color-medium-brown: #c67a42;
  --color-dark-brown-alt: #a85c32;
  --color-original-dark-brown: #e27448;
  --color-warm-brown: #d88a48;
  
  /* Your brown shades from the CSS */
  --color-brown-orange: #ed713b; /* from #ed713b, #ed6e39 */
  --color-brown-light: #e49858; /* from #e49858, #e59051, #e69355, #e69456 */
  --color-brown-medium: #ec723d; /* from #ec723d */
  
  /* Green Palette */
  --color-light-green: #7bffc4;
  --color-medium-green: #4cd9a0;
  --color-dark-green-alt: #154a32;
  --color-teal-green: #06e5b6; /* from #06e5b6 */
  
  /* Blue Palette */
  --color-light-blue: #7bc4ff;
  --color-medium-blue: #4a90e2;
  --color-original-dark-blue: #1a2b38;
  
  /* Neutral */
  --color-black: #000000;
  
  /* Shadow Colors with brand colors */
  --color-brown-shadow: rgba(226, 116, 72, 0.15);
  --color-green-shadow: rgba(123, 255, 196, 0.1);
  --color-blue-shadow: rgba(123, 196, 255, 0.1);
  --color-teal-shadow: rgba(6, 229, 182, 0.1); /* from your CSS */
}

/* Background Colors */
.bgcolor-dark-green { background-color: var(--color-dark-green); }
.bgcolor-dark-blue { background-color: var(--color-dark-blue); }
.bgcolor-dark-brown { background-color: var(--color-dark-brown); }
.bgcolor-light-brown { background-color: var(--color-light-brown); }
.bgcolor-medium-brown { background-color: var(--color-medium-brown); }
.bgcolor-teal-green { background-color: var(--color-teal-green); }

/* Button Colors */
.btncolor-dark-green { 
  background-color: var(--color-dark-green); 
  color: white;
  border: 2px solid var(--color-dark-green);
}
.btncolor-dark-green:hover {
  background-color: var(--color-dark-green-alt);
  border-color: var(--color-dark-green-alt);
  box-shadow: 0 4px 12px var(--color-green-shadow);
}

.btncolor-dark-blue { 
  background-color: var(--color-dark-blue); 
  color: white;
  border: 2px solid var(--color-dark-blue);
}
.btncolor-dark-blue:hover {
  background-color: var(--color-original-dark-blue);
  border-color: var(--color-original-dark-blue);
  box-shadow: 0 4px 12px var(--color-blue-shadow);
}

.btncolor-brown { 
  background-color: var(--color-medium-brown); 
  color: white;
  border: 2px solid var(--color-medium-brown);
}
.btncolor-brown:hover {
  background-color: var(--color-dark-brown-alt);
  border-color: var(--color-dark-brown-alt);
  box-shadow: 0 4px 12px var(--color-brown-shadow);
}

.btncolor-black { 
  background-color: var(--color-black); 
  color: white;
  border: 2px solid var(--color-black);
}
.btncolor-black:hover {
  background-color: var(--color-brown-orange);
  border-color: var(--color-brown-orange);
  box-shadow: 0 4px 12px var(--color-brown-shadow);
}

/* Light Colors (Use sparingly for small elements) */
.lightgreen { color: var(--color-light-green); }
.lightgreen-bg { 
  background-color: var(--color-light-green); 
  color: var(--color-black);
  border: 1px solid var(--color-light-green);
}

.lightbrown { color: var(--color-light-brown); }
.lightbrown-bg { 
  background-color: var(--color-light-brown); 
  color: var(--color-black);
  border: 1px solid var(--color-light-brown);
}

.lightblue { color: var(--color-light-blue); }
.lightblue-bg { 
  background-color: var(--color-light-blue); 
  color: var(--color-black);
  border: 1px solid var(--color-light-blue);
}

.teal-green { color: var(--color-teal-green); }
.teal-green-bg { 
  background-color: var(--color-teal-green); 
  color: var(--color-black);
  border: 1px solid var(--color-teal-green);
}

/* Border Classes */
.border-dark-green { border: 2px solid var(--color-dark-green); }
.border-dark-blue { border: 2px solid var(--color-dark-blue); }
.border-dark-brown { border: 2px solid var(--color-dark-brown); }
.border-light-brown { border: 2px solid var(--color-light-brown); }
.border-medium-brown { border: 2px solid var(--color-medium-brown); }
.border-brown-orange { border: 2px solid var(--color-brown-orange); }
.border-light-green { border: 1px solid var(--color-light-green); }
.border-light-blue { border: 1px solid var(--color-light-blue); }
.border-teal-green { border: 1px solid var(--color-teal-green); }

/* Thin Borders for subtle outlines */
.border-thin-dark-green { border: 1px solid var(--color-dark-green); }
.border-thin-dark-blue { border: 1px solid var(--color-dark-blue); }
.border-thin-brown { border: 1px solid var(--color-medium-brown); }
.border-thin-light-green { border: 1px solid var(--color-light-green); }
.border-thin-teal-green { border: 1px solid var(--color-teal-green); }

/* Shadow Classes */
.shadow-brown { box-shadow: 0 4px 20px var(--color-brown-shadow); }
.shadow-light-green { box-shadow: 0 4px 20px var(--color-green-shadow); }
.shadow-lightblue { box-shadow: 0 4px 20px var(--color-blue-shadow); }
.shadow-teal-green { box-shadow: 0 4px 20px var(--color-teal-shadow); }

/* Small Element Class for Light Green (Client requirement) */
.small-light-green {
  color: var(--color-light-green);
  font-size: 0.875rem;
  display: inline-block;
  padding: 0 2px;
  border: none;
}

.small-teal-green {
  color: var(--color-teal-green);
  font-size: 0.875rem;
  display: inline-block;
  padding: 0 2px;
  border: none;
}