/* eProc brand theme — light green gradient.
   Loaded after the template CSS so these variables win. The template reads
   every colour from --primary-* tokens, so overriding them here retints
   buttons, links, active states and badges without editing compiled CSS. */

:root {
  /* Brand palette */
  --eproc-50: #f3fbf6;
  --eproc-100: #dcf5e6;
  --eproc-200: #b7e9c9;
  --eproc-300: #8fd9ad;
  --eproc-400: #63c491;
  --eproc-500: #3aa76d;
  --eproc-600: #2f8f5b;
  --eproc-700: #24704a;
  --eproc-gradient: linear-gradient(135deg, #6fdc9b 0%, #3aa76d 55%, #24704a 100%);
  --eproc-gradient-soft: linear-gradient(180deg, #f7fdf9 0%, #eef9f2 45%, #e3f4ea 100%);

  /* Template tokens */
  --primary-bg-color: #3aa76d;
  --primary-bg-hover: #2f8f5b;
  --primary-bg-border: #3aa76d;
  --primary-transparentcolor: rgba(58, 167, 109, 0.16);
  --primary005: rgba(58, 167, 109, 0.05);
  --primary01: rgba(58, 167, 109, 0.1);
  --primary02: rgba(58, 167, 109, 0.2);
  --primary03: rgba(58, 167, 109, 0.3);
  --primary05: rgba(58, 167, 109, 0.5);
  --primary07: rgba(58, 167, 109, 0.7);
  --primary08: rgba(58, 167, 109, 0.8);
  --primary09: rgba(58, 167, 109, 0.9);
  --dark-primary: #3aa76d;
}

body {
  background: var(--eproc-gradient-soft);
  background-attachment: fixed;
}

/* Primary surfaces get the gradient rather than a flat fill. */
.btn-primary,
.bg-primary,
.badge-primary,
.page-item.active .page-link,
.nav-pills .nav-link.active {
  background-image: var(--eproc-gradient) !important;
  border-color: var(--eproc-500) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-image: linear-gradient(135deg, #5fd48e 0%, #2f8f5b 55%, #1e5f3f 100%) !important;
  border-color: var(--eproc-600) !important;
}

a,
.link-primary,
.text-primary {
  color: var(--eproc-600) !important;
}

a:hover,
a:focus {
  color: var(--eproc-700) !important;
}

.card-header,
.main-header,
.app-header {
  border-bottom-color: var(--eproc-200);
}

/* Brand mark container, used on the login screens. */
.eproc-brand-panel,
.auth-bg,
.login-bg {
  background-image: var(--eproc-gradient);
}

::selection {
  background: var(--eproc-200);
  color: var(--eproc-700);
}