/*
 * Multicharts Universe — Base
 *
 * Applies the Celestial Luxury baseline on top of Storefront defaults.
 * Resets harmful inherited styles, sets dark cosmic background, and
 * establishes typography rhythm for prose / headings / links / forms.
 *
 * No component-specific rules here — those live in /assets/css/<module>.css.
 */

/* === Box sizing reset =================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* === Cosmic body background (site-wide, all pages) ====================
 * Five-layer fixed background so every page — not just the hero — feels
 * like part of the same observatory:
 *   1. Top-center warm gold glow
 *   2. Bottom-right deep gold glow
 *   3. Vertical observatory grid (1px gold lines @ 140px)
 *   4. Horizontal observatory grid
 *   5. Top-to-bottom void → deep-space gradient base
 * The hero adds its own denser starfield + orbits + nebula on top.
 */
body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--color-text-primary);
	background-color: var(--color-void);
	background-image:
		radial-gradient(ellipse at 50% 0%,   rgba(212, 175, 55, 0.07) 0%, transparent 55%),
		radial-gradient(ellipse at 80% 100%, rgba(139, 105, 20, 0.06) 0%, transparent 60%),
		linear-gradient(0deg,  rgba(212, 175, 55, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(212, 175, 55, 0.025) 1px, transparent 1px),
		linear-gradient(180deg, var(--color-void) 0%, var(--color-deep-space) 100%);
	background-size: 100% 100%, 100% 100%, 140px 140px, 140px 140px, 100% 100%;
	background-attachment: fixed;
	background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
	overflow-x: hidden;
}

/* Sparse fixed star field — paints over the body bg, behind all content.
 * Uses box-shadow constellation technique like the hero (much sparser here
 * so it doesn't compete with the hero's dense starfield on the home page).
 */
body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: transparent;
	pointer-events: none;
	z-index: -1;
	box-shadow:
		18vw  7vh 0 0.5px rgba(255,255,255,0.5), 73vw 14vh 0 0.5px rgba(255,248,231,0.45),
		47vw 31vh 0 0.5px rgba(255,255,255,0.4), 12vw 88vh 0 0.5px rgba(255,255,255,0.45),
		95vw 67vh 0 0.5px rgba(255,248,231,0.4),  8vw 49vh 0 0.5px rgba(255,255,255,0.5),
		34vw 75vh 0 0.5px rgba(255,255,255,0.45), 67vw 92vh 0 0.5px rgba(255,248,231,0.4),
		84vw 22vh 0 0.5px rgba(255,255,255,0.5), 51vw 58vh 0 0.5px rgba(255,255,255,0.4),
		28vw 41vh 0 0.5px rgba(255,255,255,0.45), 62vw  7vh 0 0.5px rgba(255,248,231,0.4),
		 3vw 36vh 0 0.5px rgba(255,255,255,0.45), 79vw 84vh 0 0.5px rgba(255,255,255,0.4),
		41vw 11vh 0 0.5px rgba(255,248,231,0.45), 56vw 25vh 0 0.5px rgba(255,255,255,0.5);
	opacity: 0.6;
}

/* === Typography rhythm ================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	margin: 0 0 var(--space-md);
	font-family: var(--font-display);
	font-weight: var(--weight-regular);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-primary);
}

h1, .h1 { font-size: var(--text-4xl); }
h2, .h2 { font-size: var(--text-3xl); }
h3, .h3 { font-size: var(--text-2xl); }
h4, .h4 { font-size: var(--text-xl); }
h5, .h5 { font-size: var(--text-lg); }
h6, .h6 {
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	color: var(--color-gold);
}

/* Eyebrow utility — for "MARKET INTELLIGENCE · HUMAN PSYCHOLOGY · …" lines */
.eyebrow,
.mcu-eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-gold);
	margin: 0 0 var(--space-sm);
}

p {
	margin: 0 0 var(--space-md);
	color: var(--color-text-secondary);
	max-width: 65ch;  /* prose readability */
}

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

