/**
 * Tapzio theme tokens + Next.js Tailwind brand-class overrides.
 * Runtime values injected by branding.js into #ab-theme-vars.
 */
:root {
  --ab-brand: #1a8948;
  --ab-brand-dark: #1a4d2e;
  --ab-brand-light: #e8f5ee;
  --ab-brand-hover: #157a3d;
  --ab-accent: #e85d04;
  --ab-bg: #ffffff;
  --ab-surface: #f7f6f2;
  --ab-text: #1a1a1a;
  --ab-text-muted: #5c6570;

  /* Landing aliases (landing.css may redefine; keep fallbacks) */
  --ab-green: var(--ab-brand);
  --ab-green-deep: var(--ab-brand-dark);
  --ab-green-dark: var(--ab-brand-dark);
  --ab-green-soft: var(--ab-brand-light);
  --ab-orange: var(--ab-accent);
  --ab-cream: var(--ab-surface);
  --ab-ink: var(--ab-text);
  --ab-muted: var(--ab-text-muted);
  --ab-white: var(--ab-bg);
  --brand: var(--ab-brand);

  /* Admin semantic tokens (derived from brand; overridden by theme CSS) */
  --ab-admin-help-bg: var(--ab-brand-light, #e8f5ee);
  --ab-admin-help-border: color-mix(in srgb, var(--ab-brand-light) 70%, var(--ab-brand) 30%);
  --ab-admin-help-text: var(--ab-brand-dark, #1a4d2e);
  --ab-admin-help-title: var(--ab-brand, #1a8948);
  --ab-admin-field-border: color-mix(in srgb, var(--ab-brand-light) 55%, var(--ab-brand) 45%);
  --ab-admin-success-bg: var(--ab-brand-light, #e8f5ee);
  --ab-admin-success-text: var(--ab-brand-dark, #1a4d2e);
  --ab-admin-accent-bg: var(--ab-brand-light, #e8f5ee);
  --ab-admin-accent-text: var(--ab-brand-dark, #1a4d2e);
  --ab-admin-accent-border: color-mix(in srgb, var(--ab-brand-light) 80%, var(--ab-brand) 20%);
  --ab-admin-surface: var(--ab-bg, #ffffff);
  --ab-admin-border: #e5e7eb;
  --ab-admin-text: var(--ab-text, #1a1a1a);
  --ab-admin-text-muted: var(--ab-text-muted, #5c6570);
  --ab-admin-panel-bg: var(--ab-bg, #ffffff);
  --ab-admin-panel-border: #e2e8f0;
}

/* ---------- Next.js compiled Tailwind brand utilities ---------- */
.text-brand {
  color: var(--ab-brand) !important;
}
.text-brand\/80 {
  color: color-mix(in srgb, var(--ab-brand) 80%, transparent) !important;
}
.bg-brand {
  background-color: var(--ab-brand) !important;
}
.bg-brand-dark {
  background-color: var(--ab-brand-dark) !important;
}
.text-brand-dark {
  color: var(--ab-brand-dark) !important;
}
.border-brand-dark {
  border-color: var(--ab-brand-dark) !important;
}
.bg-brand-light {
  background-color: var(--ab-brand-light) !important;
}
.bg-brand-light\/30 {
  background-color: color-mix(in srgb, var(--ab-brand-light) 30%, transparent) !important;
}
.bg-brand-light\/40 {
  background-color: color-mix(in srgb, var(--ab-brand-light) 40%, transparent) !important;
}
.bg-brand-light\/50 {
  background-color: color-mix(in srgb, var(--ab-brand-light) 50%, transparent) !important;
}
.bg-brand-light\/60 {
  background-color: color-mix(in srgb, var(--ab-brand-light) 60%, transparent) !important;
}
.bg-brand\/20 {
  background-color: color-mix(in srgb, var(--ab-brand) 20%, transparent) !important;
}
.bg-brand\/30 {
  background-color: color-mix(in srgb, var(--ab-brand) 30%, transparent) !important;
}
.bg-brand\/40 {
  background-color: color-mix(in srgb, var(--ab-brand) 40%, transparent) !important;
}
.bg-brand\/50 {
  background-color: color-mix(in srgb, var(--ab-brand) 50%, transparent) !important;
}
.bg-brand\/70 {
  background-color: color-mix(in srgb, var(--ab-brand) 70%, transparent) !important;
}
.border-brand {
  border-color: var(--ab-brand) !important;
}
.border-brand\/15 {
  border-color: color-mix(in srgb, var(--ab-brand) 15%, transparent) !important;
}
.border-brand\/20 {
  border-color: color-mix(in srgb, var(--ab-brand) 20%, transparent) !important;
}
.border-brand\/25 {
  border-color: color-mix(in srgb, var(--ab-brand) 25%, transparent) !important;
}
.border-brand\/30 {
  border-color: color-mix(in srgb, var(--ab-brand) 30%, transparent) !important;
}
.border-brand\/35 {
  border-color: color-mix(in srgb, var(--ab-brand) 35%, transparent) !important;
}
.border-brand\/50 {
  border-color: color-mix(in srgb, var(--ab-brand) 50%, transparent) !important;
}
.border-l-brand {
  border-left-color: var(--ab-brand) !important;
}
.border-t-brand {
  border-top-color: var(--ab-brand) !important;
}
.border-t-brand\/25 {
  border-top-color: color-mix(in srgb, var(--ab-brand) 25%, transparent) !important;
}
.accent-brand {
  accent-color: var(--ab-brand) !important;
}
.from-brand-light\/70 {
  --tw-gradient-from: color-mix(in srgb, var(--ab-brand-light) 70%, transparent) !important;
}
.from-brand-light\/80 {
  --tw-gradient-from: color-mix(in srgb, var(--ab-brand-light) 80%, transparent) !important;
}
.to-brand-light\/30 {
  --tw-gradient-to: color-mix(in srgb, var(--ab-brand-light) 30%, transparent) !important;
}
.ring-brand\/10 {
  --tw-ring-color: color-mix(in srgb, var(--ab-brand) 10%, transparent) !important;
}
.ring-brand\/15 {
  --tw-ring-color: color-mix(in srgb, var(--ab-brand) 15%, transparent) !important;
}
.ring-brand\/20 {
  --tw-ring-color: color-mix(in srgb, var(--ab-brand) 20%, transparent) !important;
}
.ring-brand\/25 {
  --tw-ring-color: color-mix(in srgb, var(--ab-brand) 25%, transparent) !important;
}
.ring-brand\/30 {
  --tw-ring-color: color-mix(in srgb, var(--ab-brand) 30%, transparent) !important;
}
.shadow-brand\/10 {
  --tw-shadow-color: color-mix(in srgb, var(--ab-brand) 10%, transparent) !important;
}
.shadow-brand\/20 {
  --tw-shadow-color: color-mix(in srgb, var(--ab-brand) 20%, transparent) !important;
}
.shadow-brand\/25 {
  --tw-shadow-color: color-mix(in srgb, var(--ab-brand) 25%, transparent) !important;
}
.shadow-brand\/30 {
  --tw-shadow-color: color-mix(in srgb, var(--ab-brand) 30%, transparent) !important;
}
.hover\:bg-brand-dark:hover {
  background-color: var(--ab-brand-hover, var(--ab-brand-dark)) !important;
}
.hover\:bg-brand-light:hover {
  background-color: var(--ab-brand-light) !important;
}
.hover\:bg-brand-light\/25:hover {
  background-color: color-mix(in srgb, var(--ab-brand-light) 25%, transparent) !important;
}
.hover\:bg-brand-light\/40:hover {
  background-color: color-mix(in srgb, var(--ab-brand-light) 40%, transparent) !important;
}
.hover\:bg-brand\/15:hover {
  background-color: color-mix(in srgb, var(--ab-brand) 15%, transparent) !important;
}
.hover\:border-brand\/25:hover {
  border-color: color-mix(in srgb, var(--ab-brand) 25%, transparent) !important;
}
.hover\:border-brand\/30:hover {
  border-color: color-mix(in srgb, var(--ab-brand) 30%, transparent) !important;
}
.hover\:border-brand\/40:hover {
  border-color: color-mix(in srgb, var(--ab-brand) 40%, transparent) !important;
}
.hover\:ring-brand\/20:hover {
  --tw-ring-color: color-mix(in srgb, var(--ab-brand) 20%, transparent) !important;
}
.hover\:text-brand-dark:hover {
  color: var(--ab-brand-dark) !important;
}
.hover\:text-brand:hover {
  color: var(--ab-brand) !important;
}