/*
 * SIMPulse base layer: reset, ground, typography defaults.
 * Ported from design/DESIGN-SYSTEM.md §7 (global base styles) and §2 (typography roles).
 * Every value comes from tokens.css -- no literals below except 0, 100% and 1px.
 */

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

/*
 * `hidden` means hidden, whatever a component says.
 *
 * The browser's own rule is `[hidden] { display: none }` at UA weight, which
 * ANY class carrying a `display` beats — so a component styled
 * `display: flex` silently stops being hideable, and the markup that ships
 * `hidden` renders anyway. It is a quiet failure: nothing errors, the element
 * is simply there.
 *
 * This theme met it twice and patched it twice, in `modal.css` and in
 * `glossary.css`, the second with a comment explaining the same thing. A third
 * component finding out the hard way — the checkout, whose five steps all
 * appeared at once — is enough. It belongs here, once, where every component
 * gets it.
 *
 * `!important` is the point rather than a shortcut: whether an element exists
 * for the reader is not a layout question, and no component's `display` should
 * be able to argue with it.
 */
[hidden] {
	display: none !important;
}

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

html,
body {
	margin: 0;
	padding: 0;
	background: var(--sp-bg);
	color: var(--sp-text);
	overflow-x: hidden;
}

body {
	font-family: var(--sp-font-body);
	font-size: var(--sp-fs-base);
	line-height: var(--sp-lh-body);
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* The prototype's root wrapper. */
.simpulse {
	font-family: var(--sp-font-body);
	background: var(--sp-bg);
}

/* ---------------------------------------------------------------- links */

a {
	color: var(--sp-red);
	text-decoration: none;
	transition: color var(--sp-dur-fast) var(--sp-ease);
}

a:hover,
a:focus {
	color: var(--sp-text);
}

/* Inline contact links invert: white by default, red on hover. */
.sp-link-invert {
	color: var(--sp-text);
}

.sp-link-invert:hover,
.sp-link-invert:focus {
	color: var(--sp-red);
}

/* ---------------------------------------------------------------- focus */

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--sp-red);
	outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: none;
	border-color: var(--sp-red);
	box-shadow: 0 0 0 2px var(--sp-tint-red-25);
}

::selection {
	background: var(--sp-red);
	color: var(--sp-text);
}

/* ---------------------------------------------------------------- media */

img,
svg,
video,
canvas,
iframe {
	max-width: 100%;
}

img,
video {
	height: auto;
}

img {
	display: block;
	border: 0;
}

/* ----------------------------------------------------------- typography */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	line-height: var(--sp-lh-tight);
	color: var(--sp-text);
}

h1 {
	font-size: var(--sp-fs-h1-page);
	font-weight: 900;
	line-height: var(--sp-lh-display);
}

h2 {
	font-size: var(--sp-fs-h2);
}

h3 {
	font-size: var(--sp-fs-xl);
}

h4 {
	font-size: var(--sp-fs-lg);
}

h5 {
	font-size: var(--sp-fs-md);
}

h6 {
	font-size: var(--sp-fs-sm);
}

p {
	margin: 0 0 var(--sp-5);
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-60);
	text-wrap: pretty;
}

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

ul,
ol {
	margin: 0 0 var(--sp-5);
	padding-left: var(--sp-9);
	color: var(--sp-text-60);
}

li + li {
	margin-top: var(--sp-2);
}

blockquote {
	margin: 0 0 var(--sp-5);
	padding-left: var(--sp-6);
	border-left: var(--sp-border-accent);
	color: var(--sp-text-78);
	font-family: var(--sp-font-display);
	font-style: italic;
}

hr {
	height: 1px;
	margin: var(--sp-11) 0;
	border: 0;
	background: var(--sp-line-card);
}

code,
pre,
kbd {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-sm);
}

strong,
b {
	font-weight: 600;
	color: var(--sp-text);
}

table {
	width: 100%;
	border-collapse: collapse;
	color: var(--sp-text-60);
}

th,
td {
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--sp-line-card);
	text-align: left;
}

th {
	color: var(--sp-text);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
}

input,
button,
select,
textarea {
	font-family: var(--sp-font-body);
	font-size: inherit;
	border-radius: var(--sp-radius);
}

button {
	cursor: pointer;
}

/* ------------------------------------------- reusable display treatment */

/*
 * The brand: Barlow, italic, uppercase. Everything display-scale in the design
 * carries these three properties, so they are one class.
 */
.sp-display {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	line-height: var(--sp-lh-display);
	color: var(--sp-text);
}

.sp-display--900 {
	font-weight: 900;
}

.sp-display--700 {
	font-weight: 700;
}

.sp-display--600 {
	font-weight: 600;
}

.sp-display--500 {
	font-weight: 500;
}

.sp-display--hero {
	font-size: var(--sp-fs-hero);
	font-weight: 900;
	line-height: var(--sp-lh-hero);
}

.sp-display--lg {
	font-size: var(--sp-fs-display-lg);
	font-weight: 900;
}

.sp-display--md {
	font-size: var(--sp-fs-display);
	font-weight: 900;
}

/* The signature hero move: the lead word drops to weight 500. */
.sp-display__lead {
	font-weight: 500;
}

/* Lede paragraph: the only body copy set in italic Barlow. */
.sp-lede {
	margin: 0;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: var(--sp-fs-lede);
	line-height: var(--sp-lh-lede);
	color: var(--sp-text-82);
	text-transform: none;
	text-wrap: pretty;
}

/* Section lede: Poppins, dimmer. */
.sp-section-lede {
	margin: 0;
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-55);
	text-wrap: pretty;
}

/* Micro-label / eyebrow tag -- the single most common small type in the design. */
.sp-label {
	font-family: var(--sp-font-body);
	font-size: var(--sp-fs-micro);
	font-weight: 400;
	letter-spacing: var(--sp-ls-label);
	text-transform: uppercase;
	color: var(--sp-text-45);
}

.sp-label--red {
	color: var(--sp-red);
	letter-spacing: var(--sp-ls-tag);
}

.sp-muted {
	color: var(--sp-text-60);
}

.sp-nums {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ utilities */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed !important;
	top: var(--sp-2);
	left: var(--sp-2);
	z-index: var(--sp-z-toast);
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: var(--sp-3) var(--sp-5);
	background: var(--sp-red);
	color: var(--sp-text);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
}

.sp-modal-root:empty {
	display: none;
}

/* ------------------------------------------------------------- keyframes */

@keyframes riseIn {
	from {
		opacity: 0;
		transform: translateY(26px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}