/* =========================================================
   Theme BASE
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--theme-heading-color);
}

/* =========================================================
   DARK THEME
   ========================================================= */

.dark-theme {
  /* Core theme tokens */
  --theme-bg-color: var(--color-white);
  --theme-text-color: var(--color-warm-white);
  --theme-heading-color: var(--color-warm-white);
  --theme-sub-heading-color: var(--color-warm-white);
  --theme-link-color: var(--color-white);
  --theme-link-hover-color: var(--color-blue-light);
  --theme-link-disabled-color: var(--color-disabled);

  /* UI / navigation */
  --theme-arrow-bg-position: 0 0;
  --theme-arrow-disabled-position: 20% 0;
  --theme-arrow-hover-position: 40% 0;

  /* Dots / indicators */
  --theme-dots-default: var(--color-oak-dark);
  --theme-dots-active: var(--color-blue-dark);

  /* Focus & disabled */
  --btn-focus: var(--color-blue-light);
  --btn-disabled-opacity: 0.4;
  --btn-icon-color: var(--color-white);
  --btn-icon-hover: var(--color-oak);

  /* =====================================================
     BUTTON TOKENS — DARK THEME
     ===================================================== */

  /* Primary */
  --btn-primary-bg: var(--color-white);
  --btn-primary-bg-hover: var(--color-white);
  --btn-primary-txt: var(--color-blue-dark);
  --btn-primary-txt-hover: var(--color-blue-dark);
  --btn-primary-border: var(--color-blue-lightest);
  --btn-primary-border-hover: var(--color-blue-light);

  /* Secondary */
  --btn-secondary-bg: transparent;
  --btn-secondary-bg-hover: var(--color-blue-hover);
  --btn-secondary-txt: var(--color-white);
  --btn-secondary-txt-hover: var(--color-white);
  --btn-secondary-border: var(--color-white);
  --btn-secondary-border-hover: var(--color-blue-light);

  /* Tertiary */
  --btn-tertiary-bg: transparent;
  --btn-tertiary-bg-hover: var(--color-white);
  --btn-tertiary-txt: var(--color-white);
  --btn-tertiary-txt-hover: var(--color-white);
  --btn-tertiary-border: transparent;
  --btn-tertiary-border-hover: transparent;
  --btn-tertiary-icon-color: var(--color-white);

  /* With Icon */
  --btn-with-icon-bg: transparent;
  --btn-with-icon-bg-hover: var(--color-white);
  --btn-with-icon-txt: var(--color-white);
  --btn-with-icon-txt-hover: var(--color-blue-dark);
  --btn-with-icon-border: var(--color-white);
  --btn-with-icon-border-hover: var(--color-blue-lightest);
  --btn-with-icon-icon: var(--color-white);
  --form-field-color: var(--color-white);
  --form-field-soft-black: var(--color-white);
  --form-field-mid-soft-black: var(--color-white);
  --form-field-toggle-clr: transparent;
  --form-check-box: var(--color-blue-dark);
  --form-icon-color: var(--color-white);
  --form-field-hover: var(--color-oak);
}

/* Text color scope (safe, non-global) */
.dark-theme,
.dark-bg {
  color: var(--theme-text-color);
}

/* Sub-headings / Eyebrow text */
.dark-theme :where(.pretitle, .sub-head, .sub-head-md),
.dark-bg :where(.pretitle, .sub-head, .sub-head-md) {
  color: var(--theme-sub-heading-color);
}

/* =========================================================
   TAN THEME (PARTIAL VARIATION)
   ========================================================= */

.tan-theme {
  --theme-heading-color: var(--color-oak);
  --theme-text-color: var(--color-oak-dark);
}

.default-theme {
  --theme-heading-color: var(--color-blue-dark);
  --theme-text-color: var(--color-blue-dark);
}