*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--brand-font-body, 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
  color: var(--brand-text, #000000);
  background: var(--brand-surface, #ffffff);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--brand-font-heading, 'DM Serif Display', Georgia, serif);
}

a {
  color: var(--brand-link, #0077ff);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--brand-link-hover, #005fcc);
}

.brand-cta,
.cta-button,
[data-cta="true"] {
  background: var(--brand-cta-bg, #0077ff);
  color: var(--brand-cta-text, #ffffff);
  border: 0;
  border-radius: var(--brand-cta-radius, 9999px);
  box-shadow: none;
  text-decoration: none;
  animation: none;
  transform: none;
  transition: none;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  border-radius: var(--brand-cta-radius, 9999px);
}

.brand-cta:hover,
.cta-button:hover,
[data-cta="true"]:hover {
  background: var(--brand-cta-bg-hover, #005fcc);
  color: var(--brand-cta-text, #ffffff);
  animation: none;
  transform: none;
  transition: none;
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  border: var(--brand-input-border, 1px solid #d3dae3);
  border-radius: var(--brand-input-radius, 10px);
  background: var(--brand-input-bg, #ffffff);
}

input::placeholder,
textarea::placeholder {
  color: var(--brand-input-placeholder, #666666);
  opacity: var(--brand-input-placeholder-opacity, 0.60);
}

input[placeholder]:not(:placeholder-shown),
textarea[placeholder]:not(:placeholder-shown) {
  background: var(--brand-input-bg-filled, #ffffff);
}

.brand-surface-muted {
  background: var(--brand-surface-muted, #f3f3f3);
}