/* =========================================================================
   02 — BASE / TYPOGRAPHY / BUTTONS  (site-wide)
   Keeps Flatsome's font families. We refine colour, contrast, links,
   button geometry + motion, scrollbar and selection.
   ========================================================================= */

body {
	background-color: var(--s67-bg);
	color: var(--s67-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#wrapper,
.page-wrapper {
	background-color: var(--s67-bg);
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
	color: var(--s67-text);
	letter-spacing: -0.01em;
}
h1, h2, h3 { font-weight: 700; }

/* Gold gradient text helper */
.s67-text-gold {
	background: var(--s67-grad-gold);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* --- Links --- */
a {
	transition: color var(--s67-dur-fast) var(--s67-ease);
}
a:hover { color: var(--s67-gold-300); }

/* --- Dividers --- */
.is-divider {
	background: var(--s67-grad-gold) !important;
	opacity: 0.5;
	height: 2px !important;
	border-radius: 2px;
}

/* --- Buttons: refine geometry + motion site-wide --- */
.button {
	border-radius: var(--s67-radius-pill);
	font-weight: 600;
	letter-spacing: 0.01em;
	transition:
		transform var(--s67-dur-fast) var(--s67-ease),
		box-shadow var(--s67-dur-base) var(--s67-ease),
		background var(--s67-dur-base) var(--s67-ease),
		border-color var(--s67-dur-base) var(--s67-ease),
		color var(--s67-dur-fast) var(--s67-ease);
}
.button:not(.is-link):hover {
	transform: translateY(-1px);
}

/* Primary / success → on-brand gold (theme-coloured buttons only;
   inline-styled buttons keep their own colour). */
.button.primary,
.button.success {
	position: relative;
	overflow: hidden;
	background-image: var(--s67-grad-gold);
	background-color: var(--s67-gold-300);
	color: var(--s67-text-on-gold);
	border-color: transparent;
	box-shadow: var(--s67-shadow-gold-glow);
}
.button.primary:hover,
.button.success:hover {
	color: var(--s67-text-on-gold);
	box-shadow:
		0 0 0 1px var(--s67-border-gold),
		0 16px 40px -10px var(--s67-gold-glow);
}

/* Diagonal light sweep ("loá sáng") on gold buttons — runs once on hover */
.button.primary > span,
.button.success > span { position: relative; z-index: 1; }
.button.primary::after,
.button.success::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg,
		transparent 0%,
		rgba(255, 255, 255, 0.55) 50%,
		transparent 100%);
	transform: translateX(-180%) skewX(-20deg);
	pointer-events: none;
	z-index: 2;
}
.button.primary:hover::after,
.button.success:hover::after {
	animation: s67-shine 0.9s var(--s67-ease);
}

@keyframes s67-shine {
	0%   { transform: translateX(-180%) skewX(-20deg); }
	60%  { transform: translateX(260%)  skewX(-20deg); }
	100% { transform: translateX(260%)  skewX(-20deg); }
}

/* Outline buttons → subtle ghost */
.button.is-outline {
	border-color: var(--s67-border-strong);
	color: var(--s67-text);
}
.button.is-outline:hover {
	border-color: var(--s67-border-gold);
	color: var(--s67-gold-100);
	background-color: rgba(244, 196, 48, 0.06);
}

/* --- Custom scrollbar (webkit) --- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--s67-bg); }
::-webkit-scrollbar-thumb {
	background: var(--s67-bg-elev-2);
	border-radius: 8px;
	border: 2px solid var(--s67-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--s67-gold-700); }

/* Firefox */
html { scrollbar-color: var(--s67-bg-elev-2) var(--s67-bg); }

/* --- Selection --- */
::selection {
	background: var(--s67-gold-300);
	color: var(--s67-text-on-gold);
}