/**
 * ==============================================================================
 * Trang Trí 4 Mùa (trangtri4mua.com) — Foundational Design Tokens & Base Utilities
 * Style System: Blocksy Child Festive Commerce Edition
 * Version: 2.1.0 — Refined Human-Crafted Brand Edition
 * Benchmark: Balsam Hill, Zara Home, Pottery Barn, Nhà Xinh, Peony Home
 * Language Support: Vietnamese (Tiếng Việt) typography optimized
 * ==============================================================================
 */

:root {
	/* --------------------------------------------------------------------------
	 * 1. Brand Palette & Color Tokens (Human-Crafted Festive Palette)
	 * -------------------------------------------------------------------------- */

	/* Primary: Deep Forest Pine & Dark Moss */
	--tt4m-primary: #14532D;            /* Deep Forest Pine */
	--tt4m-primary-dark: #0F3F22;       /* Dark Moss */
	--tt4m-primary-light: #1E6B3C;      /* Muted Pine */
	--tt4m-primary-tint: #F0FDF4;       /* Soft Sage Tint */
	--tt4m-primary-rgb: 20, 83, 45;

	/* Primary Named Tokens */
	--tt4m-forest-pine: #14532D;
	--tt4m-dark-moss: #0F3F22;
	--tt4m-soft-sage: #F0FDF4;

	/* Accent & High-Conversion CTA: Festive Berry Crimson */
	--tt4m-cta: #C41E2F;                 /* Festive Berry Crimson */
	--tt4m-cta-hover: #991B1B;           /* Rich Wine Hover */
	--tt4m-cta-soft: #FEE2E2;            /* Soft Blush */
	--tt4m-cta-active: #7F1D1D;          /* Deep Wine Active */
	--tt4m-cta-rgb: 196, 30, 47;

	/* Accent Named Tokens */
	--tt4m-berry-crimson: #C41E2F;
	--tt4m-rich-wine: #991B1B;
	--tt4m-soft-blush: #FEE2E2;

	/* Metal Accent: Warm Antique Gold & Champagne */
	--tt4m-gold: #D97706;                /* Warm Antique Gold */
	--tt4m-gold-hover: #B45309;          /* Champagne Ochre */
	--tt4m-gold-light: #FEF3C7;          /* Soft Cream */
	--tt4m-gold-border: #FDE68A;         /* Pale Ochre Border */
	--tt4m-gold-tint: #FFFBEB;           /* Ultra-soft Champagne Ivory */
	--tt4m-gold-rgb: 217, 119, 6;

	/* Metal Accent Named Tokens */
	--tt4m-antique-gold: #D97706;
	--tt4m-champagne-ochre: #B45309;
	--tt4m-soft-cream: #FEF3C7;

	/* Neutrals & Surfaces (Realistic Natural Balance) */
	--tt4m-heading: #1F2937;             /* Slate Charcoal (Softened from harsh black) */
	--tt4m-text: #1F2937;                /* Slate Charcoal */
	--tt4m-text-muted: #4B5563;          /* Muted Lead */
	--tt4m-text-light: #9CA3AF;          /* Subtle Slate */
	--tt4m-secondary: #4B5563;           /* Blocksy & WooCommerce secondary text fallback */

	/* Neutral Named Tokens */
	--tt4m-slate-charcoal: #1F2937;
	--tt4m-muted-lead: #4B5563;
	--tt4m-warm-ivory: #FDFBF7;
	--tt4m-card-white: #FFFFFF;
	--tt4m-hairline-border: #E5E7EB;

	/* Canvas & Structural Dividers */
	--tt4m-bg: #FFFFFF;                  /* Card White */
	--tt4m-bg-alt: #F9FAFB;              /* Clean Crisp Alabaster */
	--tt4m-bg-warm: #FDFBF7;             /* Warm Ivory Pearl */
	--tt4m-border: #E5E7EB;              /* Hairline Border */
	--tt4m-border-strong: #D1D5DB;       /* Structural Divider */
	--tt4m-alt-bg: #F9FAFB;              /* Legacy Blocksy fallback */

	/* Feedback, Status & Vietnamese Communication Channels */
	--tt4m-success: #15803D;
	--tt4m-success-light: #F0FDF4;
	--tt4m-warning: #D97706;
	--tt4m-warning-light: #FEF3C7;
	--tt4m-danger: #C41E2F;
	--tt4m-danger-light: #FEE2E2;
	--tt4m-info: #0284C7;
	--tt4m-info-light: #E0F2FE;

	/* Official Zalo Brand Blue */
	--tt4m-zalo: #0068FF;
	--tt4m-zalo-hover: #0056D6;
	--tt4m-zalo-soft: #EBF3FF;
	--tt4m-zalo-rgb: 0, 104, 255;


	/* --------------------------------------------------------------------------
	 * 2. Spacing Scale
	 * -------------------------------------------------------------------------- */
	--tt4m-space-3xs: 2px;
	--tt4m-space-2xs: 4px;
	--tt4m-space-xs: 6px;
	--tt4m-space-sm: 8px;
	--tt4m-space-md: 12px;
	--tt4m-space-lg: 16px;
	--tt4m-space-xl: 20px;
	--tt4m-space-2xl: 24px;
	--tt4m-space-3xl: 32px;
	--tt4m-space-4xl: 40px;
	--tt4m-space-5xl: 48px;
	--tt4m-space-6xl: 64px;


	/* --------------------------------------------------------------------------
	 * 3. Corner Radii (Clean Architectural Geometry)
	 * -------------------------------------------------------------------------- */
	--tt4m-radius-xs: 2px;
	--tt4m-radius-sm: 4px;
	--tt4m-radius-md: 8px;
	--tt4m-radius-lg: 12px;
	--tt4m-radius-xl: 16px;
	--tt4m-radius-2xl: 20px;
	--tt4m-radius-full: 9999px;


	/* --------------------------------------------------------------------------
	 * 4. Natural Elevation & Realistic Lighting Shadows
	 * (Soft ambient occlusion + directional key light, zero synthetic neon glow)
	 * -------------------------------------------------------------------------- */
	--tt4m-shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
	--tt4m-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.05), 0 1px 2px rgba(17, 24, 39, 0.03);
	--tt4m-shadow-md: 0 4px 6px -1px rgba(17, 24, 39, 0.06), 0 2px 4px -2px rgba(17, 24, 39, 0.03);
	--tt4m-shadow-lg: 0 10px 15px -3px rgba(17, 24, 39, 0.07), 0 4px 6px -4px rgba(17, 24, 39, 0.03);
	--tt4m-shadow-xl: 0 20px 25px -5px rgba(17, 24, 39, 0.08), 0 8px 10px -6px rgba(17, 24, 39, 0.03);
	--tt4m-shadow-card: 0 1px 3px rgba(17, 24, 39, 0.04), 0 4px 12px -2px rgba(17, 24, 39, 0.03);
	--tt4m-shadow-hover: 0 8px 20px -4px rgba(17, 24, 39, 0.09), 0 3px 6px -2px rgba(17, 24, 39, 0.03);


	/* --------------------------------------------------------------------------
	 * 5. Motion & Micro-interaction Transitions
	 * -------------------------------------------------------------------------- */
	--tt4m-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--tt4m-transition-base: 220ms cubic-bezier(0.16, 1, 0.3, 1);
	--tt4m-transition-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);
	--tt4m-transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);


	/* --------------------------------------------------------------------------
	 * 6. Typography Stack & Font Sizes
	 * Full Vietnamese Diacritics Support: Playfair Display + Be Vietnam Pro
	 * -------------------------------------------------------------------------- */
	--tt4m-font-serif: 'Playfair Display', Georgia, serif;
	--tt4m-font-sans: 'Be Vietnam Pro', -apple-system, sans-serif;
	--tt4m-font-family: var(--tt4m-font-sans);
	--tt4m-font-heading: var(--tt4m-font-serif);

	--tt4m-font-size-xs: 0.75rem;    /* 12px */
	--tt4m-font-size-sm: 0.8125rem;  /* 13px */
	--tt4m-font-size-base: 0.875rem; /* 14px */
	--tt4m-font-size-md: 0.9375rem;  /* 15px */
	--tt4m-font-size-lg: 1rem;       /* 16px */
	--tt4m-font-size-xl: 1.125rem;   /* 18px */
	--tt4m-font-size-2xl: 1.25rem;   /* 20px */
	--tt4m-font-size-3xl: 1.5rem;    /* 24px */
	--tt4m-font-size-4xl: 1.875rem;  /* 30px */

	--tt4m-line-height-tight: 1.25;
	--tt4m-line-height-snug: 1.375;
	--tt4m-line-height-normal: 1.5;
	--tt4m-line-height-relaxed: 1.625;


	/* --------------------------------------------------------------------------
	 * 7. Z-Index Layers
	 * -------------------------------------------------------------------------- */
	--tt4m-z-dropdown: 1000;
	--tt4m-z-sticky: 1020;
	--tt4m-z-fixed: 1030;
	--tt4m-z-modal-backdrop: 1040;
	--tt4m-z-modal: 1050;
	--tt4m-z-floating-action: 1060;
	--tt4m-z-toast: 1070;
}


