/* === Base Theme CSS Using Customizer Variables === */

:root {
  --accent-color: #eab308;
  --primary-text-color: #111827;
  --secondary-text-color: #6b7280;
  --background-color: #ffffff;
  --link-color: #2563eb;
  --link-hover-color: #1d4ed8;
  --header-bg-color: #ffffff;
  --header-text-color: #000000;
  --footer-bg-color: #1f2937;
  --footer-text-color: #f9fafb;
  --button-bg-color: #2563eb;
  --button-text-color: #ffffff;
  --button-hover-bg-color: #1d4ed8;
  --button-hover-text-color: #ffffff;
}

/* === Typography === */
body {
  background: var(--background-color);
  color: var(--primary-text-color);
  font-family: var(--site-font, 'ABeeZee', sans-serif);
  line-height: 1.6;
  font-size: 16px;
}
h1, h2, h3, h4 {
  color: var(--primary-text-color);
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.875rem; }
h4 { font-size: 1.5rem; }

/* === Links === */
a {
  color: var(--link-color);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover-color);
}

/* === Header === */
header.site-header {
  background: var(--header-bg-color);
  color: var(--header-text-color);
}
header.site-header a {
  color: var(--header-text-color);
}

/* === Footer === */
footer.site-footer {
  background: var(--footer-bg-color);
  color: var(--footer-text-color);
}
footer.site-footer a {
  color: var(--footer-text-color);
}

/* === Buttons === */
button,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  padding: 0.75em 1.5em;
  border: none;
  border-radius: 6px;
  transition: all 0.2s ease;
}
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--button-hover-bg-color);
  color: var(--button-hover-text-color);
}