/**
 * Zoekee Theme — derived brand accents
 *
 * Primary / secondary / accent hex values come from SiteTheme (DB) and are
 * injected as --site-theme-* in templates/base.html before this file loads.
 *
 * Semantic platform tokens live in components/theme/bootstrap-theme.css.
 */

:root {
  --zk-primary-deep: color-mix(in srgb, var(--site-theme-primary, #1b4332) 82%, black);
  --zk-primary-soft: color-mix(in srgb, var(--site-theme-primary, #1b4332) 18%, white);
  --zk-accent-soft: color-mix(in srgb, var(--site-theme-accent, #68b824) 16%, white);
  --zk-accent-deep: color-mix(in srgb, var(--site-theme-accent, #68b824) 78%, black);
  --zk-chrome: var(--site-theme-secondary, #121212);
  --zk-chrome-rgb: var(--site-theme-secondary-rgb, 18, 18, 18);

  /* Map SiteTheme into platform semantic aliases when present */
  --zk-brand-forest: var(--site-theme-primary, var(--zk-brand-forest, #1b4332));
  --zk-brand-forest-rgb: var(--site-theme-primary-rgb, 27, 67, 50);
  --zk-brand-leaf: var(--site-theme-accent, var(--zk-brand-leaf, #68b824));
  --zk-brand-leaf-rgb: var(--site-theme-accent-rgb, 104, 184, 36);
  --zk-surface-inverse: var(--site-theme-secondary, #121212);
}

/* Selection */
::selection {
  background-color: var(--zk-accent-soft);
  color: var(--zk-brand-forest);
}

/* Optional callout helpers for marketing/editorial blocks */
.callout-primary {
  background-color: var(--zk-primary-soft);
  border-left: 4px solid var(--zk-brand-forest);
}

.callout-accent {
  background-color: var(--zk-accent-soft);
  border-left: 4px solid var(--zk-brand-leaf);
}

.feature-badge {
  color: var(--zk-brand-forest);
}

.feature-badge i {
  color: var(--zk-brand-leaf);
}

.bd-mode-toggle .btn-bd-primary {
  background-color: var(--zk-button-primary-bg, #121212);
  border-color: var(--zk-button-primary-bg, #121212);
  color: var(--zk-button-primary-text, #ffffff);
}

.bd-mode-toggle .btn-bd-primary:hover {
  background-color: var(--zk-primary-deep);
  border-color: var(--zk-primary-deep);
}