/* ---------------------------------------------------------------
 * Root tokens — ported from Oxygen root-css.txt.
 * Oxygen's color(1)..color(6) tokens have been replaced with hex
 * placeholders. Override in functions.php via ksm_settings option,
 * or edit here. PLACEHOLDER PALETTE — confirm with user.
 * --------------------------------------------------------------- */
:root {
	--primary:   #1a1a1a; /* color(1) — dark navy/charcoal */
	--secondary: #c8102e; /* color(2) — brand red */
	--accent:    #c8102e; /* color(3) — accent (same as secondary by default) */
	--light:     #ffffff; /* color(4) */
	--dark:      #222222; /* color(5) */
	--contrast:  #000000; /* color(6) */

	--shade-ultra-light: #e2e2e2;
	--accent-ultra-light: #fbfbfb;
	--page-bg: #ffffff;

	--text-xs: 1rem;
	--text-s: 1.4rem;
	--text-m: 2rem;
	--text-l: clamp(2rem, 1.6667rem + 1.0667vw, 3rem);
	--text-xl: clamp(2.5rem, 2rem + 1.6vw, 4rem);
	--text-xxl: clamp(3rem, 1.9437rem + 3.3803vw, 6rem);

	--grid-gap: 1rem;
	--space-xs: 1rem;
	--space-s: 2rem;
	--space-m: 4rem;
	--space-l: 6rem;
	--space-xl: 8rem;
	--space-xxl: 10rem;

	--section-space-m: var(--space-m);
	--section-padding-x: var(--space-s);

	--vp-max: 140;
	--base-space: 2;
}

/* TEXT */
:where([class*="text--"],h1,h2,h3,h4,h5,h6).text--larger {
	font-size: calc(var(--text-size) * var(--text-multiplier));
}
h1 { font-size: var(--text-xxl); --text-size: var(--text-xxl); line-height: 1.2; }
h2 { font-size: var(--text-xl);  --text-size: var(--text-xl);  line-height: 1.2; }
h3 { font-size: var(--text-l);   --text-size: var(--text-l); }
h4 { font-size: var(--text-m);   --text-size: var(--text-m); }

.text--xs { font-size: var(--text-xs); --text-size: var(--text-xs); }
.text--s  { font-size: var(--text-s);  --text-size: var(--text-s); }
.text--m  { font-size: var(--text-m);  --text-size: var(--text-m); }
.text--l  { font-size: var(--text-l);  --text-size: var(--text-l); }
.text--xl { font-size: var(--text-xl); --text-size: var(--text-xl); }
.text--xxl { font-size: var(--text-xxl); --text-size: var(--text-xxl); font-weight: 800; }
.text--hero { font-size: 4rem; font-weight: 800; }

.text--light { color: var(--light); }
.text--dark { color: var(--dark); }
.font--thin { font-weight: 300; }
.font--thick { font-weight: 700; }
.font-strong { font-weight: 700; }
.text--primary { color: var(--primary); }
.text--secondary { color: var(--secondary); }
.text--accent { color: var(--accent); }

.text-link--white a, .link--white a, .link--white { color: var(--light) !important; }
.text-link--white { color: var(--light) !important; }
.text-link--dark a { color: var(--dark); }
.text-link--primary a, .text-link--primary { color: var(--primary); }
.text-link--secondary a { color: var(--secondary); }
.text-link--secondary { color: var(--secondary) !important; }

.text-stroke-dark      { -webkit-text-stroke: 1px var(--dark); }
.text-stroke-light     { -webkit-text-stroke: 1px var(--light); }
.text-stroke-secondary { -webkit-text-stroke: 1px var(--secondary); }
.text-uppercase { text-transform: uppercase; }
.callout-text { font-size: var(--text-m); font-weight: 700; }

/* BUTTONS / BACKGROUNDS */
.btn--primary   { background-color: var(--primary); }
.btn--secondary { background-color: var(--secondary); }
.btn--accent    { background-color: var(--accent); }
.background-primary  { background-color: var(--primary); }
.background-secondary{ background-color: var(--secondary); }
.background-accent   { background-color: var(--accent); }
.background-contrast { background-color: var(--contrast); }
.background-white    { background-color: var(--light); }

