/**
 * Artie 5ive Merch - Design Tokens
 * System: Nocturnal Brutalism (Milano Drill & Raw Underground Streetwear)
 * Generated via Google Stitch Engine
 */

:root {
	/* Canvas & Background Surfaces */
	--tb-bg: #07090E;
	--tb-bg-elevated: #0F141F;
	--tb-bg-card: #0F141F;
	--tb-bg-card-hover: #141B2A;
	--tb-bg-overlay: rgba(7, 9, 14, 0.95);
	--tb-bg-darker: #040508;

	/* Structural Borders (Razor-Sharp Brutalist lines) */
	--tb-border: #1E2738;
	--tb-border-light: #2A364D;
	--tb-border-focus: #E11D48;
	--tb-border-hover: #E11D48;

	/* High-Voltage Accent / Primary Conversion CTA */
	--tb-primary: #E11D48;
	--tb-primary-hover: #F8FAFC;
	--tb-primary-text: #FFFFFF;
	--tb-primary-glow: rgba(225, 29, 72, 0.35);

	/* Secondary / Dark Inversion Action */
	--tb-secondary: #0F141F;
	--tb-secondary-border: #1E2738;
	--tb-secondary-hover: #141B2A;

	/* High-Contrast Typography */
	--tb-text: #F8FAFC;
	--tb-text-muted: #8E9BAE;
	--tb-text-dim: #5A6679;
	--tb-text-inverse: #07090E;

	/* Functional Status Tokens */
	--tb-status-new: #E11D48;
	--tb-status-bestseller: #E11D48;
	--tb-status-limited: #F59E0B;
	--tb-status-success: #10B981;

	/* Typography Families */
	--tb-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--tb-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--tb-font-mono: 'Space Mono', monospace;

	/* Corner Radii - Sharp Underground Brutalism */
	--tb-radius-sm: 0px;
	--tb-radius-md: 0px;
	--tb-radius-lg: 0px;
	--tb-radius-pill: 0px;

	/* Layout Containers & Spacing */
	--tb-container-width: 1280px;
	--tb-container-narrow: 1080px;
	--tb-space-xs: 0.25rem;
	--tb-space-sm: 0.5rem;
	--tb-space-md: 1rem;
	--tb-space-lg: 1.5rem;
	--tb-space-xl: 2.5rem;
	--tb-space-2xl: 4rem;

	/* Transitions */
	--tb-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--tb-transition-smooth: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Clean Light Mode (Dành cho YouTuber, Pop, Indie & Streamer)
   Kích hoạt bằng cách thêm data-theme="light" trên thẻ <html>
   ========================================================================== */
[data-theme="light"] {
	/* Canvas & Background Surfaces */
	--tb-bg: #F8FAFC;
	--tb-bg-elevated: #FFFFFF;
	--tb-bg-card: #FFFFFF;
	--tb-bg-card-hover: #F1F5F9;
	--tb-bg-overlay: rgba(248, 250, 252, 0.95);
	--tb-bg-darker: #EDF2F7;

	/* Structural Borders */
	--tb-border: #E2E8F0;
	--tb-border-light: #CBD5E1;

	/* High-Contrast Typography */
	--tb-text: #0F172A;
	--tb-text-muted: #475569;
	--tb-text-dim: #94A3B8;
	--tb-text-inverse: #FFFFFF;

	/* Secondary Inversion */
	--tb-secondary: #F1F5F9;
	--tb-secondary-border: #E2E8F0;
	--tb-secondary-hover: #E2E8F0;
}