/*
==========================================================================
  Lumiere Theme - Dark Luxury Editorial Design System
  Navigation Index:
  1. CSS Reset & Base
  2. CSS Custom Properties (Design Tokens)
  3. Typography
  4. Layout & Container
  5. Global Elements
  6. Grain Overlay
  7. Gold Shimmer Animation
  8. Reveal Animations
  9. Section Spacing Utilities
  10. Accessibility Helpers
==========================================================================
*/

/* ========== 1. CSS Reset & Base ========== */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	background-color: var(--lumiere-bg);
	color: var(--lumiere-text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: none;
	cursor: pointer;
}

ul,
ol {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

blockquote,
q {
	quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
	content: '';
	content: none;
}

::selection {
	background: rgba(197, 164, 118, 0.3);
	color: var(--lumiere-gold);
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: var(--lumiere-bg-dark);
}

::-webkit-scrollbar-thumb {
	background: var(--lumiere-border);
	border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--lumiere-gold);
}

/* ========== 2. CSS Custom Properties (Design Tokens) ========== */
:root {
	/* Colors */
	--lumiere-bg: #0A090C;
	--lumiere-bg-card: #0C0A0E;
	--lumiere-bg-dark: #060607;
	--lumiere-gold: #C5A476;
	--lumiere-gold-hover: #D8B88A;
	--lumiere-gold-active: #E8C89A;
	--lumiere-text: #F5F0E9;
	--lumiere-text-muted: #8A8078;
	--lumiere-border: rgba(197, 164, 118, 0.12);
	--lumiere-gold-glow: rgba(197, 164, 118, 0.25);

	/* Design token aliases — used by cart/checkout page CSS */
	--lumiere-brand: var(--lumiere-gold);
	--lumiere-brand-foreground: var(--lumiere-bg);
	--lumiere-brand-light: var(--lumiere-gold-hover);
	--lumiere-brand-dark: #8B7355;
	--lumiere-brand-muted: rgba(197, 164, 118, 0.12);
	--lumiere-brand-glow: var(--lumiere-gold-glow);
	--lumiere-background: var(--lumiere-bg);
	--lumiere-foreground: var(--lumiere-text);
	--lumiere-card: var(--lumiere-bg-card);
	--lumiere-card-foreground: var(--lumiere-text);
	--lumiere-muted: #6B6660;
	--lumiere-muted-foreground: var(--lumiere-text-muted);
	--lumiere-ink-secondary: var(--lumiere-text-muted);
	--lumiere-ink-tertiary: #6B6660;
	--lumiere-divider: rgba(245, 241, 235, 0.06);
	--lumiere-surface: var(--lumiere-bg-card);
	--lumiere-surface-2: #1C1B20;
	--lumiere-surface-3: #252329;
	--lumiere-destructive: #8B3A3A;
	--lumiere-success: #5A7A5E;
	--lumiere-font-display: var(--font-display);
	--lumiere-font-body: var(--font-body);

	/* Typography */
	--font-display: 'Cormorant Garamond', serif;
	--font-body: 'Inter', sans-serif;

	/* Spacing (8pt grid) */
	--gap-1: 8px;
	--gap-2: 16px;
	--gap-3: 24px;
	--gap-4: 32px;
	--gap-6: 48px;
	--gap-8: 64px;
	--gap-10: 80px;
	--gap-12: 96px;

	/* Section Padding */
	--section-padding-mobile: 56px;
	--section-padding-tablet: 80px;
	--section-padding-desktop: 96px;

	/* Border Radius */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;
	--radius-pill: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
	--shadow-gold: 0 8px 32px var(--lumiere-gold-glow);

	/* Transitions */
	--transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Container */
	--lumiere-container-width: 1400px;
}

/* ========== 3. Typography ========== */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.15;
	color: var(--lumiere-text);
	letter-spacing: -0.01em;
}

h1 {
	font-size: clamp(2.75rem, 6vw, 5rem);
	font-weight: 300;
	letter-spacing: -0.02em;
}

h2 {
	font-size: clamp(2.25rem, 4.5vw, 3.75rem);
	font-weight: 300;
}

h3 {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 400;
}

h4 {
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	font-weight: 500;
}

h5 {
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	font-weight: 500;
}

h6 {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

p {
	margin-bottom: var(--gap-3);
	font-weight: 300;
}

p:last-child {
	margin-bottom: 0;
}

strong,
b {
	font-weight: 500;
}

em,
i {
	font-style: italic;
}

small {
	font-size: 0.875rem;
}

/* ========== 4. Layout & Container ========== */
.lumiere-site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
}

.lumiere-main {
	flex: 1;
	padding-top: 120px;
	min-height: 100vh;
}

.lumiere-container {
	width: 100%;
	max-width: var(--lumiere-container-width);
	margin: 0 auto;
	padding: 0 var(--gap-3);
}

