/*===============================================
Pheasant Energy - Design Tokens
-----------------------------------------------
Single source of truth for the site typography
and colour palette. Loaded before style.css, so
every value below can be referenced with var()
from style.css and responsive.css.
===============================================*/

:root {

	/*-- Type families ------------------------*/
	--pe-font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--pe-font-body: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
	--pe-font-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;

	/*-- Type weights -------------------------*/
	--pe-fw-body: 400;
	--pe-fw-nav: 500;
	--pe-fw-strong: 600;   /* buttons + emphasis */
	--pe-fw-heading: 600;

	/*-- Type metrics -------------------------*/
	--pe-fs-base: 16px;
	--pe-lh-base: 1.6;
	--pe-mono-tracking: 2px;

	/*-- Core palette -------------------------*/
	--pe-primary-dark: #2A0F42; /* hero bg, dark CTA bands, footer, stat numerals */
	--pe-purple: #4D1979;       /* buttons + links */
	--pe-gold: #C8913F;         /* kickers, outline buttons on dark, link hover, timeline */
	--pe-purple-tint: #B8A3C9;  /* 40% purple on white: broader-footprint basins + legend */
	--pe-ink: #1F1826;          /* body text */
	--pe-tint: #FAF7F2;         /* tinted section background */
	--pe-rule: #E2D9CC;         /* rules, card borders, dividers */
	--pe-white: #fff;

	/*-- Derived tones ------------------------*/
	--pe-ink-muted: #6E6577;                   /* placeholders, meta text */
	--pe-purple-hover: var(--pe-primary-dark); /* button hover */
	--pe-gold-hover: #B27E33;
	--pe-shadow: rgba(42, 15, 66, 0.18);
	--pe-shadow-soft: rgba(42, 15, 66, 0.08);
	--pe-on-dark-rule: rgba(255, 255, 255, 0.26);
}

/*===============================================
Typographic utilities
===============================================*/

/* Figures + labels: mono, uppercase, tracked out */
.pe-mono,
.kicker,
.pe-kicker,
.pe-label,
.pe-figure,
.pe-timeline__year,
.counters,
.counters-row .count,
#request-offer .number {
	font-family: var(--pe-font-mono);
	letter-spacing: var(--pe-mono-tracking);
	font-variant-numeric: tabular-nums;
}

/* Kickers sit above headings in gold */
.kicker,
.pe-kicker {
	display: block;
	font-size: 13px;
	font-weight: var(--pe-fw-strong);
	color: var(--pe-gold);
	margin-bottom: 12px;
}

/* Stat numerals read in the primary dark on light grounds */
.counters-row .count,
#request-offer .number {
	color: var(--pe-primary-dark);
	font-weight: var(--pe-fw-strong);
}

/* Secondary button: gold outline, for use on dark bands */
.pe-btn-outline {
	display: inline-block;
	font-family: var(--pe-font-body);
	font-weight: var(--pe-fw-strong);
	color: var(--pe-gold);
	background: transparent;
	border: 1px solid var(--pe-gold);
	border-radius: 6px;
	padding: 17px 36px;
	line-height: normal;
	transition: 0.3s;
}
.pe-btn-outline:hover {
	color: var(--pe-primary-dark);
	background: var(--pe-gold);
	border-color: var(--pe-gold);
}

/* Timeline highlight */
.pe-timeline-highlight {
	border-left: 2px solid var(--pe-gold);
}