/**
 * Reasoned. — shared design tokens (consumer layer)
 * Load FIRST on each app shell; published theme/typography from Page Builder inject after and override :root.
 * Use var(--acc) / typography vars — avoid hardcoded #00C281 in feature CSS.
 */

:root {
  --acc: #00C281;
  --red: #e05252;
  --adim: rgba(0, 194, 129, 0.15);
  --aglow: rgba(0, 194, 129, 0.45);
}

/* Accent-derived tints (track Page Builder accent when --acc changes) */
@supports (color: color-mix(in srgb, white, black)) {
  :root {
    --acc-mix-04: color-mix(in srgb, var(--acc) 4%, transparent);
    --acc-mix-07: color-mix(in srgb, var(--acc) 7%, transparent);
    --acc-mix-10: color-mix(in srgb, var(--acc) 10%, transparent);
    --acc-mix-12: color-mix(in srgb, var(--acc) 12%, transparent);
    --acc-mix-14: color-mix(in srgb, var(--acc) 14%, transparent);
    --acc-mix-25: color-mix(in srgb, var(--acc) 25%, transparent);
    --acc-mix-35: color-mix(in srgb, var(--acc) 35%, transparent);
    --acc-mix-40: color-mix(in srgb, var(--acc) 40%, transparent);
    --acc-mix-45: color-mix(in srgb, var(--acc) 45%, transparent);
    --acc-mix-65: color-mix(in srgb, var(--acc) 65%, transparent);
    --shadow-acc-soft: 0 0 22px color-mix(in srgb, var(--acc) 65%, transparent);
    --shadow-acc-glow: 0 0 20px color-mix(in srgb, var(--acc) 40%, transparent);
    --shadow-acc-num: 0 0 22px color-mix(in srgb, var(--acc) 35%, transparent);
  }
}

/* Section kicker / tag: one colour for punctuation, nested spans, and line (tracks theme accent) */
.cms-sec .tag,
.cms-dynamic-root .tag,
.page .tag {
  color: var(--acc) !important;
}
.cms-sec .tag::before,
.cms-dynamic-root .tag::before,
.page .tag::before {
  background: var(--acc) !important;
}
.cms-sec .tag *,
.cms-dynamic-root .tag *,
.page .tag * {
  color: inherit !important;
}

/* CMS overlay: add-section affordances (page builder on live site) */
body.cms-admin-active .rt-cms-gap {
  border-color: var(--acc-mix-40, rgba(0, 194, 129, 0.4)) !important;
  background: var(--acc-mix-07, rgba(0, 194, 129, 0.07)) !important;
}
body.cms-admin-active .rt-cms-gap-static {
  background: var(--acc-mix-04, rgba(0, 194, 129, 0.04)) !important;
}
.rt-cms-add-btn {
  border-color: var(--acc-mix-45, rgba(0, 194, 129, 0.45)) !important;
  color: var(--acc) !important;
  background: rgba(0, 0, 0, 0.35) !important;
}
.rt-cms-add-btn:hover {
  background: var(--acc-mix-14, rgba(0, 194, 129, 0.14)) !important;
  border-color: var(--acc) !important;
  color: var(--acc) !important;
}