/* grav-brand palette begin */
/* ──────────────────────────────────────────────────────────────────────
 * Brand palette for Quark — appended to user/themes/quark/css/custom.css
 * by grav-brand. Single :root block defines the brand variables; every
 * rule below uses var() — change the root vars, everything follows.
 *
 * Customers: copy this file, edit only the :root section, deploy via
 *   grav-brand --layer custom --brand /path/to/brand.yaml
 * (grav-brand expands {{brand.X}} from the brand.yaml you supply.)
 * ──────────────────────────────────────────────────────────────────── */

:root {
  --brand-primary:    #0072e3;
  --brand-secondary:  #22c466;
  --brand-accent:     #1ca4cf;
  --brand-ink:        #1d2433;
  --brand-paper:      #ffffff;
  --brand-muted:      #5a6478;
  --brand-surface:    #f4f7fa;

  /* Derived — kept here so themes can also override without recompiling */
  --brand-primary-dark:  color-mix(in srgb, var(--brand-primary) 80%, black);
  --brand-on-primary:    var(--brand-paper);
}

/* navbar accent */
.navbar a.navbar-brand:hover,
.navbar a.navbar-brand:focus { opacity: .85; }

.navbar .navbar-section a:not(.btn) {
  color: var(--brand-ink);
  transition: color .15s ease;
}
.navbar .navbar-section a:not(.btn):hover {
  color: var(--brand-primary);
}
.navbar .navbar-section a.active,
.navbar .navbar-section a:focus {
  color: var(--brand-primary);
  border-bottom: 2px solid var(--brand-secondary);
}

/* hero — gradient backdrop from primary → accent → secondary */
.hero {
  background: linear-gradient(135deg,
                              var(--brand-primary) 0%,
                              var(--brand-accent) 55%,
                              var(--brand-secondary) 100%);
}
.hero h1, .hero h2 { color: var(--brand-paper); }
.hero h2 { color: color-mix(in srgb, var(--brand-paper) 88%, transparent); }

/* primary buttons */
.btn-primary,
.btn.btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}

/* content links */
.content a,
section.section a:not(.btn) {
  color: var(--brand-primary);
}
.content a:hover,
section.section a:not(.btn):hover {
  color: var(--brand-secondary);
}

/* footer ribbon — primary → secondary gradient border */
.footer {
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)) 1;
}
/* grav-brand palette end */