/*
 * FX Insights list template styles.
 * This file intentionally keeps only the utility classes used by archive-fx-insights.php.
 */

:root {
	--background: #fbfbfc;
	--foreground: #202329;
	--muted-foreground: #747985;
	--border: rgba(32, 35, 41, 0.11);
	--accent: #3f63d8;
	--primary: #202329;
	--primary-foreground: #ffffff;
	--font-sans: "Inter", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
	line-height: 1.5;
}

a {
	color: inherit;
	text-decoration: none;
}

svg {
	display: block;
}

::selection {
	background: var(--primary);
	color: var(--primary-foreground);
}

.min-h-screen { min-height: 100vh; }
.bg-background { background: var(--background); }
.bg-background\/80 { background: rgba(251, 251, 252, 0.8); }
.bg-accent { background: var(--accent); }
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-muted-foreground\/40 { color: rgba(116, 121, 133, 0.4); }
.text-accent { color: var(--accent); }
.border-border { border-color: var(--border); }

.sticky { position: sticky; }
.top-0 { top: 0; }
.z-50 { z-index: 50; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-12 { margin-top: 3rem; }
.mt-20 { margin-top: 5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-16 { margin-bottom: 4rem; }

.block { display: block; }
.flex { display: flex; }
.hidden { display: none; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.shrink-0 { flex-shrink: 0; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }

.h-8 { height: 2rem; }
.h-16 { height: 4rem; }
.w-1 { width: 0.25rem; }
.w-24 { width: 6rem; }
.size-4 { width: 1rem; height: 1rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }

.border-b { border-bottom: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-y {
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pb-4 { padding-bottom: 1rem; }

.text-center { text-align: center; }
.text-\[10px\] { font-size: 10px; line-height: 1.4; }
.text-xs { font-size: 0.75rem; line-height: 1.35; }
.text-sm { font-size: 0.875rem; line-height: 1.5; }
.text-lg { font-size: 1.125rem; line-height: 1.55; }
.text-xl { font-size: 1.25rem; line-height: 1.4; }
.text-2xl { font-size: 1.5rem; line-height: 1.35; }
.text-5xl { font-size: 3rem; line-height: 1; }

.font-light { font-weight: 300; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.leading-\[1\.05\] { line-height: 1.05; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.underline { text-decoration-line: underline; }
.underline-offset-4 { text-underline-offset: 4px; }

.pointer-events-none { pointer-events: none; }
.backdrop-blur-md { backdrop-filter: blur(12px); }
.transition-colors { transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease; }
.transition-transform { transition: transform 150ms ease; }
.hover\:text-accent:hover,
.group:hover .group-hover\:text-accent { color: var(--accent); }
.hover\:text-foreground:hover { color: var(--foreground); }
.group:hover .group-hover\:-translate-x-1 { transform: translateX(-0.25rem); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }

.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

@keyframes fx-list-entry {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-entry {
	animation: fx-list-entry 0.8s cubic-bezier(0.19, 1, 0.22, 1) both;
}

@media (min-width: 48rem) {
	.md\:flex { display: flex; }
	.md\:flex-row { flex-direction: row; }
	.md\:items-baseline { align-items: baseline; }
	.md\:gap-10 { gap: 2.5rem; }
	.md\:text-xl { font-size: 1.25rem; line-height: 1.4; }
	.md\:text-7xl { font-size: 4.5rem; line-height: 1; }
}

@media (max-width: 36rem) {
	.px-6 { padding-left: 1.25rem; padding-right: 1.25rem; }
	.py-16 { padding-top: 3rem; padding-bottom: 3rem; }
	.text-5xl { font-size: 2.6rem; }
	.text-2xl { font-size: 1.35rem; }
}