/* Central theme variables and utility classes
   Change --color-primary once to re-theme the site.
*/
:root {
  /* Brand primary */
  --color-primary: #003c30;            /* base */
  --color-primary-rgb: 0, 60, 48;      /* for rgba() usage - keep in sync with --color-primary */
  --color-on-primary: #ffffff;         /* text on primary */

  /* Helpful shades (mapped from current design) */
  --color-primary-hover: #5fa00a;      /* hover state for buttons/links */
  --color-primary-active: #3a6c04;     /* pressed/darker */
  --color-primary-dark: #284805;       /* very dark accent icon color */
  --color-primary-alt: #2c7906;        /* navbar text/link variant */
  --color-primary-light: #70c515;      /* lighter brand accent */
  --color-primary-grad-1: #003c30;     /* gradient start used in .btncontact */
  --color-primary-grad-2: #115615;     /* gradient end used in .btncontact */

  /* Secondary hover (for outline/secondary buttons) */
  --color-secondary-hover: #0d6efd;    /* Bootstrap primary blue for secondary hover */

  /* Brand-tinted surfaces seen across pages */
  --surface-green-50: #f0fdf4;   /* very light green bg */
  --surface-green-100: #eaf7e1;  /* light green bg */
  --surface-green-150: #d8f9c1;  /* CTA section bg */
  --surface-teal-100: #d8ebef;   /* testimonials bg */
  --surface-gray-100: #e6e9e4;   /* neutral cards */
  --surface-muted: var(--surface-gray-100); /* generic muted surface */

  /* Footer theme tokens (light footer as originally designed) */
  --footer-bg: #f9f9f9;              /* keep original light background */
  --footer-text: #333;               /* default dark text */
  --footer-text-muted: #666;         /* subdued text */
  --footer-border: #ddd;             /* light divider */
  --footer-link-hover: var(--color-primary);
}

/* Utilities */
.text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }

.text-on-primary { color: var(--color-on-primary) !important; }
.bg-surface-green-50 { background-color: var(--surface-green-50) !important; }
.bg-surface-green-100 { background-color: var(--surface-green-100) !important; }
.bg-surface-green-150 { background-color: var(--surface-green-150) !important; }
.bg-surface-teal-100 { background-color: var(--surface-teal-100) !important; }
.bg-surface-gray-100 { background-color: var(--surface-gray-100) !important; }

/* Brand button helper */
.btn-brand {
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}
.btn-brand:hover,
.btn-brand:focus { background-color: var(--color-primary-hover) !important; }
.btn-brand:active { background-color: var(--color-primary-active) !important; }

/* Outline brand button helper */
.btn-outline-brand {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
}
.btn-outline-brand:hover,
.btn-outline-brand:focus {
  /* Match the "Get a Quote" (Bootstrap primary) button color */
  background-color: var(--bs-primary, #0d6efd) !important;
  border-color: var(--bs-primary, #0d6efd) !important;
  color: var(--color-on-primary) !important;
}
.btn-outline-brand:active {
  background-color: var(--color-primary-active) !important;
  color: var(--color-on-primary) !important;
}

/* Icon circle default border helper */
.icon-circle-brand { border-color: var(--color-primary) !important; }

/* Link hover helper */
.link-brand:hover { color: var(--color-primary) !important; }