/**
 * Luxury Design System
 *
 * Premium design tokens, typography, colors, spacing, and utilities
 * for the Waseem Nasir Luxury Portfolio theme
 *
 * @package WaseemNasirLuxury
 * @since 1.0.0
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */

:root {
	/* ===== Colors ===== */

	/* Primary Palette - Gold */
	--color-gold-50: hsl(42, 75%, 95%);
	--color-gold-100: hsl(42, 75%, 85%);
	--color-gold-200: hsl(42, 75%, 75%);
	--color-gold-300: hsl(42, 75%, 65%);
	--color-gold-400: hsl(42, 75%, 55%); /* Primary gold */
	--color-gold-500: hsl(38, 60%, 45%);
	--color-gold-600: hsl(35, 55%, 35%);
	--color-gold-700: hsl(32, 50%, 25%);
	--color-gold-800: hsl(30, 45%, 15%);
	--color-gold-900: hsl(28, 40%, 8%);

	/* Neutral Palette - Charcoal/Black */
	--color-neutral-0: hsl(240, 10%, 100%); /* Pure white */
	--color-neutral-50: hsl(45, 30%, 98%);
	--color-neutral-100: hsl(45, 30%, 94%); /* Off-white */
	--color-neutral-200: hsl(45, 20%, 85%);
	--color-neutral-300: hsl(45, 20%, 70%);
	--color-neutral-400: hsl(45, 20%, 65%);
	--color-neutral-500: hsl(45, 20%, 55%);
	--color-neutral-600: hsl(45, 15%, 35%);
	--color-neutral-700: hsl(240, 10%, 15%);
	--color-neutral-800: hsl(240, 10%, 10%);
	--color-neutral-900: hsl(240, 10%, 8%);
	--color-neutral-950: hsl(240, 10%, 6%);
	--color-neutral-1000: hsl(240, 10%, 4%); /* Deep charcoal */

	/* Semantic Colors */
	--color-background: var(--color-neutral-1000);
	--color-surface: var(--color-neutral-950);
	--color-surface-elevated: var(--color-neutral-900);
	--color-primary: var(--color-gold-400);
	--color-primary-hover: var(--color-gold-500);
	--color-text: var(--color-neutral-100);
	--color-text-secondary: var(--color-neutral-300);
	--color-text-muted: var(--color-neutral-500);
	--color-border: hsla(42, 75%, 55%, 0.15);
	--color-border-hover: var(--color-gold-400);

	/* ===== Typography ===== */

	/* Font Families */
	--font-display: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Courier New', monospace;

	/* Font Sizes - Fluid Typography */
	--text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);      /* 12-13px */
	--text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);  /* 14-15px */
	--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);      /* 16-18px */
	--text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);    /* 18-20px */
	--text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);        /* 20-24px */
	--text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);     /* 24-30px */
	--text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);   /* 30-36px */
	--text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);         /* 36-48px */
	--text-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);             /* 48-64px */
	--text-6xl: clamp(4rem, 3rem + 5vw, 6rem);                 /* 64-96px */
	--text-7xl: clamp(5rem, 3.5rem + 7.5vw, 8rem);             /* 80-128px */

	/* Font Weights */
	--font-light: 300;
	--font-regular: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;

	/* Line Heights */
	--leading-none: 1;
	--leading-tight: 1.1;
	--leading-snug: 1.3;
	--leading-normal: 1.5;
	--leading-relaxed: 1.6;
	--leading-loose: 1.8;

	/* Letter Spacing */
	--tracking-tighter: -0.05em;
	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.025em;
	--tracking-wider: 0.05em;
	--tracking-widest: 0.1em;
	--tracking-mega: 0.3em;

	/* ===== Spacing ===== */
	--space-0: 0;
	--space-1: 0.25rem;     /* 4px */
	--space-2: 0.5rem;      /* 8px */
	--space-3: 0.75rem;     /* 12px */
	--space-4: 1rem;        /* 16px */
	--space-5: 1.25rem;     /* 20px */
	--space-6: 1.5rem;      /* 24px */
	--space-8: 2rem;        /* 32px */
	--space-10: 2.5rem;     /* 40px */
	--space-12: 3rem;       /* 48px */
	--space-16: 4rem;       /* 64px */
	--space-20: 5rem;       /* 80px */
	--space-24: 6rem;       /* 96px */
	--space-32: 8rem;       /* 128px */
	--space-40: 10rem;      /* 160px */
	--space-48: 12rem;      /* 192px */
	--space-64: 16rem;      /* 256px */

	/* Container Sizes */
	--container-xs: 32rem;   /* 512px */
	--container-sm: 40rem;   /* 640px */
	--container-md: 48rem;   /* 768px */
	--container-lg: 64rem;   /* 1024px */
	--container-xl: 80rem;   /* 1280px */
	--container-2xl: 96rem;  /* 1536px */

	/* ===== Border Radius ===== */
	--radius-none: 0;
	--radius-sm: 0.25rem;    /* 4px */
	--radius-base: 0.5rem;   /* 8px */
	--radius-md: 0.75rem;    /* 12px */
	--radius-lg: 1rem;       /* 16px */
	--radius-xl: 1.5rem;     /* 24px */
	--radius-2xl: 2rem;      /* 32px */
	--radius-full: 9999px;

	/* ===== Shadows ===== */
	--shadow-xs: 0 1px 2px hsla(0, 0%, 0%, 0.05);
	--shadow-sm: 0 2px 4px hsla(0, 0%, 0%, 0.1);
	--shadow-base: 0 4px 8px hsla(0, 0%, 0%, 0.1),
	               0 2px 4px hsla(0, 0%, 0%, 0.06);
	--shadow-md: 0 8px 16px hsla(0, 0%, 0%, 0.1),
	             0 4px 8px hsla(0, 0%, 0%, 0.06);
	--shadow-lg: 0 12px 24px hsla(0, 0%, 0%, 0.15),
	             0 6px 12px hsla(0, 0%, 0%, 0.1);
	--shadow-xl: 0 20px 40px hsla(0, 0%, 0%, 0.2),
	             0 10px 20px hsla(0, 0%, 0%, 0.15);
	--shadow-2xl: 0 32px 64px hsla(0, 0%, 0%, 0.25),
	              0 16px 32px hsla(0, 0%, 0%, 0.2);
	--shadow-glow: 0 0 20px hsla(42, 75%, 55%, 0.3);
	--shadow-glow-strong: 0 0 40px hsla(42, 75%, 55%, 0.5);

	/* ===== Timing Functions (Easing) ===== */
	--ease-linear: linear;
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
	--ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
	--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	--ease-luxury: cubic-bezier(0.19, 1, 0.22, 1);
	--ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

	/* ===== Durations ===== */
	--duration-instant: 0ms;
	--duration-fast: 150ms;
	--duration-normal: 300ms;
	--duration-slow: 500ms;
	--duration-slower: 800ms;
	--duration-slowest: 1200ms;

	/* ===== Z-Index Scale ===== */
	--z-base: 0;
	--z-dropdown: 1000;
	--z-sticky: 1100;
	--z-fixed: 1200;
	--z-modal-backdrop: 1300;
	--z-modal: 1400;
	--z-popover: 1500;
	--z-tooltip: 1600;
	--z-toast: 1700;
	--z-cursor: 9999;
	--z-max: 99999;
}

