/**
 * TSF design tokens.
 *
 * Ported 1:1 from the Lovable source's styles.css :root block. Custom properties
 * only -- this file paints nothing, so it is safe to load anywhere including the
 * Elementor editor chrome.
 *
 * Naming note: the source calls the brand colour --lime and it is red (#E31E24),
 * a leftover from an earlier palette. We use --tsf-brand and keep --lime aliased
 * so ported markup and any copied snippet still resolves.
 */

:root {
	/* ---- brand ---- */
	--tsf-brand: #E31E24;
	--tsf-brand-bright: #FF3F45;
	--tsf-brand-deep: #A81318;
	--tsf-on-brand: #FFFFFF;

	/* ---- ground + surfaces ---- */
	--tsf-bg: #0A0A0A;
	--tsf-fg: #FFFFFF;
	--tsf-surface-1: #141414;
	--tsf-surface-2: #1A1A1A;
	--tsf-muted-fg: #B5B5B5;

	/* ---- lines ---- */
	--tsf-border: rgba(255, 255, 255, 0.08);
	--tsf-border-strong: rgba(255, 255, 255, 0.15);
	--tsf-input-border: rgba(255, 255, 255, 0.10);

	/* ---- type ---- */
	--tsf-font-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
	--tsf-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--tsf-display-tracking: -0.02em;
	--tsf-display-leading: 0.95;

	/* ---- shape ---- */
	--tsf-radius: 0.5rem;
	--tsf-radius-lg: 0.75rem;
	--tsf-radius-xl: 1rem;
	--tsf-radius-2xl: 1.5rem;
	--tsf-radius-pill: 9999px;

	/* ---- layout ----
	   max-w-7xl (1280px) with px-5 / lg:px-10 gutters in the source. */
	--tsf-container: 1280px;
	--tsf-gutter: 1.25rem;
	--tsf-gutter-lg: 2.5rem;
	--tsf-band-y: 6rem; /* py-24 */

	/* ---- motion ---- */
	--tsf-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--tsf-marquee-duration: 40s;

	/* ---- texture ----
	   feTurbulence tile, identical to the source. Rasterising this to a WebP is a
	   Phase 4 performance item; it currently renders an SVG filter per section. */
	--tsf-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	--tsf-grain-opacity: 0.035;

	/* ---- hero glow ---- */
	--tsf-hero-glow: radial-gradient(60% 55% at 20% 45%, rgba(227, 30, 36, 0.40) 0%, rgba(168, 19, 24, 0.14) 45%, transparent 75%);

	/* ---- back-compat aliases for ported markup ---- */
	--lime: var(--tsf-brand);
	--lime-bright: var(--tsf-brand-bright);
	--brand-deep: var(--tsf-brand-deep);
}

@media (min-width: 1024px) {
	:root {
		--tsf-gutter: var(--tsf-gutter-lg);
	}
}