/* ═══════════════════════════════════════════════════════════════════════
   ZeroPoint Ammo — Core Design System
   Single source of truth for all visual tokens, typography, and shared styles.
   Change it here, change it everywhere.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design Tokens ── */
:root {
	/* Light palette — warm, inviting */
	--white:        #ffffff;
	--snow:         #faf9f7;
	--cream:        #f5f3ee;
	--sand:         #ebe7df;
	--warm-gray:    #d4cfc7;
	--stone:        #a39e95;
	--text-muted:   #7a756c;
	--text-body:    #5a564f;
	--text-dark:    #2c2a26;
	--text-black:   #1a1816;

	/* Brand red */
	--red:          #c73b36;
	--red-dark:     #a12e2a;
	--red-light:    #d94f4a;
	--red-subtle:   rgba(199, 59, 54, 0.07);
	--red-glow:     rgba(199, 59, 54, 0.12);

	/* Mimi's sun — warm golden moments */
	--sun:          #d4a853;
	--sun-glow:     rgba(212, 168, 83, 0.08);
	--sun-soft:     rgba(212, 168, 83, 0.15);

	/* FDE — tactical warmth */
	--olive:        #a08b6d;
	--olive-light:  #bfa882;

	/* Dark — for contrast sections (warm neutral) */
	--dark:         #1f1e1c;
	--dark-surface: #27251f;
	--dark-border:  rgba(255, 255, 255, 0.06);

	/* Legacy aliases — so existing pages don't break during migration */
	--black:        #1a1816;
	--off-black:    #1f1e1c;
	--mid:          #5a564f;
	--border:       #ebe7df;
	--muted:        #7a756c;
	--light:        #a39e95;
	--off-white:    #faf9f7;
	--brass:        #c73b36;
	--brass-dark:   #a12e2a;
	--brass-light:  #d94f4a;
	--cream-dark:   #ebe7df;
	--green:        #a08b6d;

	/* Typography */
	--font:         'Outfit', system-ui, -apple-system, sans-serif;

	/* Spacing scale */
	--space-xs:     0.5rem;
	--space-sm:     1rem;
	--space-md:     2rem;
	--space-lg:     4rem;
	--space-xl:     6rem;
	--space-2xl:    8rem;

	/* Container */
	--container-max: 1200px;
	--container-narrow: 720px;
	--container-pad: 2rem;
}


/* ── Base ── */
html { scroll-behavior: smooth; }

body {
	font-family: var(--font);
	background: var(--snow);
	color: var(--text-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }


/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font);
	color: var(--text-black);
	line-height: 1.15;
}

/* ── Layout ── */
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

.narrow {
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

section {
	padding: var(--space-xl) 0;
}


/* ── Shared Label ── */
.label {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--red);
}


/* ── Buttons ── */
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 2rem;
	background: var(--red);
	color: var(--white);
	font-family: var(--font);
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 3px;
	border: none;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s;
}

.btn-primary:hover {
	background: linear-gradient(135deg, var(--red-light), var(--sun));
	transform: translateY(-1px);
	box-shadow: 0 6px 24px var(--sun-glow);
}

.btn-primary svg {
	width: 14px;
	height: 14px;
	transition: transform 0.2s;
}

.btn-primary:hover svg { transform: translateX(3px); }

.btn-outline {
	display: inline-block;
	padding: 0.85rem 2rem;
	font-family: var(--font);
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--text-dark);
	border: 1px solid var(--warm-gray);
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.btn-outline:hover {
	border-color: var(--stone);
	color: var(--text-black);
}


/* ── Section Headings (reusable) ── */
.section-heading {
	font-family: var(--font);
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	font-weight: 800;
	color: var(--text-black);
	letter-spacing: 0;
	text-transform: uppercase;
	line-height: 1.15;
}

.section-sub {
	font-size: 0.92rem;
	color: var(--text-muted);
	line-height: 1.8;
}


/* ── Scroll Reveal ── */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

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

@keyframes fadeUp {
	to { opacity: 1; transform: translateY(0); }
}


/* ── Mobile Foundation ── */
@media (max-width: 768px) {
	:root {
		--container-pad: 1.5rem;
	}

	section {
		padding: 4.5rem 0;
	}
}