/**
 * Noxora Global Design System v4.28.0
 * Single source of truth for all UI components.
 *
 * @package Noxora\DesignSystem
 */

/* ── Design Tokens ── */

:root {
	/* Colors */
	--nx-bg-primary: #060608;
	--nx-bg-secondary: #0e0e14;
	--nx-bg-tertiary: #14141c;
	--nx-bg-elevated: #1a1a24;
	
	--nx-text-primary: #f5f5f7;
	--nx-text-secondary: #a0a0b0;
	--nx-text-muted: #6b6b7b;
	
	--nx-accent: #d4af37;
	--nx-accent-hover: #e5c048;
	--nx-accent-dim: rgba(212, 175, 55, 0.15);
	
	--nx-primary: #7c5cff;
	--nx-primary-hover: #8e6dff;
	--nx-primary-dim: rgba(124, 92, 255, 0.15);
	
	--nx-success: #22c55e;
	--nx-warning: #f59e0b;
	--nx-error: #ef4444;
	--nx-info: #3b82f6;
	
	--nx-border: rgba(255, 255, 255, 0.08);
	--nx-border-hover: rgba(255, 255, 255, 0.12);
	--nx-border-active: rgba(255, 255, 255, 0.16);
	
	/* Glass */
	--nx-glass-bg: rgba(20, 20, 28, 0.6);
	--nx-glass-blur: 16px;
	--nx-glass-saturate: 120%;
	--nx-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 40px rgba(0, 0, 0, 0.35);
	
	/* Spacing */
	--nx-space-1: 0.25rem;
	--nx-space-2: 0.5rem;
	--nx-space-3: 0.75rem;
	--nx-space-4: 1rem;
	--nx-space-5: 1.25rem;
	--nx-space-6: 1.5rem;
	--nx-space-8: 2rem;
	--nx-space-10: 2.5rem;
	--nx-space-12: 3rem;
	
	/* Border Radius */
	--nx-radius-sm: 8px;
	--nx-radius-md: 12px;
	--nx-radius-lg: 16px;
	--nx-radius-xl: 20px;
	--nx-radius-2xl: 24px;
	--nx-radius-full: 9999px;
	
	/* Typography */
	--nx-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
	--nx-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
	
	--nx-text-xs: 0.75rem;
	--nx-text-sm: 0.875rem;
	--nx-text-base: 1rem;
	--nx-text-lg: 1.125rem;
	--nx-text-xl: 1.25rem;
	--nx-text-2xl: 1.5rem;
	--nx-text-3xl: 1.875rem;
	--nx-text-4xl: 2.25rem;
	
	--nx-font-light: 300;
	--nx-font-normal: 400;
	--nx-font-medium: 500;
	--nx-font-semibold: 600;
	--nx-font-bold: 700;
	
	/* Shadows */
	--nx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
	--nx-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
	--nx-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
	--nx-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.25);
	--nx-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.35);
	
	/* Z-Index */
	--nx-z-dropdown: 1000;
	--nx-z-sticky: 1020;
	--nx-z-fixed: 1030;
	--nx-z-modal-backdrop: 1040;
	--nx-z-modal: 1050;
	--nx-z-popover: 1060;
	--nx-z-tooltip: 1070;
	
	/* Transitions */
	--nx-transition-fast: 150ms ease;
	--nx-transition-base: 250ms ease;
	--nx-transition-slow: 350ms ease;
}

/* ── Reset & Base ── */

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

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--nx-font-sans);
	font-size: var(--nx-text-base);
	line-height: 1.6;
	color: var(--nx-text-primary);
	background: var(--nx-bg-primary);
}

/* ── Glass Component ── */

.nx-glass {
	background: var(--nx-glass-bg);
	backdrop-filter: blur(var(--nx-glass-blur)) saturate(var(--nx-glass-saturate));
	-webkit-backdrop-filter: blur(var(--nx-glass-blur)) saturate(var(--nx-glass-saturate));
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-lg);
	box-shadow: var(--nx-glass-shadow);
}

