/**
 * Trilliant Simulations — Design Tokens & Base Typography
 * Ported verbatim from the source static HTML (:root block + base rules).
 * Single source of truth for colours, fonts, container width and buttons.
 */

:root {
	/* Ink / neutrals */
	--ts-ink:        #0f0d12;
	--ts-ink-2:      #2e2a35;
	--ts-ink-3:      #5c5668;
	--ts-ink-4:      #9b95a6;

	/* Rules / surfaces */
	--ts-rule:       #e6e2ec;
	--ts-rule-2:     #f0edf5;
	--ts-rule-hover: #d4cede; /* was hard-coded in the source scroll handler */
	--ts-surface:    #faf9fc;
	--ts-white:      #ffffff;

	/* Brand plum */
	--ts-plum:       #80278c;
	--ts-plum-dk:    #5a1a64;
	--ts-plum-lt:    #f3eaf5;
	--ts-plum-md:    #c97fd4;

	/* Accent sky */
	--ts-sky:        #00bfff;
	--ts-sky-lt:     #e5f8ff;
	--ts-sky-dk:     #0099cc; /* only present in courses.html / contact.html */

	/* Success / badge green */
	--ts-ok-bg:      #e8f9ef;
	--ts-ok-fg:      #1a7f3e;
	--ts-ok-br:      #b3e8c8;

	/* Type */
	--ts-font-head:  'Rubik', sans-serif;
	--ts-font-body:  'Karla', sans-serif;

	/* Layout */
	--ts-wrap:       1160px;
	--ts-wrap-pad:   32px;

	/* Aliases matching the original variable names, so any markup or
	   HTML widget copied straight from the source files still resolves. */
	--ink: var(--ts-ink);
	--ink-2: var(--ts-ink-2);
	--ink-3: var(--ts-ink-3);
	--ink-4: var(--ts-ink-4);
	--rule: var(--ts-rule);
	--rule-2: var(--ts-rule-2);
	--surface: var(--ts-surface);
	--white: var(--ts-white);
	--plum: var(--ts-plum);
	--plum-dk: var(--ts-plum-dk);
	--plum-lt: var(--ts-plum-lt);
	--plum-md: var(--ts-plum-md);
	--sky: var(--ts-sky);
	--sky-lt: var(--ts-sky-lt);
	--sky-dk: var(--ts-sky-dk);
}

/* ─── BASE ────────────────────────────────────────────────── */

html {
	scroll-behavior: smooth;
	font-size: 16px;
}

body {
	font-family: var(--ts-font-body);
	color: var(--ts-ink-2);
	background: var(--ts-white);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	font-family: var(--ts-font-head);
	color: var(--ts-ink);
	line-height: 1.15;
}

body h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 600; letter-spacing: -1.5px; }
body h2 { font-size: clamp(26px, 3.5vw, 40px); font-weight: 600; letter-spacing: -1px; }
body h3 { font-size: clamp(18px, 2vw, 22px); font-weight: 500; letter-spacing: -0.3px; }
body h4 { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }
body h5 {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ts-ink-3);
}

body p { font-size: 16px; line-height: 1.75; color: var(--ts-ink-3); }
body a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* Source container. Used by the theme header/footer; Elementor containers
   use Site Settings → Content Width (1160) to match. */
.wrap {
	max-width: var(--ts-wrap);
	margin: 0 auto;
	padding: 0 var(--ts-wrap-pad);
}

/* ─── BUTTONS ─────────────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ts-font-body);
	font-size: 14px;
	font-weight: 600;
	padding: 11px 24px;
	border-radius: 6px;
	cursor: pointer;
	border: none;
	transition: background 0.18s, color 0.18s, box-shadow 0.18s, border-color 0.18s;
	letter-spacing: 0.01em;
}

.btn-dark { background: var(--ts-ink); color: #fff; }
.btn-dark:hover { background: var(--ts-ink-2); color: #fff; }

.btn-plum { background: var(--ts-plum); color: #fff; }
.btn-plum:hover { background: var(--ts-plum-dk); color: #fff; }

.btn-ghost { background: transparent; color: var(--ts-ink); border: 1.5px solid var(--ts-rule); }
.btn-ghost:hover { border-color: var(--ts-ink-4); background: var(--ts-surface); }

.btn-ghost-plum { background: transparent; color: var(--ts-plum); border: 1.5px solid var(--ts-plum-md); }
.btn-ghost-plum:hover { background: var(--ts-plum-lt); }

.btn-ghost-white { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.35); }
.btn-ghost-white:hover { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.06); }

.btn svg { flex-shrink: 0; }

/* ─── SECTION EYEBROW LABEL ───────────────────────────────── */

.sec-label {
	display: inline-block;
	font-family: var(--ts-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ts-plum);
	margin-bottom: 14px;
}

/* ─── LOAD-IN ANIMATION ───────────────────────────────────── */

@keyframes tsFadeUp {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}

.fade-up { animation: tsFadeUp 0.6s ease forwards; opacity: 0; }
.d1 { animation-delay: 0.05s; }
.d2 { animation-delay: 0.15s; }
.d3 { animation-delay: 0.25s; }
.d4 { animation-delay: 0.35s; }
.d5 { animation-delay: 0.45s; }
.d6 { animation-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.fade-up { animation: none; opacity: 1; }
}

/* Never animate inside the Elementor editor — it makes widgets appear blank. */
.elementor-editor-active .fade-up { animation: none; opacity: 1; }

@media (max-width: 600px) {
	:root { --ts-wrap-pad: 20px; }
}