/* Base typography + element styling — Cream Chargers USA */

body {
	background: var(--ccu-cream);
	color: var(--ccu-ink);
	font-family: var(--ccu-font-body);
	font-size: var(--ccu-size-body);
	line-height: var(--ccu-leading-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.ccu-heading {
	font-family: var(--ccu-font-display);
	font-weight: 600;
	color: var(--ccu-ink);
	line-height: var(--ccu-leading-tight);
	letter-spacing: -0.01em;
	margin: 0 0 var(--ccu-space-4);
}

h1, .ccu-h1 { font-size: var(--ccu-size-h1); }
h2, .ccu-h2 { font-size: var(--ccu-size-h2); }
h3, .ccu-h3 { font-size: var(--ccu-size-h3); line-height: var(--ccu-leading-snug); }
h4, .ccu-h4 { font-size: var(--ccu-size-h4); line-height: var(--ccu-leading-snug); }

p { margin: 0 0 var(--ccu-space-4); max-width: 62ch; }

a {
	color: var(--ccu-copper-dark);
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
a:hover, a:focus-visible {
	color: var(--ccu-copper);
	text-decoration: underline;
	text-decoration-color: currentColor;
}

/* An eyebrow label — the small caps kicker above section headings.
   Doing this once, well, buys "considered" more cheaply than almost anything else. */
.ccu-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--ccu-space-2);
	font-family: var(--ccu-font-mono);
	font-size: var(--ccu-size-eyebrow);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ccu-copper-dark);
	margin-bottom: var(--ccu-space-3);
}
.ccu-eyebrow::before {
	content: "";
	display: inline-block;
	width: 1.4em;
	height: 1px;
	background: currentColor;
}

.ccu-container {
	max-width: var(--ccu-content-width);
	margin-inline: auto;
	padding-inline: var(--ccu-space-6);
}
.ccu-container--narrow { max-width: var(--ccu-content-width-narrow); }

.ccu-section {
	padding-block: var(--ccu-space-24);
}
.ccu-section--tight { padding-block: var(--ccu-space-16); }
.ccu-section--ink {
	background: var(--ccu-ink);
	color: var(--ccu-cream);
}
.ccu-section--ink h1, .ccu-section--ink h2, .ccu-section--ink h3 { color: var(--ccu-white); }
.ccu-section--ink p { color: var(--ccu-steel-mist); }

/* Buttons — square-ish, not the default rounded-pill every template ships with */
.ccu-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ccu-space-2);
	font-family: var(--ccu-font-body);
	font-weight: 600;
	font-size: var(--ccu-size-small);
	letter-spacing: 0.01em;
	padding: 0.85em 1.6em;
	border-radius: var(--ccu-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	text-decoration: none !important;
}
.ccu-btn--primary {
	background: var(--ccu-copper);
	color: var(--ccu-white);
}
.ccu-btn--primary:hover { background: var(--ccu-copper-dark); color: var(--ccu-white); }
.ccu-btn--ghost {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}
.ccu-btn--ghost:hover { background: rgba(255,255,255,0.08); }
.ccu-section:not(.ccu-section--ink) .ccu-btn--ghost {
	border-color: var(--ccu-ink);
	color: var(--ccu-ink);
}
.ccu-section:not(.ccu-section--ink) .ccu-btn--ghost:hover { background: var(--ccu-cream-deep); }

.ccu-card {
	background: var(--ccu-white);
	border: var(--ccu-border);
	border-radius: var(--ccu-radius-md);
	box-shadow: var(--ccu-shadow-card);
	padding: var(--ccu-space-8);
}

.ccu-tag {
	display: inline-block;
	font-family: var(--ccu-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3em 0.6em;
	border: 1px solid var(--ccu-line);
	border-radius: var(--ccu-radius-sm);
	color: var(--ccu-steel);
}

.ccu-hr {
	border: none;
	border-top: 1px solid var(--ccu-line);
	margin: var(--ccu-space-12) 0;
}

::selection {
	background: var(--ccu-copper-tint);
	color: var(--ccu-ink);
}