/* Gold Stars, base styles. Builds on tokens, shapes typography, links, buttons. */

html { scroll-behavior: smooth; }
body {
	font-family: var(--gs-font-ar);
	font-size: var(--gs-text-base);
	line-height: 1.7;
	color: var(--gs-ink);
	background: var(--gs-white);
}
body.en-mode { font-family: var(--gs-font-en); line-height: 1.65; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gs-font-ar);
	font-weight: 700;
	line-height: 1.25;
	color: var(--gs-navy);
	margin: 0 0 var(--gs-space-4);
}
body.en-mode h1, body.en-mode h2, body.en-mode h3,
body.en-mode h4, body.en-mode h5, body.en-mode h6 { font-family: var(--gs-font-en); }

h1 { font-size: var(--gs-h1); font-weight: 800; }
h2 { font-size: var(--gs-h2); font-weight: 700; }
h3 { font-size: var(--gs-h3); font-weight: 700; }

a { color: var(--gs-teal); text-decoration: none; transition: var(--gs-transition); }
a:hover { color: var(--gs-gold); }

:focus-visible { outline: 3px solid var(--gs-gold); outline-offset: 3px; border-radius: 4px; }

.gs-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--gs-space-2);
	padding: 0.8rem 2rem;
	border: 0;
	border-radius: var(--gs-radius-pill);
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	transition: var(--gs-transition);
	white-space: nowrap;
}
.gs-btn-primary { background: var(--gs-gold); color: var(--gs-navy); box-shadow: var(--gs-shadow-gold); }
.gs-btn-primary:hover { background: var(--gs-gold-dark); color: var(--gs-navy); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(212, 168, 67, 0.45); }
.gs-btn-teal { background: var(--gs-teal); color: var(--gs-white); box-shadow: var(--gs-shadow-teal); }
.gs-btn-teal:hover { background: var(--gs-teal-dark); color: var(--gs-white); transform: translateY(-2px); }
.gs-btn-wa { background: #25d366; color: #fff; }
.gs-btn-wa:hover { background: #1ebe5e; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); }
.gs-btn-ghost { background: transparent; color: var(--gs-navy); border: 2px solid var(--gs-navy); }
.gs-btn-ghost:hover { background: var(--gs-navy); color: var(--gs-white); transform: translateY(-2px); }
.gs-btn-block { width: 100%; justify-content: center; }

.gs-divider-gold {
	width: 50px;
	height: 4px;
	background: var(--gs-gold);
	border-radius: 2px;
	margin: var(--gs-space-4) 0 var(--gs-space-5);
}

.gs-section-label {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--gs-gold-dark);
	margin-bottom: var(--gs-space-3);
}

/* Scroll reveals, attach .gs-fade-up to any element, JS toggles .is-visible */
.gs-fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--gs-ease-out), transform 0.7s var(--gs-ease-out); }
.gs-fade-up.is-visible { opacity: 1; transform: translateY(0); }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
	.gs-fade-up { opacity: 1; transform: none; }
}