ECSESS/src/app.css

@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');
@import 'tailwindcss';
/* @import '@skeletonlabs/skeleton-svelte';  */

@theme {
	/* Light shades - for backgrounds and cards */
	--color-ecsess-50: #e8ffd9;
	--color-ecsess-100: #cce7ba;
	--color-ecsess-150: #bae9a5;
	--color-ecsess-200: #a9d0a0;

	/* Mid-light shades - for borders and hover states */
	--color-ecsess-250: #9cc295;
	--color-ecsess-300: #8fb98a;
	--color-ecsess-350: #7daa7a;
	--color-ecsess-400: #6a9a6a;

	/* Mid shades - for accents and interactive elements */
	--color-ecsess-450: #62925a;
	--color-ecsess-500: #5a8b5a;
	--color-ecsess-550: #4c7a4f;
	--color-ecsess-600: #3f6a3f;
	--color-ecsess-650: #306032;

	/* Mid-dark shades - for text on light backgrounds */
	--color-ecsess-700: #2f4d29;
	--color-ecsess-750: #1c4a1e;
	--color-ecsess-800: #0a3d2a;

	/* Dark shades - for text and backgrounds */
	--color-ecsess-850: #083525;
	--color-ecsess-900: #062c20;
	--color-ecsess-950: #031c15;

	/* Black variants for UI elements */
	--color-ecsess-black: #1f1f1f;
	--color-ecsess-black-hover: #161917;

	--animate-wiggle: wiggle 0.5s ease-in-out 1;
	@keyframes wiggle {
		0%,
		100% {
			transform: rotateY(-2.4deg);
		}
		50% {
			transform: rotateY(2.4deg);
		}
	}
}

* {
	font-family: 'Saira', sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	scroll-behavior: smooth;
}

h1 {
	@apply py-4 text-2xl font-bold md:text-3xl;
}

h2 {
	@apply py-3 text-xl font-bold md:text-2xl;
}

.page-title {
	@apply my-6 text-3xl font-bold md:text-4xl lg:text-6xl;
}

.typography {
	@apply text-sm md:text-base lg:text-lg;

	p {
		@apply my-2 leading-relaxed;
	}

	strong,
	b {
		@apply font-bold;
	}

	i {
		@apply italic;
	}

	blockquote {
		@apply bg-ecsess-100 text-ecsess-700 border-l-ecsess-600 my-4 rounded-md border-l-4 py-[0.01rem] ps-4 italic;
	}

	h1 {
		@apply my-4 text-4xl leading-10 font-extrabold;
	}

	h2 {
		@apply mt-4 mb-3 text-2xl leading-8 font-black;
	}

	h3 {
		@apply mt-4 mb-1 text-xl leading-relaxed font-bold;
	}

	h4 {
		@apply mt-6 mb-2 leading-6;
	}

	img,
	picture,
	video {
		@apply my-8;
	}

	picture > img {
		@apply mt-0 mb-0;
	}

	code,
	kbd {
		@apply rounded-md font-mono text-sm;
	}

	h2 code {
		@apply text-[1.3125rem]; /* 21px */
	}

	h3 code {
		@apply text-[1.125rem]; /* 18px */
	}

	pre {
		@apply my-3 rounded-md px-4 pt-3 pb-3 font-mono text-sm leading-6;
	}

	ol,
	ul {
		@apply my-2 list-outside list-disc ps-6.5;
	}

	li {
		@apply my-1 leading-relaxed;
	}

	ol > li,
	ul > li {
		@apply ps-1;
	}

	> ul > li p {
		@apply my-2 leading-relaxed;
	}

	ul ul,
	ul ol,
	ol ul,
	ol ol {
		@apply my-1;
	}

	dl {
		@apply my-5;
	}

	dt {
		@apply mt-5;
	}

	dd {
		@apply mt-2 ps-6.5;
	}

	hr {
		@apply my-12;
	}

	hr + *,
	h2 + *,
	h3 + *,
	h4 + * {
		@apply mt-0;
	}

	table {
		@apply w-full;
	}

	thead {
		@apply border-ecsess-500 border-b-2;
	}

	thead th {
		@apply text-ecsess-500 p-2 text-left text-base font-bold;
	}

	tbody td,
	tfoot td {
		@apply p-2.5;
	}

	td > a {
		@apply underline transition-colors;
	}

	tbody tr:nth-child(odd) {
		@apply bg-ecsess-200/24;
	}

	td + td {
		@apply border-l;
	}

	tfoot {
		@apply border-t;
	}

	figure {
		@apply my-8;
	}

	figure > * {
		@apply my-0;
	}

	figcaption {
		@apply mt-3 text-sm leading-5;
	}
}

/* Scrollbar Styles */
*::-webkit-scrollbar {
	@apply h-1 w-1;
}

*::-webkit-scrollbar-track {
	@apply bg-ecsess-700 rounded;
}

*::-webkit-scrollbar-track:hover {
	@apply bg-ecsess-900;
}

*::-webkit-scrollbar-track:active {
	@apply bg-ecsess-900;
}

*::-webkit-scrollbar-thumb {
	@apply bg-ecsess-100 rounded-md;
}

*::-webkit-scrollbar-thumb:hover {
	@apply bg-ecsess-300;
}

*::-webkit-scrollbar-thumb:active {
	@apply bg-ecsess-300;
}