/* ==========================================================================
   BASE — Reset, CSS Custom Properties, Spacing, Utilities
   BlushTheme v1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   Modern Reset
   -------------------------------------------------------------------------- */

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

* {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow-x: hidden;
}

body {
	min-height: 100vh;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	font-family: var(--font-body);
	font-weight: var(--font-body-weight, 300);
	font-size: var(--text-body);
	color: var(--color-text-primary);
	background-color: var(--color-bg-primary);
}

body.no-scroll {
	overflow: hidden;
}

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

img {
	height: auto;
}

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

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

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	list-style: none;
}

h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
	font-weight: normal;
}

p {
	overflow-wrap: break-word;
}

::selection {
	background-color: var(--color-accent-muted);
	color: var(--color-text-heading);
}

/* --------------------------------------------------------------------------
   CSS Custom Properties — Defaults
   Overridden per theme in themes/*.css
   -------------------------------------------------------------------------- */

:root {
	/* Spacing scale (8px base grid) */
	--space-xs:   0.25rem;
	--space-sm:   0.5rem;
	--space-md:   1rem;
	--space-lg:   1.5rem;
	--space-xl:   2rem;
	--space-2xl:  3rem;
	--space-3xl:  4rem;
	--space-4xl:  6rem;
	--space-5xl:  8rem;

	/* Typography scale (Perfect Fourth — 1.333) */
	--text-sm:      0.875rem;
	--text-body:    1rem;
	--text-h6:      1.125rem;
	--text-h5:      1.333rem;
	--text-h4:      1.777rem;
	--text-h3:      2.369rem;
	--text-h2:      3.157rem;
	--text-h1:      4.209rem;
	--text-display: clamp(4.5rem, 8vw, 7.5rem);

	/* Letter spacing */
	--tracking-uppercase:  0.08em;
	--tracking-display:   -0.03em;
	--tracking-body:       0.005em;
	--tracking-tight:     -0.02em;

	/* Line height */
	--leading-heading:  1.15;
	--leading-body:     1.75;
	--leading-tight:    1.1;

	/* Font families */
	--font-display: 'Cormorant Garamond', 'Georgia', serif;
	--font-body:    'Outfit', 'Helvetica Neue', sans-serif;
	--font-display-weight: 300;
	--font-body-weight:    300;

	/* Colors — Opulence fallback */
	--color-bg-primary:       #0A0A0A;
	--color-bg-secondary:     #111111;
	--color-bg-elevated:      #1A1A18;
	--color-surface:          #242420;
	--color-text-primary:     #E8E4DC;
	--color-text-secondary:   #9A9590;
	--color-text-heading:     #F5F0E8;
	--color-accent:           #C9A96E;
	--color-accent-hover:     #D4B87A;
	--color-accent-muted:     rgba(201, 169, 110, 0.12);
	--color-border:           #2A2A26;
	--color-border-subtle:    #1E1E1C;
	--color-overlay:          rgba(10, 10, 10, 0.65);
	--color-gradient-start:   #0A0A0A;
	--color-gradient-end:     transparent;

	/* Component tokens */
	--btn-radius:          0px;
	--card-radius:         0px;
	--card-shadow:         none;
	--card-padding:        2rem;
	--input-radius:        0px;
	--section-divider-width: 60px;

	/* Animation tokens */
	--ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--duration-fast:   200ms;
	--duration-medium: 300ms;
	--duration-slow:   600ms;
}

@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;
	}
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-lg);
	padding-right: var(--space-lg);
}

.container--narrow { max-width: 720px; }
.container--wide   { max-width: 1440px; }
.container--tight  { max-width: 640px; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
	padding-top: var(--space-4xl);
	padding-bottom: var(--space-4xl);
	position: relative;
}

.section--alt      { background-color: var(--color-bg-secondary); }
.section--elevated { background-color: var(--color-bg-elevated); }
.section--flush    { padding: 0; }

/* Testimonial: generous 128px padding, 40px divider */
.section--testimonial {
	padding-top: var(--space-5xl);
	padding-bottom: var(--space-5xl);
}

.section--testimonial .section-divider {
	width: 40px;
	height: 1px;
}

.section--hero {
	padding: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

@media (max-width: 767px) {
	.section {
		padding-top: var(--space-3xl);
		padding-bottom: var(--space-3xl);
	}
}

/* Section Divider */
.section-divider {
	width: var(--section-divider-width);
	height: 1px;
	background-color: var(--color-accent);
	opacity: 0.4;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.visually-hidden:focus {
	position: fixed;
	top: var(--space-sm);
	left: var(--space-sm);
	width: auto;
	height: auto;
	padding: var(--space-sm) var(--space-md);
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--color-accent);
	color: var(--color-bg-primary);
	z-index: 100000;
	font-size: var(--text-sm);
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

/* --------------------------------------------------------------------------
   Image Utilities
   -------------------------------------------------------------------------- */

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

.aspect-3-4  { aspect-ratio: 3 / 4; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-1-1  { aspect-ratio: 1 / 1; }

.img-zoom          { overflow: hidden; }
.img-zoom img      { transition: transform 600ms var(--ease-out); }
.img-zoom:hover img { transform: scale(1.03); }

/* --------------------------------------------------------------------------
   Text Utilities
   -------------------------------------------------------------------------- */

.text-center { text-align: center; }
.text-accent { color: var(--color-accent); }
.text-muted  { color: var(--color-text-secondary); }