/* style.css — custom branding tweaks */

/* === Brand Colors === */
:root {
  --brand-primary: #0077b6;  /* Deep blue */
  --brand-accent: #00b4d8;   /* Bright aqua */
  --brand-light: #caf0f8;    /* Pale background */
  --brand-text: #212529;     /* Dark gray text */
  --brand-card-bg: #ffffff;  /* Card background */
  --brand-border: rgba(0, 0, 0, 0.08);
}

/* === Base Theme === */
body {
  background-color: var(--brand-light);
  color: var(--brand-text);
}

/* Give the card some breathing space and a subtle lift */
.card {
  background-color: var(--brand-card-bg);
  border-radius: 1rem;
  border: 1px solid var(--brand-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Override Bootstrap's primary button to use brand colors */
.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  transition: background-color 0.3s ease, transform 0.1s ease;
}

.btn-primary:hover {
  background-color: var(--brand-accent);
  transform: scale(1.02);
}

/* Make the result text stand out a little more */
#result {
  color: var(--brand-primary);
  font-size: 1.2rem;
}