/* ── Button Component ── */

.nx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--nx-space-2);
	padding: var(--nx-space-3) var(--nx-space-5);
	font-family: var(--nx-font-sans);
	font-size: var(--nx-text-sm);
	font-weight: var(--nx-font-semibold);
	line-height: 1;
	text-decoration: none;
	color: var(--nx-text-primary);
	background: var(--nx-bg-tertiary);
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-md);
	cursor: pointer;
	transition: all var(--nx-transition-base);
}

.nx-btn:hover {
	background: var(--nx-bg-elevated);
	border-color: var(--nx-border-hover);
	transform: translateY(-1px);
}

.nx-btn:active {
	transform: translateY(0);
}

.nx-btn--primary {
	background: var(--nx-primary);
	border-color: var(--nx-primary);
	color: #fff;
}

.nx-btn--primary:hover {
	background: var(--nx-primary-hover);
	border-color: var(--nx-primary-hover);
}

.nx-btn--accent {
	background: var(--nx-accent);
	border-color: var(--nx-accent);
	color: #000;
}

.nx-btn--accent:hover {
	background: var(--nx-accent-hover);
	border-color: var(--nx-accent-hover);
}

.nx-btn--ghost {
	background: transparent;
	border-color: transparent;
}

.nx-btn--ghost:hover {
	background: var(--nx-bg-tertiary);
}

.nx-btn--sm {
	padding: var(--nx-space-2) var(--nx-space-4);
	font-size: var(--nx-text-xs);
}

.nx-btn--lg {
	padding: var(--nx-space-4) var(--nx-space-6);
	font-size: var(--nx-text-base);
}

.nx-btn--block {
	width: 100%;
}

.nx-btn--icon {
	padding: var(--nx-space-3);
}

/* ── Card Component ── */

.nx-card {
	background: var(--nx-bg-tertiary);
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-lg);
	padding: var(--nx-space-5);
	transition: all var(--nx-transition-base);
}

.nx-card:hover {
	border-color: var(--nx-border-hover);
	box-shadow: var(--nx-shadow-lg);
}

.nx-card--glass {
	@extend .nx-glass;
}

.nx-card--interactive {
	cursor: pointer;
}

.nx-card--interactive:hover {
	transform: translateY(-2px);
}

/* ── Badge Component ── */

.nx-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--nx-space-1) var(--nx-space-3);
	font-size: var(--nx-text-xs);
	font-weight: var(--nx-font-semibold);
	line-height: 1;
	color: var(--nx-text-primary);
	background: var(--nx-bg-tertiary);
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-full);
}

.nx-badge--primary {
	background: var(--nx-primary-dim);
	border-color: var(--nx-primary);
	color: var(--nx-primary);
}

.nx-badge--accent {
	background: var(--nx-accent-dim);
	border-color: var(--nx-accent);
	color: var(--nx-accent);
}

.nx-badge--success {
	background: rgba(34, 197, 94, 0.15);
	border-color: var(--nx-success);
	color: var(--nx-success);
}

.nx-badge--warning {
	background: rgba(245, 158, 11, 0.15);
	border-color: var(--nx-warning);
	color: var(--nx-warning);
}

.nx-badge--error {
	background: rgba(239, 68, 68, 0.15);
	border-color: var(--nx-error);
	color: var(--nx-error);
}

/* ── Avatar Component ── */

.nx-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--nx-radius-full);
	background: var(--nx-bg-tertiary);
	border: 1px solid var(--nx-border);
	overflow: hidden;
}

.nx-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nx-avatar--sm {
	width: 32px;
	height: 32px;
}

.nx-avatar--lg {
	width: 48px;
	height: 48px;
}

.nx-avatar--xl {
	width: 64px;
	height: 64px;
}

