/* ============================================================
   ROOT VARIABLES
   ============================================================ */
:root {
	--bs-body-bg: #fff;
	--bs-body-color: #212324;

	/* PRIMARY */
	--bs-primary-rgb: 188, 162, 113;
	--bs-primary: rgb(var(--bs-primary-rgb));
	--bs-primary-foreground: #fff;
	--bs-primary-hover: rgb(150, 130, 90);
	--bs-primary-foreground-hover: #fff;
	--bs-primary-active: rgb(125, 108, 75);
	--bs-primary-foreground-active: #fff;

	/* SECONDARY */
	--bs-secondary-rgb: 126, 107, 71;
	--bs-secondary: rgb(var(--bs-secondary-rgb));
	--bs-secondary-foreground: #fff;
	--bs-secondary-hover: rgb(101, 86, 57);
	--bs-secondary-foreground-hover: #fff;
	--bs-secondary-active: rgb(80, 68, 45);
	--bs-secondary-foreground-active: #fff;

	/* DARK */
	--bs-dark-rgb: 33, 35, 36;
	--bs-dark: rgb(var(--bs-dark-rgb));
	--bs-dark-foreground: #fff;
	--bs-dark-hover: rgb(26, 28, 29);
	--bs-dark-foreground-hover: #fff;
	--bs-dark-active: rgb(20, 21, 22);
	--bs-dark-foreground-active: #fff;
}

/* ============================================================
   COMPONENT OVERRIDES (THEME)
   Buttons, Accordion, Focus States
   ============================================================ */

/* ---------------- BUTTONS ---------------- */
.btn-primary {
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-color: var(--bs-primary-foreground);
	--bs-btn-border-color: var(--bs-primary);

	--bs-btn-hover-bg: var(--bs-primary-hover);
	--bs-btn-hover-color: var(--bs-primary-foreground-hover);
	--bs-btn-hover-border-color: var(--bs-primary-hover);

	--bs-btn-active-bg: var(--bs-primary-active);
	--bs-btn-active-color: var(--bs-primary-foreground-active);
	--bs-btn-active-border-color: var(--bs-primary-active);

	--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-secondary {
	--bs-btn-bg: var(--bs-secondary);
	--bs-btn-color: var(--bs-secondary-foreground);
	--bs-btn-border-color: var(--bs-secondary);

	--bs-btn-hover-bg: var(--bs-secondary-hover);
	--bs-btn-hover-color: var(--bs-secondary-foreground-hover);
	--bs-btn-hover-border-color: var(--bs-secondary-hover);

	--bs-btn-active-bg: var(--bs-secondary-active);
	--bs-btn-active-color: var(--bs-secondary-foreground-active);
	--bs-btn-active-border-color: var(--bs-secondary-active);

	--bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}

.btn-dark {
	--bs-btn-bg: var(--bs-dark);
	--bs-btn-color: var(--bs-dark-foreground);
	--bs-btn-border-color: var(--bs-dark);

	--bs-btn-hover-bg: var(--bs-dark-hover);
	--bs-btn-hover-color: var(--bs-dark-foreground-hover);
	--bs-btn-hover-border-color: var(--bs-dark-hover);

	--bs-btn-active-bg: var(--bs-dark-active);
	--bs-btn-active-color: var(--bs-dark-foreground-active);
	--bs-btn-active-border-color: var(--bs-dark-active);

	--bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
}

/* ---------------- BUTTON OUTLINES ---------------- */
.btn-outline-primary {
	--bs-btn-color: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-bg: var(--bs-primary);
	--bs-btn-hover-color: var(--bs-primary-foreground);
}

.btn-outline-secondary {
	--bs-btn-color: var(--bs-secondary);
	--bs-btn-border-color: var(--bs-secondary);
	--bs-btn-hover-bg: var(--bs-secondary);
	--bs-btn-hover-color: var(--bs-secondary-foreground);
}

.btn-outline-dark {
	--bs-btn-color: var(--bs-dark);
	--bs-btn-border-color: var(--bs-dark);
	--bs-btn-hover-bg: var(--bs-dark);
	--bs-btn-hover-color: var(--bs-dark-foreground);
}

/* ---------------- ACCORDION ---------------- */
.accordion-button:not(.collapsed).text-bg-primary {
	background-color: var(--bs-primary) !important;
	color: var(--bs-primary-foreground) !important;
}

.accordion-button:not(.collapsed).text-bg-secondary {
	background-color: var(--bs-secondary) !important;
	color: var(--bs-secondary-foreground) !important;
}

.accordion-button:not(.collapsed).text-bg-dark {
	background-color: var(--bs-dark) !important;
	color: var(--bs-dark-foreground) !important;
}

/* ---------------- FOCUS RING ---------------- */
.btn-primary:focus,
.btn-secondary:focus,
.btn-dark:focus,
.accordion-button:focus,
.form-control:focus {
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* ============================================================
   UTILITIES (ALL IN ONE GROUP)
   text-*, bg-*, text-bg-*, border-*, etc.
   ============================================================ */

/* -------- TEXT -------- */
.text-primary {
	color: var(--bs-primary) !important;
}
.text-secondary {
	color: var(--bs-secondary) !important;
}
.text-dark {
	color: var(--bs-dark) !important;
}

/* -------- BACKGROUNDS -------- */
.bg-primary {
	background-color: var(--bs-primary) !important;
}
.bg-secondary {
	background-color: var(--bs-secondary) !important;
}
.bg-dark {
	background-color: var(--bs-dark) !important;
}

/* -------- TEXT + BG (Bootstrap 5 utility) -------- */
.text-bg-primary {
	color: var(--bs-primary-foreground) !important;
	background-color: var(--bs-primary) !important;
}
.text-bg-secondary {
	color: var(--bs-secondary-foreground) !important;
	background-color: var(--bs-secondary) !important;
}
.text-bg-dark {
	color: var(--bs-dark-foreground) !important;
	background-color: var(--bs-dark) !important;
}

/* -------- BORDERS -------- */
.border-primary {
	border-color: var(--bs-primary) !important;
}
.border-secondary {
	border-color: var(--bs-secondary) !important;
}
.border-dark {
	border-color: var(--bs-dark) !important;
}

/* -------- LINKS (UTILITY) -------- */
.link-primary {
	color: var(--bs-primary) !important;
}
.link-primary:hover,
.link-primary:focus {
	color: var(--bs-primary-hover) !important;
}

.link-secondary {
	color: var(--bs-secondary) !important;
}
.link-secondary:hover,
.link-secondary:focus {
	color: var(--bs-secondary-hover) !important;
}

.link-dark {
	color: var(--bs-dark) !important;
}
.link-dark:hover,
.link-dark:focus {
	color: var(--bs-dark-hover) !important;
}