/* Centralized theme variables - edit via ThemeEditor.html or directly here */
:root{
  --primary: #c70d00;
  --cta-start: #b91010;
  --cta-end: #d62626;
  --accent: #6d0a0a;
  --sobox: #c90e0e;
  --danger: #550707;
  --white: #ffffff;
  --muted: #6b7280;

  /* additional tokens used by legacy style.css */
  --text: #333333;
  --brand: #ffffff; /* used for headings/modal accents previously */
  --overlay-70: rgba(0,0,0,0.7);
  --modal-bg: var(--white);
  --slider-btn-bg: rgba(0,0,0,0.5);
  --slider-btn-hover: rgba(0,0,0,0.8);
  --benefit-hover: #8b804c;
  --bg: #ffffff;
}

/* Heading defaults and utility classes to centralize colors */
h1,h2,h3,h4,h5,h6, .heading-style{
  color: var(--brand);
}

/* section-title for prominent section headings that should use accent */
.section-title{
  color: var(--accent) !important;
}

.text-accent{ color: var(--accent) !important; }
.text-sobox{ color: var(--sobox) !important; }
.text-primary{ color: var(--primary) !important; }
.bg-brand{ background-color: var(--brand) !important; }

/* small helpers for badges and QR highlight */
.badge-accent{ background: linear-gradient(135deg,var(--cta-start),var(--cta-end)); color: var(--white); }

/* border and ring helpers to map legacy Tailwind emerald colors to theme accent */
.border-accent{ border-color: var(--accent) !important; }
.ring-accent{ box-shadow: 0 0 0 4px var(--accent); }
.hover\:ring-accent:hover{ box-shadow: 0 0 0 8px var(--accent); }

/* background and hover helpers */
.bg-accent{ background-color: var(--accent) !important; }
.hover\:text-accent:hover{ color: var(--accent) !important; }
.hover\:bg-accent:hover{ background-color: var(--accent) !important; }