/* ── Input Component ── */

.nx-input {
	width: 100%;
	padding: var(--nx-space-3) var(--nx-space-4);
	font-family: var(--nx-font-sans);
	font-size: var(--nx-text-sm);
	color: var(--nx-text-primary);
	background: var(--nx-bg-tertiary);
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-md);
	transition: all var(--nx-transition-base);
}

.nx-input::placeholder {
	color: var(--nx-text-muted);
}

.nx-input:focus {
	outline: none;
	border-color: var(--nx-primary);
	box-shadow: 0 0 0 3px var(--nx-primary-dim);
}

.nx-input--error {
	border-color: var(--nx-error);
}

.nx-input--error:focus {
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* ── Dropdown Component ── */

.nx-dropdown {
	position: relative;
}

.nx-dropdown__menu {
	position: absolute;
	top: calc(100% + var(--nx-space-2));
	left: 0;
	min-width: 200px;
	padding: var(--nx-space-2);
	background: var(--nx-bg-secondary);
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-lg);
	box-shadow: var(--nx-shadow-xl);
	z-index: var(--nx-z-dropdown);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: all var(--nx-transition-base);
}

.nx-dropdown.is-open .nx-dropdown__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nx-dropdown__item {
	display: flex;
	align-items: center;
	gap: var(--nx-space-3);
	padding: var(--nx-space-3) var(--nx-space-4);
	font-size: var(--nx-text-sm);
	color: var(--nx-text-primary);
	text-decoration: none;
	border-radius: var(--nx-radius-sm);
	transition: all var(--nx-transition-fast);
}

.nx-dropdown__item:hover {
	background: var(--nx-bg-tertiary);
}

.nx-dropdown__item--danger {
	color: var(--nx-error);
}

.nx-dropdown__item--danger:hover {
	background: rgba(239, 68, 68, 0.1);
}

/* ── Modal Component ── */

.nx-modal {
	position: fixed;
	inset: 0;
	z-index: var(--nx-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--nx-space-4);
	opacity: 0;
	visibility: hidden;
	transition: all var(--nx-transition-base);
}

.nx-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.nx-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
}

.nx-modal__content {
	position: relative;
	width: 100%;
	max-width: 500px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--nx-bg-secondary);
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-xl);
	box-shadow: var(--nx-shadow-2xl);
	padding: var(--nx-space-6);
	transform: scale(0.95);
	transition: all var(--nx-transition-base);
}

.nx-modal.is-open .nx-modal__content {
	transform: scale(1);
}

.nx-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--nx-space-5);
}

.nx-modal__title {
	margin: 0;
	font-size: var(--nx-text-lg);
	font-weight: var(--nx-font-semibold);
}

.nx-modal__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: var(--nx-radius-sm);
	color: var(--nx-text-muted);
	cursor: pointer;
	transition: all var(--nx-transition-fast);
}

.nx-modal__close:hover {
	background: var(--nx-bg-tertiary);
	color: var(--nx-text-primary);
}

.nx-modal__body {
	margin-bottom: var(--nx-space-5);
}

.nx-modal__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--nx-space-3);
}

/* ── Animation Utilities ── */

@keyframes nx-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes nx-fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes nx-slide-up {
	from {
		transform: translateY(10px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes nx-slide-down {
	from {
		transform: translateY(-10px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes nx-scale-in {
	from {
		transform: scale(0.95);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.nx-animate-fade-in {
	animation: nx-fade-in var(--nx-transition-base) ease;
}

.nx-animate-fade-out {
	animation: nx-fade-out var(--nx-transition-base) ease;
}

.nx-animate-slide-up {
	animation: nx-slide-up var(--nx-transition-base) ease;
}

.nx-animate-slide-down {
	animation: nx-slide-down var(--nx-transition-base) ease;
}

.nx-animate-scale-in {
	animation: nx-scale-in var(--nx-transition-base) ease;
}