/* ==========================================================================
   Maxxefy Social — Design Tokens & Global Styles
   ========================================================================== */

:root {
	/* Brand Colors */
	--maxxefy-primary:       #E91E8C;
	--maxxefy-primary-dark:  #C2176E;
	--maxxefy-primary-light: #F06BB0;
	--maxxefy-secondary:     #6A0DAD;
	--maxxefy-accent:        #00C6FF;
	--maxxefy-dark:          #0D0D1A;
	--maxxefy-dark-surface:  #14142B;
	--maxxefy-card-bg:       #1C1C3A;
	--maxxefy-border:        rgba(255, 255, 255, 0.08);

	/* Neutral */
	--maxxefy-white:         #FFFFFF;
	--maxxefy-gray-100:      #F5F5F5;
	--maxxefy-gray-200:      #EEEEEE;
	--maxxefy-gray-300:      #E0E0E0;
	--maxxefy-gray-400:      #9E9E9E;
	--maxxefy-gray-500:      #757575;
	--maxxefy-gray-600:      #616161;
	--maxxefy-gray-700:      #424242;
	--maxxefy-gray-800:      #212121;

	/* Status Colors */
	--maxxefy-success:       #4CAF50;
	--maxxefy-warning:       #FF9800;
	--maxxefy-error:         #F44336;
	--maxxefy-info:          #2196F3;

	/* Typography */
	--maxxefy-font-heading:  'Inter', 'Segoe UI', sans-serif;
	--maxxefy-font-body:     'Inter', system-ui, sans-serif;
	--maxxefy-font-mono:     'Fira Code', 'Consolas', monospace;

	/* Font Sizes */
	--maxxefy-text-xs:       0.75rem;
	--maxxefy-text-sm:       0.875rem;
	--maxxefy-text-base:     1rem;
	--maxxefy-text-lg:       1.125rem;
	--maxxefy-text-xl:       1.25rem;
	--maxxefy-text-2xl:      1.5rem;
	--maxxefy-text-3xl:      1.875rem;
	--maxxefy-text-4xl:      2.25rem;
	--maxxefy-text-5xl:      3rem;
	--maxxefy-text-6xl:      3.75rem;

	/* Spacing */
	--maxxefy-section-gap:   6rem;
	--maxxefy-card-gap:      1.5rem;
	--maxxefy-card-radius:   1rem;
	--maxxefy-radius-sm:     0.375rem;
	--maxxefy-radius-md:     0.5rem;
	--maxxefy-radius-lg:     0.75rem;
	--maxxefy-radius-xl:     1rem;
	--maxxefy-radius-2xl:    1.5rem;
	--maxxefy-radius-full:   9999px;

	/* Shadows */
	--maxxefy-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.05);
	--maxxefy-shadow-md:     0 4px 6px rgba(0, 0, 0, 0.1);
	--maxxefy-shadow-lg:     0 10px 25px rgba(0, 0, 0, 0.15);
	--maxxefy-shadow-card:   0 4px 24px rgba(0, 0, 0, 0.25);
	--maxxefy-shadow-glow:   0 0 40px rgba(233, 30, 140, 0.3);

	/* Transitions */
	--maxxefy-transition-fast:   150ms ease;
	--maxxefy-transition-base:   250ms ease;
	--maxxefy-transition-slow:   400ms ease;

	/* Layout */
	--maxxefy-container-max:     1200px;
	--maxxefy-container-wide:    1400px;
}

