/*********************************************
 * 1) DEFINE YOUR COLOR VARIABLES
 *********************************************/
:root {
  /* Grayscale */
  --color-black: #312C2C;
  --color-quick-silver-grey: #A4A4A4;
  --color-silver-sand: #C5C5C5;
  --color-cultured-grey: #F5F5F5;
  --color-off-white: #CFD1DE;

  /* Primary (using orange) */
  --color-orange: #F67938;
  /* Secondary (using red) */
  --color-red: #FF5528;

  /* Additional (not used directly here, but available) */
  --color-green: #1B602E;
  --color-purple: #B86BD9;

  /* Pale tones (in case you need them) */
  --color-pale-orange: #FFFEDD;
  --color-pale-pink: #FDCADA;
  --color-pale-green: #E6FAE1;
  --color-pale-purple: #F5E9F9;

  /* Brand usage in Fider */
  --primary-color: var(--color-orange);
  --secondary-color: var(--color-red);

  /* Base text & background colors */
  --text-color: var(--color-black);
  --background-color: var(--color-cultured-grey);

  /* Hover & border adjustments */
  --hover-color: #e65c26; /* Slightly darker orange for hover */
  --border-color: var(--color-silver-sand);
}

/*********************************************
 * 2) GLOBAL ELEMENTS
 *********************************************/
body,
html {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/*********************************************
 * 3) HEADER / NAVBAR
 *********************************************/
.navbar {
  background-color: var(--primary-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.navbar .navbar-brand,
.navbar .navbar-nav .nav-link,
.navbar a.nav-link {
  color: #fff !important;
}

.navbar .navbar-brand:hover,
.navbar .navbar-nav .nav-link:hover {
  opacity: 0.9;
}

/*********************************************
 * 4) LINKS
 *********************************************/
a {
  color: var(--secondary-color);
  text-decoration: none;
}
a:hover {
  color: var(--hover-color);
}

/*********************************************
 * 5) BUTTONS
 *********************************************/
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background-color: var(--hover-color) !important;
  border-color: var(--hover-color) !important;
}

.btn-secondary {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  color: #fff !important;
}
.btn-secondary:hover {
  opacity: 0.9;
}

/*********************************************
 * 6) VOTE / IDEA CARDS / MISC
 *********************************************/
.idea-item,
.suggestion-item,
.feedback-item {
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Vote button or vote count area */
.vote-button,
.vote-count {
  color: var(--primary-color);
}

/* Headings */
h1, h2, h3, h4, h5 {
  color: var(--text-color);
}

/*********************************************
 * 7) FORMS & INPUTS
 *********************************************/
.form-control,
textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
  background-color: #fff;
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

.form-control:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 1px var(--primary-color);
}