/* Custom color palette for Forcon Precision Products site */

/* Define CSS variables for the requested color scheme.  These can be reused
   throughout the site to ensure consistency and easy maintenance.  The
   chosen values approximate gunmetal black, deep blue and metallic gray/silver. */
:root {
  --gunmetal: #2a3439;
  --deep-blue: #013a63;
  --metallic-gray: #7e8c99;
  --silver: #b8c4cb;
  --accent: #205081; /* a mid‑tone blue used for interactive elements */
}

/* Background utility classes */
.bg-gunmetal { background-color: var(--gunmetal); }
.bg-deep-blue { background-color: var(--deep-blue); }
.bg-metallic-gray { background-color: var(--metallic-gray); }
.bg-silver { background-color: var(--silver); }

/* Text utility classes */
.text-gunmetal { color: var(--gunmetal); }
.text-deep-blue { color: var(--deep-blue); }
.text-metallic-gray { color: var(--metallic-gray); }
.text-silver { color: var(--silver); }
.text-accent { color: var(--accent); }

/* Button style to complement the color scheme.  These classes add
   consistent padding, rounded corners and smooth transitions on hover. */
.btn-primary {
  background-color: var(--accent);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  transition: background-color 0.2s ease;
  display: inline-block;
  text-align: center;
}

.btn-primary:hover {
  background-color: var(--deep-blue);
}

/* Override some of Tailwind's default colors for links to match our palette. */
a {
  color: var(--accent);
}
a:hover {
  color: var(--deep-blue);
}

/* Header styling: give the header a dark background and adjust
   navigation link colors for readability on dark backgrounds. */
header.bg-custom {
  background-color: var(--gunmetal);
  color: #fff;
}

header.bg-custom nav a {
  color: var(--silver);
  transition: color 0.2s ease;
}

header.bg-custom nav a:hover {
  color: #fff;
}

/* Footer styling: a deep blue background with light text. */
footer.bg-custom {
  background-color: var(--deep-blue);
  color: var(--silver);
}

footer.bg-custom a {
  color: var(--silver);
}
footer.bg-custom a:hover {
  color: #fff;
}