/* ==============================================================================
 * Global Accessibility, Focus Resets & Tactile Micro-Interactions
 * ============================================================================== */

/* High-visibility accessible focus ring for keyboard & screen reader navigation */
:focus-visible {
	outline: 2px solid var(--tt4m-primary) !important;
	outline-offset: 2px !important;
}

/* Subtle mobile tap feedback */
a,
button,
input,
select,
textarea,
[role="button"] {
	-webkit-tap-highlight-color: rgba(20, 83, 45, 0.08);
}

/* Prevent layout shift during smooth transitions */
a,
button {
	transition-property: color, background-color, border-color, box-shadow, transform, opacity;
	transition-duration: 200ms;
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Touch targets >= 44px on mobile devices for VN eCommerce usability */
@media (max-width: 768px) {
	.tt4m-touch-target,
	.tt4m-btn,
	.tt4m-sticky-inner button,
	.tt4m-sticky-inner a,
	.tt4m-chip,
	.tt4m-pdp-buy-now,
	.single_add_to_cart_button {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}


/* ==============================================================================
 * Badge & Trust Utilities (Refined Editorial Tags)
 * ============================================================================== */

/* Base badge: subtle architectural tag rather than bubbly neon pill */
.tt4m-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: var(--tt4m-radius-sm);
	font-size: var(--tt4m-font-size-xs);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
}

/* Festive Gold Badge */
.tt4m-badge-gold {
	background-color: var(--tt4m-gold-light);
	color: #92400E;
	border: 1px solid var(--tt4m-gold-border);
}

/* Festive Red / CTA Badge */
.tt4m-badge-red {
	background-color: var(--tt4m-cta-soft);
	color: var(--tt4m-cta);
	border: 1px solid rgba(196, 30, 47, 0.2);
}

/* Evergreen Primary Badge */
.tt4m-badge-green {
	background-color: var(--tt4m-primary-tint);
	color: var(--tt4m-primary);
	border: 1px solid rgba(20, 83, 45, 0.16);
}

/* Zalo / Communication Badge */
.tt4m-badge-blue,
.tt4m-badge-zalo {
	background-color: var(--tt4m-zalo-soft);
	color: var(--tt4m-zalo);
	border: 1px solid rgba(0, 104, 255, 0.18);
}

/* Neutral Gray Badge */
.tt4m-badge-gray {
	background-color: var(--tt4m-bg-alt);
	color: var(--tt4m-text-muted);
	border: 1px solid var(--tt4m-border);
}

/* Discount Badge / Promo Indicator */
.tt4m-badge-discount {
	background: var(--tt4m-cta);
	color: #FFFFFF;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: var(--tt4m-radius-sm);
	font-size: 11.5px;
	letter-spacing: 0.2px;
	box-shadow: 0 1px 3px rgba(196, 30, 47, 0.25);
}


/* ==============================================================================
 * Surface, Canvas & Container Utilities
 * ============================================================================== */

/* Standard Elevated Card Surface */
.tt4m-surface-card {
	background-color: var(--tt4m-bg);
	border: 1px solid var(--tt4m-border);
	border-radius: var(--tt4m-radius-lg);
	box-shadow: var(--tt4m-shadow-xs);
	transition: box-shadow var(--tt4m-transition-base), border-color var(--tt4m-transition-base);
}

.tt4m-surface-card:hover {
	border-color: var(--tt4m-border-strong);
	box-shadow: var(--tt4m-shadow-md);
}

/* Festive Warm Pearl Canvas */
.tt4m-surface-warm {
	background-color: var(--tt4m-bg-warm);
	border: 1px solid rgba(217, 119, 6, 0.12);
	border-radius: var(--tt4m-radius-lg);
}

/* Clean Neutral Alternative Surface */
.tt4m-surface-alt {
	background-color: var(--tt4m-bg-alt);
	border: 1px solid var(--tt4m-border);
	border-radius: var(--tt4m-radius-md);
}


/* ==============================================================================
 * Refined Elevation & Natural Lighting Utilities
 * (Replaces artificial synthetic neon glows with realistic depth)
 * ============================================================================== */
.tt4m-elevation-subtle {
	box-shadow: var(--tt4m-shadow-xs) !important;
}

.tt4m-elevation-card {
	box-shadow: var(--tt4m-shadow-card) !important;
}

.tt4m-elevation-hover {
	box-shadow: var(--tt4m-shadow-hover) !important;
}


/* ==============================================================================
 * Typography Rhythm & Vietnamese Text Helpers
 * ============================================================================== */
.tt4m-heading-1 {
	font-family: var(--tt4m-font-heading);
	font-size: var(--tt4m-font-size-3xl);
	font-weight: 700;
	color: var(--tt4m-heading);
	line-height: var(--tt4m-line-height-tight);
	margin-bottom: var(--tt4m-space-md);
}

.tt4m-heading-2 {
	font-family: var(--tt4m-font-heading);
	font-size: var(--tt4m-font-size-2xl);
	font-weight: 700;
	color: var(--tt4m-heading);
	line-height: var(--tt4m-line-height-snug);
	margin-bottom: var(--tt4m-space-sm);
}

.tt4m-heading-3 {
	font-family: var(--tt4m-font-heading);
	font-size: var(--tt4m-font-size-xl);
	font-weight: 600;
	color: var(--tt4m-heading);
	line-height: var(--tt4m-line-height-snug);
	margin-bottom: var(--tt4m-space-xs);
}

.tt4m-text-lead {
	font-size: var(--tt4m-font-size-lg);
	line-height: var(--tt4m-line-height-relaxed);
	color: var(--tt4m-text-muted);
}

.tt4m-text-caption {
	font-size: var(--tt4m-font-size-xs);
	color: var(--tt4m-text-muted);
	line-height: var(--tt4m-line-height-normal);
}

.tt4m-truncate-1 {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tt4m-truncate-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


/* ==============================================================================
 * Conversion & CTA Button Foundations
 * ============================================================================== */
.tt4m-btn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: var(--tt4m-cta);
	color: #FFFFFF !important;
	font-weight: 600;
	font-size: var(--tt4m-font-size-base);
	padding: 10px 20px;
	border-radius: var(--tt4m-radius-md);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(196, 30, 47, 0.2);
	transition: background-color var(--tt4m-transition-fast), transform var(--tt4m-transition-fast), box-shadow var(--tt4m-transition-fast);
}

.tt4m-btn-cta:hover {
	background-color: var(--tt4m-cta-hover);
	color: #FFFFFF !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(153, 27, 27, 0.25);
}

.tt4m-btn-cta:active {
	transform: translateY(0);
	background-color: var(--tt4m-cta-active);
}

.tt4m-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: var(--tt4m-primary);
	color: #FFFFFF !important;
	font-weight: 600;
	font-size: var(--tt4m-font-size-base);
	padding: 10px 20px;
	border-radius: var(--tt4m-radius-md);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(20, 83, 45, 0.18);
	transition: background-color var(--tt4m-transition-fast), transform var(--tt4m-transition-fast), box-shadow var(--tt4m-transition-fast);
}

.tt4m-btn-primary:hover {
	background-color: var(--tt4m-primary-dark);
	color: #FFFFFF !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(15, 63, 34, 0.24);
}

.tt4m-btn-zalo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: var(--tt4m-zalo);
	color: #FFFFFF !important;
	font-weight: 600;
	font-size: var(--tt4m-font-size-base);
	padding: 10px 20px;
	border-radius: var(--tt4m-radius-md);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 104, 255, 0.18);
	transition: background-color var(--tt4m-transition-fast), transform var(--tt4m-transition-fast), box-shadow var(--tt4m-transition-fast);
}

.tt4m-btn-zalo:hover {
	background-color: var(--tt4m-zalo-hover);
	color: #FFFFFF !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 86, 214, 0.25);
}