strong, b {
	font-weight: var(--weight-semibold);
	color: var(--color-text-primary);
}

em, i { font-style: italic; }

small { font-size: var(--text-sm); color: var(--color-text-muted); }

/* === Links ============================================================== */
a {
	color: var(--color-gold-bright);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--dur-base) var(--ease-out-soft),
	            color var(--dur-fast) var(--ease-celestial);
}

a:hover,
a:focus {
	color: var(--color-text-primary);
	background-size: 100% 1px;
}

a:focus-visible {
	outline: 2px solid var(--color-gold-bright);
	outline-offset: 4px;
	border-radius: var(--radius-xs);
}

/* === Lists ============================================================== */
ul, ol {
	padding-left: 1.25em;
	margin: 0 0 var(--space-md);
}

li { margin-bottom: var(--space-xs); }

/* === Code / mono ======================================================== */
code, kbd, samp, pre {
	font-family: var(--font-mono);
	font-size: 0.95em;
}

code {
	padding: 0.15em 0.4em;
	background: var(--color-stardust);
	border-radius: var(--radius-sm);
	color: var(--color-gold-bright);
}

pre {
	padding: var(--space-md);
	background: var(--color-cosmic-night);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	overflow-x: auto;
}

/* === Media ============================================================== */
img, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* === Horizontal rule — gold gradient line =============================== */
hr {
	border: 0;
	height: 1px;
	margin: var(--space-xl) 0;
	background: linear-gradient(90deg,
		transparent,
		var(--color-gold-deep),
		var(--color-gold),
		var(--color-gold-deep),
		transparent
	);
}

/* === Selection ========================================================== */
::selection {
	background: var(--color-gold);
	color: var(--color-text-on-gold);
}

/* === Forms baseline ===================================================== */
input, textarea, select, button {
	font: inherit;
	color: inherit;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: 0.75em 1em;
	background: var(--color-cosmic-night);
	color: var(--color-text-primary);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	transition: border-color var(--dur-fast) var(--ease-celestial),
	            box-shadow var(--dur-fast) var(--ease-celestial);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-gold-bright);
	box-shadow: var(--glow-gold-sm);
}

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

/* === Button baseline (component-specific styling layered in modules) ==== */
button,
.button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	padding: 0.875em 2em;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-on-gold);
	background: linear-gradient(135deg, var(--color-gold-bright) 0%, var(--color-gold) 100%);
	border: 1px solid var(--color-gold);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: transform var(--dur-fast) var(--ease-spring),
	            box-shadow var(--dur-base) var(--ease-celestial),
	            background var(--dur-base) var(--ease-celestial);
	background-size: 100% 100%;
}

button:hover,
.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	transform: translateY(-2px);
	box-shadow: var(--glow-gold-md);
	color: var(--color-text-on-gold);
}

button:active,
.button:active {
	transform: translateY(0);
}

/* Secondary / ghost variant */
.button.is-ghost,
.button--ghost {
	background: transparent;
	color: var(--color-gold-bright);
	border: 1px solid var(--color-border-default);
}

.button.is-ghost:hover,
.button--ghost:hover {
	background: var(--color-gold-veil);
	border-color: var(--color-gold);
	color: var(--color-gold-bright);
}

/* === Container utilities ================================================ */
.mcu-container {
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.mcu-container--narrow { max-width: var(--container-narrow); }
.mcu-container--medium { max-width: var(--container-medium); }
.mcu-container--extra  { max-width: var(--container-extra); }

/* === Visually hidden (a11y) ============================================= */
.mcu-sr-only,
.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;
}

/* === Storefront override: kill its light backgrounds & wp-admin chrome === */
.site,
.site-content,
.col-full,
.storefront-product-section,
.hentry,
.page-template-default .entry-content,
.site-main {
	background: transparent !important;
	color: var(--color-text-primary);
}

/* Keep the WP admin bar legible on dark background */
#wpadminbar { color-scheme: dark; }