/**
 * Design tokens, reset, and base typography.
 * Values captured from the live topsandbottomsusa.com computed styles.
 */

:root {
	/* Colors */
	--tb-white: #ffffff;
	--tb-black: #000000;
	--tb-text: rgb(26, 26, 26);
	--tb-text-nav: rgb(17, 17, 17);
	--tb-maroon: rgb(149, 26, 31);
	--tb-maroon-dark: rgb(149, 10, 15);
	--tb-header-bg: rgb(243, 243, 243);
	--tb-hero-heading: rgb(255, 247, 247);
	--tb-dark-panel: rgb(17, 17, 17);
	--tb-near-black: rgb(21, 21, 21);
	--tb-off-white: rgb(242, 242, 242);
	--tb-card-bg: rgb(245, 245, 245);
	--tb-footer-bg: rgb(26, 26, 26);
	--tb-border-soft: rgba(0, 0, 0, 0.34);
	--tb-border-hair: rgba(0, 0, 0, 0.1);

	/* Fonts */
	--tb-font-sans: system_ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--tb-font-display: "Bebas Neue", sans-serif;

	/* Layout */
	--tb-container-max: 1800px;
	--tb-container-gutter: 3rem;
	--tb-radius-pill: 9999px;
}

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

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

body {
	margin: 0;
	background: var(--tb-white);
	color: var(--tb-text);
	font: 14px/22.4px var(--tb-font-sans);
	letter-spacing: normal;
}

img,
svg {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
}

button {
	font-family: inherit;
	cursor: pointer;
}

h1,
h2,
h3,
h4,
p,
ul,
ol {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

.tb-container {
	max-width: var(--tb-container-max);
	margin-inline: auto;
	padding-inline: var(--tb-container-gutter);
}

.tb-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tb-full-bleed {
	width: 100vw;
	max-width: 1920px;
	margin-inline: calc(50% - 50vw);
}

.tb-icon-btn {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	display: inline-flex;
	align-items: center;
}