/**
 * TIMi System Colors — from Figma frame "System Colors".
 *
 * Use the CSS variables anywhere, or the utility classes:
 *   .timi-color-{name}  → color
 *   .timi-bg-{name}     → background
 */

:root {
	--timi-color-black: #313e4e;
	--timi-color-grey-dark: #dddddd;
	--timi-color-grey: #f9f9f9;
	--timi-color-white: #ffffff;
	--timi-color-blue: #15adbb;
	--timi-color-blue-dark: #147489;
	--timi-color-background-grey: #f9f9f9;
	--timi-color-orange: #fa6422;
	--timi-color-app-green: #8cd02c;
	--timi-color-app-yellow: #f7a300;
	--timi-color-app-red: #fb4131;
	--timi-color-app-purple: #d372fe;
	--timi-color-background-start: #106f77;
	--timi-color-background-mid: #0c4f54;
	--timi-color-background-end: #092f32;
}

.timi-color-black {
	color: var(--timi-color-black);
}

.timi-color-grey-dark {
	color: var(--timi-color-grey-dark);
}

.timi-color-grey {
	color: var(--timi-color-grey);
}

.timi-color-white {
	color: var(--timi-color-white);
}

.timi-color-blue {
	color: var(--timi-color-blue);
}

.timi-color-blue-dark {
	color: var(--timi-color-blue-dark);
}

.timi-color-orange {
	color: var(--timi-color-orange);
}

.timi-color-app-green {
	color: var(--timi-color-app-green);
}

.timi-color-app-yellow {
	color: var(--timi-color-app-yellow);
}

.timi-color-app-red {
	color: var(--timi-color-app-red);
}

.timi-color-app-purple {
	color: var(--timi-color-app-purple);
}

.timi-bg-black {
	background-color: var(--timi-color-black);
}

.timi-bg-grey-dark {
	background-color: var(--timi-color-grey-dark);
}

.timi-bg-grey {
	background-color: var(--timi-color-grey);
}

.timi-bg-white {
	background-color: var(--timi-color-white);
}

.timi-bg-blue {
	background-color: var(--timi-color-blue);
}

.timi-bg-blue-dark {
	background-color: var(--timi-color-blue-dark);
}

.timi-bg-orange {
	background-color: var(--timi-color-orange);
}

.timi-bg-app-green {
	background-color: var(--timi-color-app-green);
}

.timi-bg-app-yellow {
	background-color: var(--timi-color-app-yellow);
}

.timi-bg-app-red {
	background-color: var(--timi-color-app-red);
}

.timi-bg-app-purple {
	background-color: var(--timi-color-app-purple);
}

/* Gradient + grain — not a flat hex in Figma. */
.timi-bg-background {
	position: relative;
	isolation: isolate;
	background-color: var(--timi-color-background-end);
	background-image: radial-gradient(
		ellipse at 92% 17%,
		var(--timi-color-background-start) 0%,
		var(--timi-color-background-mid) 50%,
		var(--timi-color-background-end) 100%
	);
	color: var(--timi-color-white);
}

.timi-bg-background::before,
.timi-bg-background-grey::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("../images/noise.png");
	background-repeat: repeat;
	background-size: 1024px 1024px;
	background-position: top left;
	opacity: 0.07;
	content: "";
	pointer-events: none;
}

.timi-bg-background-grey {
	position: relative;
	isolation: isolate;
	background-color: var(--timi-color-background-grey);
}

.timi-bg-background > *,
.timi-bg-background-grey > * {
	position: relative;
	z-index: 1;
}