/**
 * TechBBQ design tokens — synced from Figma.
 *
 * Source: Website | TechBBQ (Copy)
 * https://www.figma.com/design/5yXrB09CMVaqf3V343o3yZ/Website-%7C-TechBBQ--Copy-
 * Raw export: docs/figma-tokens.json
 *
 * Breakpoints (mobile-first): 0–767 (base), 768–1023, 1024–1440, 1440+.
 */

:root {
	/* ── Primitive colors ─────────────────────────────────────── */
	--techbbq-color-dark-1000: #0d0d0d;
	--techbbq-color-dark-950: #131313;
	--techbbq-color-dark-900: #191919;
	--techbbq-color-dark-alpha-1000-15: rgb(13 13 13 / 15%);
	--techbbq-color-dark-alpha-1000-45: rgb(13 13 13 / 45%);
	--techbbq-color-dark-alpha-900-20: rgb(25 25 25 / 20%);
	--techbbq-color-dark-alpha-900-40: rgb(25 25 25 / 40%);
	--techbbq-color-grey-600: #6e6e6e;
	--techbbq-color-grey-200: #7a7a7a;
	--techbbq-color-grey-100: #d9d9d9;
	--techbbq-color-grey-50: #f2f2f2;
	--techbbq-color-grey-alpha-600-50: rgb(110 110 110 / 50%);
	--techbbq-color-grey-alpha-100-40: rgb(217 217 217 / 40%);
	--techbbq-color-grey-alpha-50-50: rgb(242 242 242 / 50%);
	--techbbq-color-grey-alpha-50-40: rgb(242 242 242 / 40%);
	--techbbq-color-grey-alpha-50-30: rgb(242 242 242 / 30%);
	--techbbq-color-grey-alpha-50-15: rgb(242 242 242 / 15%);
	--techbbq-color-grey-alpha-50-5: rgb(242 242 242 / 5%);
	--techbbq-color-red-1000: #5e101a;
	--techbbq-color-red-600: #ce0f2e;
	--techbbq-color-orange-400: #fd9d04;
	--techbbq-color-orange-600: #fa7000;
	--techbbq-color-accent-blue: #65dcff;
	--techbbq-color-accent-green: #51ff85;
	--techbbq-color-beige-1000: #f8f7f6;

	/* ── Semantic colors (Figma: semantic collection) ───────── */
	--techbbq-content-primary: #f2f2f2;
	--techbbq-content-oncolor-primary: #0d0d0d;
	--techbbq-content-secondary: rgba(242, 242, 242, 0.5);
	--techbbq-content-tertiary: rgba(242, 242, 242, 0.4);
	--techbbq-content-inverse-constant: #f2f2f2;
	--techbbq-content-accent-1: #ce0f2e;
	--techbbq-content-accent-2: #fa7000;
	--techbbq-content-accent-3: #fd9d04;
	--techbbq-content-accent-featured: #9b6dff;
	--techbbq-color-accent-dark-blue: #0091ff;
	--techbbq-border-secondary: rgba(217, 217, 217, 0.4);
	--techbbq-border-tertiary: rgba(110, 110, 110, 0.5);
	--techbbq-tag-primary: rgba(242, 242, 242, 0.05);
	--techbbq-btn-primary-content: #0d0d0d;
	--techbbq-btn-primary-content-hover: #f2f2f2;
	--techbbq-btn-primary-fill-default: #f2f2f2;
	--techbbq-btn-primary-fill-hover: var(--techbbq-color-red-600);
	--techbbq-btn-secondary-content: #f2f2f2;
	--techbbq-btn-secondary-border-default: rgba(242, 242, 242, 0.4);
	--techbbq-btn-secondary-arrow: #0d0d0d;
	--techbbq-btn-height-medium: 36px;
	--techbbq-btn-height-large: 44px;
	--techbbq-btn-padding-x-medium: 26px;
	--techbbq-btn-padding-x-large: 30px;
	--techbbq-btn-font-size-medium: 14px;
	--techbbq-btn-font-size-large: 18px;
	--techbbq-btn-letter-spacing-medium: -0.01em;
	--techbbq-btn-letter-spacing-large: -0.01em;
	--techbbq-btn-disabled-opacity: 0.3;
	--techbbq-bg-main: #0d0d0d;
	--techbbq-bg-surface: #131313;
	--techbbq-bg-surface-alt: var(--techbbq-color-dark-900);
	--techbbq-bg-surface-glass: rgba(13, 13, 13, 0.45);
	--techbbq-bg-surface-overlay: rgba(242, 242, 242, 0.15);

	/* Figma gradient/accent-1 — ticket card hover border + glow */
	--techbbq-gradient-accent-1: linear-gradient(
		135deg,
		var(--techbbq-color-red-600) 0%,
		#d74a01 55%,
		var(--techbbq-color-orange-400) 100%
	);

	/* ── Theme aliases (Elementor Site Kit + widgets) ───────── */
	--techbbq-color-primary: var(--techbbq-btn-primary-fill-default);
	--techbbq-color-primary-dark: var(--techbbq-color-grey-200);
	--techbbq-color-secondary: var(--techbbq-bg-main);
	--techbbq-color-accent: var(--techbbq-content-accent-3);
	--techbbq-color-surface: var(--techbbq-bg-surface);
	--techbbq-color-surface-muted: var(--techbbq-color-dark-950);
	--techbbq-color-text: var(--techbbq-content-primary);
	--techbbq-color-text-muted: var(--techbbq-content-secondary);
	--techbbq-color-border: var(--techbbq-border-secondary);

	/* ── Typography families ──────────────────────────────────── */
	--techbbq-font-family-heading: "Onest", system-ui, sans-serif;
	--techbbq-font-family-body: "Inter Display", "Inter", system-ui, sans-serif;
	--techbbq-font-family-brand: "GT Walsheim Pro", var(--techbbq-font-family-heading);

	/* 1440 text styles — see typography.css for utility classes */
	--techbbq-text-h1-size: 96px;
	--techbbq-text-h1-weight: 500;
	--techbbq-text-h1-line-height: 1;
	--techbbq-text-h1-letter-spacing: -0.02em;
	--techbbq-text-h2-size: 88px;
	--techbbq-text-h2-weight: 500;
	--techbbq-text-h2-line-height: 1.2;
	--techbbq-text-h2-letter-spacing: -0.01em;
	/* Figma 360/Heading/H3 — scales up at tablet/desktop in @media below */
	--techbbq-text-h3-size: 30px;
	--techbbq-text-h3-weight: 500;
	--techbbq-text-h3-line-height: 1.2;
	--techbbq-text-h3-letter-spacing: -0.3px;

	/* Section titles — Home + standard marketing sections (alias H3 scale) */
	--techbbq-section-title-size: var(--techbbq-text-h3-size);
	--techbbq-text-h4-size: 38px;
	--techbbq-text-h4-weight: 500;
	--techbbq-text-h4-line-height: 1.2;
	--techbbq-text-h4-letter-spacing: -0.01em;
	--techbbq-text-h5-size: 32px;
	--techbbq-text-h5-weight: 500;
	--techbbq-text-h5-line-height: 1.2;
	--techbbq-text-h5-letter-spacing: -0.01em;
	--techbbq-text-h6-size: 24px;
	--techbbq-text-h6-weight: 500;
	--techbbq-text-h6-line-height: 1.32;
	--techbbq-text-h6-letter-spacing: -0.01em;
	--techbbq-text-paragraph-xl-size: 28px;
	--techbbq-text-paragraph-l-size: 22px;
	--techbbq-text-paragraph-m-size: 18px;
	--techbbq-text-paragraph-s-size: 16px;
	--techbbq-text-paragraph-xs-size: 14px;
	--techbbq-text-paragraph-xxs-size: 12px;
	--techbbq-text-paragraph-line-height: 1.4;
	--techbbq-text-paragraph-letter-spacing: 0.02em;
	--techbbq-text-caption-s-size: 12px;
	--techbbq-text-caption-s-line-height: 1.2;
	--techbbq-text-caption-s-letter-spacing: 0.12em;

	/* ── Spacing (Figma breakpoints @ 1440) ───────────────────── */
	--techbbq-space-1: 8px;
	--techbbq-space-2: 16px;
	--techbbq-space-3: 24px;
	--techbbq-space-4: 32px;
	--techbbq-space-5: 40px;
	--techbbq-space-7: 56px;
	--techbbq-space-10: 80px;
	--techbbq-section-space-small: 24px;
	--techbbq-section-space-medium: 64px;
	--techbbq-section-space-large: 140px;

	/* Eyebrow → section title (Figma titleContainer / space-2) */
	--techbbq-section-eyebrow-title-gap: var(--techbbq-space-2);
	/* Section title → supporting text (Figma textContainer / 12px) */
	--techbbq-section-title-text-gap: var(--techbbq-space-sm);

	/* Legacy spacing aliases */
	--techbbq-space-xs: var(--techbbq-space-1);
	--techbbq-space-sm: 12px;
	--techbbq-space-md: var(--techbbq-space-2);
	--techbbq-space-lg: var(--techbbq-space-3);
	--techbbq-space-xl: var(--techbbq-space-4);
	--techbbq-space-2xl: var(--techbbq-space-5);
	--techbbq-space-3xl: var(--techbbq-space-7);
	--techbbq-space-4xl: var(--techbbq-space-10);

	/* ── Layout ───────────────────────────────────────────────── */
	/* Announcement strip above the floating header (Figma banner 4205:9926). */
	--techbbq-banner-height: 32px;
	/* Floating glass header bar height used for hero top clearance (Figma header 72px). */
	--techbbq-hero-header-bar: 72px;
	/* Max layout width: Figma frame width (1440 at desktop). Side padding is separate
	 * (--techbbq-container-padding) and applied inside via border-box on .section-inner. */
	--techbbq-content-max: 1440px;
	/* Relocated from @media (max-width: 767px) — Figma 360 frame: 16px side padding on mobile. */
	--techbbq-container-padding: var(--techbbq-space-2);
	/* Floating header bar inset from viewport edges (Figma 360: 8px). */
	--techbbq-header-inset: var(--techbbq-space-1);
	--techbbq-radius-sm: 4px;
	--techbbq-radius-md: 8px;
	--techbbq-radius-lg: 16px;
	--techbbq-radius-pill: 999px;
}

/* ── Tablet (768–1023) ──────────────────────────────────────── */
@media (min-width: 768px) {
	:root {
		/* Restored from original :root base */
		--techbbq-container-padding: var(--techbbq-space-3);
		--techbbq-header-inset: var(--techbbq-container-padding);
		--techbbq-text-h3-size: 42px;
		--techbbq-text-h3-letter-spacing: -0.01em;
	}
}

/* ── Desktop (1024–1440) ──────────────────────────────────────── */
@media (min-width: 1024px) {
	:root {
		--techbbq-text-h3-size: 48px;
	}
}