/* LAYOUT */
.center-content { margin-left: auto; margin-right: auto; }
.text-align { text-align: center; }
.set-width      { width: 1400px !important; max-width: 100%; }
.set-width-1600 { width: 1600px !important; max-width: 100%; }
.set-height-600 { height: 600px; }
.set-height-500 { height: 500px; }
.set-height-400 { height: 400px; }
.width--50  { width: 50%; }
.width--80  { width: 80%; }
.width--100, .width-100 { width: 100%; }

/* FLEX HELPERS */
.flex--row { flex-direction: row; }
.flex--col { flex-direction: column; }
.flex--row-reverse { flex-direction: row-reverse; }
.flex--col-reverse { flex-direction: column-reverse; }
.flex--wrap { flex-wrap: wrap; }
.justify-content--start   { justify-content: flex-start; }
.justify-content--center  { justify-content: center; }
.justify-content--end     { justify-content: flex-end; }
.justify-content--between { justify-content: space-between; }
.justify-content--around  { justify-content: space-around; }
.align-items--start    { align-items: flex-start; }
.align-items--center   { align-items: center; }
.align-items--end      { align-items: flex-end; }
.align-items--baseline { align-items: baseline; }
.self--start   { align-self: flex-start; }
.self--end     { align-self: flex-end; }
.self--center  { align-self: center; }
.self--stretch { align-self: stretch; }
.display-flex   { display: flex; }
.display-block  { display: block; }
.display-grid   { display: grid; }
.display-inline { display: inline; }

/* GRIDS */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4rem; }
.grid-4-2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4rem; }
.grid-4-mobile-bar { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 992px) {
	.grid-4   { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }
	.grid-4-2 { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

/* SPACING */
.margin-top--xs { margin-top: var(--space-xs); }
.margin-top--s  { margin-top: var(--space-s); }
.margin-top--m  { margin-top: var(--space-m); }
.margin-top--l  { margin-top: var(--space-l); }
.margin-top--xl { margin-top: var(--space-xl); }
.margin-bottom--xs { margin-bottom: var(--space-xs); }
.margin-bottom--s  { margin-bottom: var(--space-s); }
.margin-bottom--m  { margin-bottom: var(--space-m); }
.margin-bottom--l  { margin-bottom: var(--space-l); }
.margin-bottom--xl { margin-bottom: var(--space-xl); }
.margin-middle--auto { margin-top: auto; margin-bottom: auto; }
.margin-center--auto { margin-left: auto; margin-right: auto; }
.gap--xs { gap: var(--space-xs); }
.gap--s  { gap: var(--space-s);  --grid-gap: var(--space-s); }
.gap--m  { gap: var(--space-m);  --grid-gap: var(--space-m); }
.gap--l  { gap: var(--space-l);  --grid-gap: var(--space-l); }
.gap--xl { gap: var(--space-xl); --grid-gap: var(--space-xl); }
.gap-xs  { gap: var(--space-xs); }
.pad--xs { padding: var(--space-xs); }
.pad--s  { padding: var(--space-s); }
.pad--m  { padding: var(--space-m); }
.pad--l  { padding: var(--space-l); }
.pad--xl { padding: var(--space-xl); }
.pad--top-m    { padding-top: var(--space-m); }
.pad--bottom-m { padding-bottom: var(--space-m); }

/* STICKY / BORDERS / MISC */
.sticky { position: sticky; top: 0; }
.sticky-top--l { top: 10%; }
.border-top-light    { border-top: 1px solid var(--shade-ultra-light); }
.border-bottom-light { border-bottom: 1px solid var(--shade-ultra-light); }
.border-primary   { border: 2px solid var(--primary); }
.border-secondary { border: 2px solid var(--secondary); }
.border-light     { border: 2px solid var(--light); }
.border-secondary-top { border-top: 2px solid var(--secondary); }
.border-dashed-light  { border: 4px dashed var(--light); }
.circle { border-radius: 200px; }

.bg--secondary-comp { --bg-color: var(--secondary); }
[class*="bg--"] { background-color: var(--bg-color); }

.hidden-nav { display: none; }
.font12 { font-size: 1.2rem; }