/* ===================================
   TIK.R — Base: Variables & Reset
   Client Palette: Purple / Pink / Gold
   =================================== */

:root {
	/* ---- Client Brand Colors ---- */
	--purple: #6a11cb;
	--purple-dark: #4a0a8f;
	--purple-light: rgba(106, 17, 203, 0.12);
	--pink: #ff6fd8;
	--pink-light: rgba(255, 111, 216, 0.15);
	--gold: #ffd600;
	--gold-light: rgba(255, 214, 0, 0.12);

	/* ---- Neutral ---- */
	--bg: #0a0a0a;
	--surface: #111111;
	--surface-2: #181818;
	--border: #1e1e1e;
	--white: #f5f2ff; /* very slight purple tint on white */
	--white-dim: rgba(245, 242, 255, 0.75);
	--white-ghost: rgba(245, 242, 255, 0.1);
	--gray: #555;

	/* ---- Typography ---- */
	--font-display: "Bebas Neue", sans-serif;
	--font-ui: "Syne", sans-serif;
	--font-body: "DM Sans", sans-serif;

	/* ---- Layout ---- */
	--navbar-height: 60px;
	--ticker-height: 100px;
	--ticker-height-sm: 65px;
	--max-w: 1280px;
	--pad-x: clamp(20px, 5vw, 80px);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--navbar-height);
}

body {
	font-family: var(--font-body);
	background: var(--bg);
	color: var(--white);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

a {
	text-decoration: none;
	color: inherit;
}
img {
	max-width: 100%;
	display: block;
}
ul {
	list-style: none;
}

.container {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--pad-x);
}