/* ==========================================================================
   Global Resets & Base Styles
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--maxxefy-font-body);
	color: var(--maxxefy-gray-800);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--maxxefy-font-heading);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 0.5em;
}

h1 { font-size: var(--maxxefy-text-5xl); }
h2 { font-size: var(--maxxefy-text-4xl); }
h3 { font-size: var(--maxxefy-text-3xl); }
h4 { font-size: var(--maxxefy-text-2xl); }
h5 { font-size: var(--maxxefy-text-xl); }
h6 { font-size: var(--maxxefy-text-lg); }

a {
	color: var(--maxxefy-primary);
	text-decoration: none;
	transition: color var(--maxxefy-transition-fast);
}

a:hover {
	color: var(--maxxefy-primary-dark);
}

img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.maxxefy-container {
	max-width: var(--maxxefy-container-max);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.maxxefy-container-wide {
	max-width: var(--maxxefy-container-wide);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.maxxefy-section {
	padding: var(--maxxefy-section-gap) 0;
}

.maxxefy-section--dark {
	background-color: var(--maxxefy-dark);
	color: var(--maxxefy-white);
}

.maxxefy-section--surface {
	background-color: var(--maxxefy-dark-surface);
	color: var(--maxxefy-white);
}

.maxxefy-grid {
	display: grid;
	gap: var(--maxxefy-card-gap);
}

.maxxefy-grid--2 { grid-template-columns: repeat(2, 1fr); }
.maxxefy-grid--3 { grid-template-columns: repeat(3, 1fr); }
.maxxefy-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
	.maxxefy-grid--2,
	.maxxefy-grid--3,
	.maxxefy-grid--4 {
		grid-template-columns: 1fr;
	}

	h1 { font-size: var(--maxxefy-text-3xl); }
	h2 { font-size: var(--maxxefy-text-2xl); }
}

@media (min-width: 769px) and (max-width: 1024px) {
	.maxxefy-grid--3,
	.maxxefy-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.maxxefy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.75rem;
	font-family: var(--maxxefy-font-body);
	font-size: var(--maxxefy-text-base);
	font-weight: 600;
	line-height: 1.5;
	border-radius: var(--maxxefy-radius-md);
	border: 2px solid transparent;
	cursor: pointer;
	transition: all var(--maxxefy-transition-base);
	text-decoration: none;
}

.maxxefy-btn--primary {
	background-color: var(--maxxefy-primary);
	color: var(--maxxefy-white);
	border-color: var(--maxxefy-primary);
}

.maxxefy-btn--primary:hover {
	background-color: var(--maxxefy-primary-dark);
	border-color: var(--maxxefy-primary-dark);
	color: var(--maxxefy-white);
	box-shadow: var(--maxxefy-shadow-glow);
}

.maxxefy-btn--secondary {
	background-color: transparent;
	color: var(--maxxefy-white);
	border-color: var(--maxxefy-white);
}

.maxxefy-btn--secondary:hover {
	background-color: var(--maxxefy-white);
	color: var(--maxxefy-dark);
}

.maxxefy-btn--outline {
	background-color: transparent;
	color: var(--maxxefy-primary);
	border-color: var(--maxxefy-primary);
}

.maxxefy-btn--outline:hover {
	background-color: var(--maxxefy-primary);
	color: var(--maxxefy-white);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.maxxefy-card {
	background: var(--maxxefy-card-bg);
	border: 1px solid var(--maxxefy-border);
	border-radius: var(--maxxefy-card-radius);
	padding: 2rem;
	transition: all var(--maxxefy-transition-base);
}

.maxxefy-card:hover {
	box-shadow: var(--maxxefy-shadow-card);
	transform: translateY(-2px);
}

.maxxefy-card--light {
	background: var(--maxxefy-white);
	border-color: var(--maxxefy-gray-200);
	color: var(--maxxefy-gray-800);
}

/* ==========================================================================
   404 Page
   ========================================================================== */

.maxxefy-404 {
	text-align: center;
	padding: var(--maxxefy-section-gap) 1.5rem;
}

.maxxefy-404-number {
	font-size: 8rem;
	font-weight: 800;
	background: linear-gradient(135deg, var(--maxxefy-primary), var(--maxxefy-accent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
	display: block;
	margin-bottom: 1rem;
}

.maxxefy-404-links ul {
	list-style: none;
	padding: 0;
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 2rem;
}

.maxxefy-404-links a {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--maxxefy-border);
	border-radius: var(--maxxefy-radius-md);
	transition: all var(--maxxefy-transition-fast);
}

.maxxefy-404-links a:hover {
	background-color: var(--maxxefy-primary);
	color: var(--maxxefy-white);
	border-color: var(--maxxefy-primary);
}

/* ==========================================================================
   Blog / Post Grid
   ========================================================================== */

.maxxefy-post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--maxxefy-card-gap);
	margin-top: 2rem;
}

@media (max-width: 1024px) {
	.maxxefy-post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.maxxefy-post-grid {
		grid-template-columns: 1fr;
	}
}

.maxxefy-post-card {
	background: var(--maxxefy-white);
	border-radius: var(--maxxefy-card-radius);
	overflow: hidden;
	box-shadow: var(--maxxefy-shadow-sm);
	transition: all var(--maxxefy-transition-base);
}

.maxxefy-post-card:hover {
	box-shadow: var(--maxxefy-shadow-lg);
	transform: translateY(-4px);
}

.maxxefy-post-card__image {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.maxxefy-post-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--maxxefy-transition-slow);
}

.maxxefy-post-card:hover .maxxefy-post-card__image img {
	transform: scale(1.05);
}

.maxxefy-post-card__content {
	padding: 1.5rem;
}

.maxxefy-post-card__category {
	display: inline-block;
	font-size: var(--maxxefy-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--maxxefy-primary);
	margin-bottom: 0.5rem;
}

.maxxefy-post-card__title {
	font-size: var(--maxxefy-text-lg);
	margin-bottom: 0.75rem;
}

.maxxefy-post-card__title a {
	color: var(--maxxefy-gray-800);
}

.maxxefy-post-card__title a:hover {
	color: var(--maxxefy-primary);
}

.maxxefy-post-card__excerpt {
	color: var(--maxxefy-gray-500);
	font-size: var(--maxxefy-text-sm);
	margin-bottom: 1rem;
}

.maxxefy-post-card__meta {
	display: flex;
	gap: 1rem;
	font-size: var(--maxxefy-text-xs);
	color: var(--maxxefy-gray-400);
}

/* ==========================================================================
   Search Results
   ========================================================================== */

.maxxefy-search-results .search-header {
	text-align: center;
	margin-bottom: 2rem;
}

.maxxefy-search-results .search-count {
	color: var(--maxxefy-gray-500);
	margin-bottom: 2rem;
}