/* ============================================
   Typography System
   ============================================ */

.text-display-1 {
	font-family: var(--font-display);
	font-size: var(--text-7xl);
	font-weight: var(--font-medium);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}

.text-display-2 {
	font-family: var(--font-display);
	font-size: var(--text-6xl);
	font-weight: var(--font-medium);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}

.text-display-3 {
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-weight: var(--font-regular);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
}

.text-heading-1 {
	font-family: var(--font-body);
	font-size: var(--text-4xl);
	font-weight: var(--font-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}

.text-heading-2 {
	font-family: var(--font-body);
	font-size: var(--text-3xl);
	font-weight: var(--font-semibold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
}

.text-heading-3 {
	font-family: var(--font-body);
	font-size: var(--text-2xl);
	font-weight: var(--font-semibold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-normal);
}

.text-heading-4 {
	font-family: var(--font-body);
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
}

.text-body-lg {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: var(--font-regular);
	line-height: var(--leading-relaxed);
	letter-spacing: var(--tracking-normal);
}

.text-body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--font-regular);
	line-height: var(--leading-relaxed);
	letter-spacing: var(--tracking-normal);
}

.text-body-sm {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-regular);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
}

.text-caption {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--font-regular);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-wide);
}

.text-eyebrow {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-mega);
	text-transform: uppercase;
}