@media (min-width: 768px) {
	.lumiere-container {
		padding: 0 var(--gap-4);
	}
}

@media (min-width: 1200px) {
	.lumiere-container {
		padding: 0 var(--gap-6);
	}
}

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--gap-2);
	background: var(--lumiere-gold);
	color: var(--lumiere-bg);
	padding: var(--gap-1) var(--gap-2);
	z-index: 99999;
	font-weight: 500;
	border-radius: var(--radius-md);
	transition: top var(--transition-fast);
}

.skip-link:focus {
	top: var(--gap-2);
}

/* ========== 5. Global Elements ========== */
a {
	color: var(--lumiere-text);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--lumiere-gold);
}

hr {
	border: none;
	height: 1px;
	background: var(--lumiere-border);
	margin: var(--gap-6) 0;
}

/* ========== 6. Grain Overlay ========== */
.lumiere-grain-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	opacity: 0.04;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 256px 256px;
}

/* ========== 7. Gold Shimmer Animation ========== */
.lumiere-word-gold {
	font-style: italic;
	font-family: var(--font-display);
	background: linear-gradient(
		110deg,
		var(--lumiere-gold) 0%,
		var(--lumiere-gold-active) 25%,
		var(--lumiere-gold-hover) 50%,
		var(--lumiere-gold-active) 75%,
		var(--lumiere-gold) 100%
	);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: lumiere-shimmer 4s ease-in-out infinite;
}

@keyframes lumiere-shimmer {
	0% {
		background-position: 0% center;
	}
	50% {
		background-position: 100% center;
	}
	100% {
		background-position: 0% center;
	}
}

/* ========== 8. Reveal Animations ========== */
.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity var(--transition-slow) ease, transform var(--transition-slow) cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal-delay-1 {
	transition-delay: 100ms;
}

.reveal-delay-2 {
	transition-delay: 200ms;
}

.reveal-delay-3 {
	transition-delay: 300ms;
}

.reveal-delay-4 {
	transition-delay: 400ms;
}

/* ========== 9. Section Spacing Utilities ========== */
.lumiere-section {
	padding-top: var(--section-padding-mobile);
	padding-bottom: var(--section-padding-mobile);
}

@media (min-width: 768px) {
	.lumiere-section {
		padding-top: var(--section-padding-tablet);
		padding-bottom: var(--section-padding-tablet);
	}
}

@media (min-width: 1200px) {
	.lumiere-section {
		padding-top: var(--section-padding-desktop);
		padding-bottom: var(--section-padding-desktop);
	}
}

.lumiere-section--sm {
	padding-top: var(--gap-6);
	padding-bottom: var(--gap-6);
}

@media (min-width: 768px) {
	.lumiere-section--sm {
		padding-top: var(--gap-8);
		padding-bottom: var(--gap-8);
	}
}

.lumiere-section--lg {
	padding-top: var(--gap-10);
	padding-bottom: var(--gap-10);
}

@media (min-width: 1200px) {
	.lumiere-section--lg {
		padding-top: var(--gap-12);
		padding-bottom: var(--gap-12);
	}
}

/* ========== 10. Accessibility Helpers ========== */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

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

	.reveal,
	[data-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* ========== 11. Enhanced Scroll Reveal ========== */
[data-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
}

[data-reveal][data-reveal-delay="100"] {
	transition-delay: 100ms;
}

[data-reveal][data-reveal-delay="200"] {
	transition-delay: 200ms;
}

[data-reveal][data-reveal-delay="300"] {
	transition-delay: 300ms;
}

[data-reveal][data-reveal-delay="400"] {
	transition-delay: 400ms;
}

[data-reveal][data-reveal-delay="500"] {
	transition-delay: 500ms;
}

/* ========== 12. Grain Texture Overlay ========== */
.lumiere-grain {
	position: relative;
}

.lumiere-grain::after {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.03;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 128px;
	z-index: 1;
	mix-blend-mode: overlay;
}

/* ========== 13. Smooth Image Blur-Up Loading ========== */
.lumiere-blur-up {
	filter: blur(12px);
	transform: scale(1.02);
	transition: filter 0.6s ease-out, transform 0.6s ease-out;
}

.lumiere-blur-up.is-loaded {
	filter: blur(0);
	transform: scale(1);
}

/* ========== 14. Enhanced Focus States ========== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.lumiere-btn:focus-visible {
	outline: 2px solid var(--lumiere-gold);
	outline-offset: 2px;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: 2px solid var(--lumiere-gold);
	outline-offset: 2px;
}

/* ========== 15. Link Underline Animation ========== */
.lumiere-link-underline {
	position: relative;
	display: inline-block;
}

.lumiere-link-underline::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--lumiere-gold);
	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lumiere-link-underline:hover::after,
.lumiere-link-underline:focus-visible::after {
	width: 100%;
}