:root {

  /* GV Brand */
  --gv-green-dark: #004422;
  --gv-green-light: #A2C62C;

  /* Accent */
  --gv-pink: #E83278;
  --gv-blue: #94D4EE;

  /* Background palette */
  --gv-sand-dark: #EAE3D2;
  --gv-sand-light: #F5F1E9;

  /* Neutrals */
  --gv-text-main: #222;
  --gv-text-muted: #6c757d;
  --gv-text-body: #495057;
  --gv-text-dark: #212529;
  --gv-border: #dee2e6;
  --gv-bg-card: #ffffff;
  --gv-bg-secondary: #e9ecef;

  /* Semantic */
  --gv-success: var(--gv-green-light);
  --gv-info: var(--gv-green-light);
  --gv-warning: #ffc107;
  --gv-warning-light: #fff3cd;
  --gv-warning-text: #664d03;
  --gv-danger: #dc3545;
  --gv-danger-light: #f8d7da;
  --gv-danger-border: #f5c6cb;
  --gv-danger-text: #721c24;

  /* Table & code */
  --gv-table-header-bg: #d8f0d2;
  --gv-code-bg: #f1f3f0;

  /* Site layout */
  --gv-body-bg:        #f8f8f8;
  --gv-border-subtle:  #e0e0e0;
  --gv-footer-bg:      #f2f2f2;

  /* App card */
  --gv-card-bg-light:  #eafbe7;
  --gv-card-border:    #b6e2c6;

  /* UI chrome */
  --gv-text-header:    #3e3e3e;
  --gv-divider:        #b8b8ba;

}

/* --- Utility: navigation links (global, used across all apps) --- */
.navigation-links {
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.back-to-home,
.history-link {
  color: var(--gv-green-light);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
}

.back-to-home:hover,
.history-link:hover {
  color: var(--gv-green-dark);
  text-decoration: underline;
}

.back-to-home::before {
  content: "← ";
  margin-right: 5px;
}

.history-link::before {
  content: "📋 ";
  margin-right: 5px;
}

/* --- Utility: alert states --- */
.alert-error-inline {
  background-color: var(--gv-danger-light) !important;
  border-color: var(--gv-danger-border) !important;
  color: var(--gv-danger-text) !important;
}

.alert-warning-inline {
  background-color: var(--gv-warning-light) !important;
  border-color: var(--gv-border) !important;
  color: var(--gv-text-muted) !important;
  font-style: italic;
}

/* --- Utility: form field states --- */
.field-readonly {
  background-color: var(--gv-bg-secondary);
  color: var(--gv-text-muted);
}

/* --- Utility: text helpers --- */
.text-hint {
  color: var(--gv-text-muted);
}

.text-danger-heading {
  color: var(--gv-danger);
}

/* --- Utility: table --- */
.th-label {
  background-color: var(--gv-sand-light);
}

/* --- Bootstrap background overrides --- */
.bg-success {
  background-color: var(--gv-success) !important;
  color: var(--gv-green-dark) !important;
}

.bg-info {
  background-color: var(--gv-info) !important;
  color: var(--gv-green-dark) !important;
}

.bg-warning {
  background-color: var(--gv-warning) !important;
  color: var(--gv-text-dark) !important;
}

.bg-danger {
  background-color: var(--gv-danger) !important;
  color: var(--gv-bg-card) !important;
}

.bg-secondary {
  background-color: var(--gv-text-muted) !important;
  color: var(--gv-bg-card) !important;
}

.bg-dark {
  background-color: var(--gv-green-dark) !important;
  color: var(--gv-bg-card) !important;
}

.bg-gv-blue {
  background-color: var(--gv-blue) !important;
  color: var(--gv-green-dark) !important;
}

.bg-pink {
  background-color: var(--gv-pink) !important;
  color: var(--gv-bg-card) !important;
}

/* --- Bootstrap alert overrides --- */
.alert-success {
  background-color: var(--gv-table-header-bg);
  border-color: var(--gv-success);
  color: var(--gv-green-dark);
}

.alert-info {
  background-color: var(--gv-sand-light);
  border-color: var(--gv-info);
  color: var(--gv-green-dark);
}

.alert-warning {
  background-color: var(--gv-warning-light);
  border-color: var(--gv-warning);
  color: var(--gv-warning-text);
}

.alert-danger {
  background-color: var(--gv-danger-light);
  border-color: var(--gv-danger);
  color: var(--gv-danger-text);
}

/* --- Bootstrap text color overrides --- */
.text-success {
  color: var(--gv-success) !important;
}

.text-primary {
  color: var(--gv-green-dark) !important;
}

.text-muted {
  color: var(--gv-text-muted) !important;
}

/* --- Bootstrap additional background overrides --- */
.bg-primary {
  background-color: var(--gv-green-light) !important;
  color: var(--gv-green-dark) !important;
}

.bg-light {
  background-color: var(--gv-sand-light) !important;
  color: var(--gv-text-main) !important;
}

/* --- Bootstrap button overrides --- */
.btn-outline-secondary {
  border-color: var(--gv-text-muted);
  color: var(--gv-text-muted);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--gv-text-muted);
  border-color: var(--gv-text-muted);
  color: var(--gv-bg-card);
}

.btn-outline-success {
  border-color: var(--gv-success);
  color: var(--gv-success);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: var(--gv-success);
  border-color: var(--gv-success);
  color: var(--gv-green-dark);
}