/* ============================================
   Color Utilities
   ============================================ */

.text-gold { color: var(--color-primary); }
.text-primary { color: var(--color-text); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }

.bg-primary { background-color: var(--color-background); }
.bg-surface { background-color: var(--color-surface); }
.bg-elevated { background-color: var(--color-surface-elevated); }
.bg-gold { background-color: var(--color-primary); }

.border-gold { border-color: var(--color-primary); }
.border-default { border-color: var(--color-border); }

/* Gradient Utilities */
.gradient-gold {
	background: linear-gradient(135deg, var(--color-gold-400) 0%, var(--color-gold-500) 100%);
}

.gradient-text {
	background: linear-gradient(135deg, var(--color-gold-400) 0%, var(--color-gold-500) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ============================================
   Luxury Card Component
   ============================================ */

.card-luxury {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	transition: all var(--duration-normal) var(--ease-luxury);
	position: relative;
	overflow: hidden;
}

.card-luxury::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(
		circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
		hsla(42, 75%, 55%, 0.1) 0%,
		transparent 50%
	);
	opacity: 0;
	transition: opacity var(--duration-normal) var(--ease-out);
	pointer-events: none;
}

.card-luxury:hover {
	border-color: var(--color-border-hover);
	box-shadow: var(--shadow-glow);
	transform: translateY(-4px);
}

.card-luxury:hover::before {
	opacity: 1;
}

/* ============================================
   Button System
   ============================================ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-8);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--font-medium);
	line-height: 1;
	border-radius: var(--radius-base);
	transition: all var(--duration-normal) var(--ease-luxury);
	cursor: pointer;
	border: none;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

.btn-primary {
	background: var(--gradient-gold);
	color: var(--color-neutral-1000);
	box-shadow: var(--shadow-md);
}

.btn-primary:hover {
	box-shadow: var(--shadow-glow);
	transform: translateY(-2px);
}

.btn-secondary {
	background: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
	background: hsla(42, 75%, 55%, 0.1);
	box-shadow: var(--shadow-glow);
	transform: translateY(-2px);
}

.btn-ghost {
	background: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-border);
}

.btn-ghost:hover {
	border-color: var(--color-primary);
	background: hsla(42, 75%, 55%, 0.05);
}

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

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

/* ============================================
   Spacing Utilities
   ============================================ */

.section-padding {
	padding-top: var(--space-32);
	padding-bottom: var(--space-32);
}

.section-padding-sm {
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
}

.section-padding-lg {
	padding-top: var(--space-48);
	padding-bottom: var(--space-48);
}

@media (max-width: 768px) {
	.section-padding {
		padding-top: var(--space-16);
		padding-bottom: var(--space-16);
	}

	.section-padding-lg {
		padding-top: var(--space-24);
		padding-bottom: var(--space-24);
	}
}

/* ============================================
   Animation Utilities
   ============================================ */

.fade-in {
	animation: fadeIn var(--duration-normal) var(--ease-out);
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.slide-up {
	animation: slideUp var(--duration-slow) var(--ease-luxury);
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.scale-in {
	animation: scaleIn var(--duration-normal) var(--ease-bounce);
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Hover Effects */
.hover-lift {
	transition: transform var(--duration-normal) var(--ease-luxury);
}

.hover-lift:hover {
	transform: translateY(-8px);
}

.hover-glow {
	transition: all var(--duration-normal) var(--ease-out);
}

.hover-glow:hover {
	box-shadow: var(--shadow-glow);
}

/* ============================================
   Grid System
   ============================================ */

.grid-luxury {
	display: grid;
	gap: var(--space-8);
}

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

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

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

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

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

/* ============================================
   Accessibility
   ============================================ */

/* Skip to content link */
.skip-to-content {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--color-primary);
	color: var(--color-neutral-1000);
	padding: var(--space-4) var(--space-6);
	font-weight: var(--font-semibold);
	z-index: var(--z-max);
	transition: top var(--duration-fast) var(--ease-out);
}

.skip-to-content:focus {
	top: 0;
}

/* Focus visible styles */
*:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* High contrast mode */
@media (prefers-contrast: high) {
	:root {
		--color-border: var(--color-gold-400);
		--color-text-secondary: var(--color-neutral-100);
	}
}