/**
 * Tijon Global Style Settings
 * Source: GLOBAL-STYLE-SETTINGS.pdf
 *
 * This file is the single source of truth for the Tijon design tokens.
 * Every value below maps 1:1 to a line in the style guide. If the style
 * guide is revised, change it here and nowhere else.
 */

:root {

	/* ---------------------------------------------------------------
	 * BRAND COLORS
	 * Listed darkest to lightest within each family.
	 * --------------------------------------------------------------- */

	/* Blues */
	--tijon-blue-900: #2B4852;   /* rgb(43,72,82)    - primary brand color */
	--tijon-blue-300: #BDDEE0;   /* rgb(189,222,224) */
	--tijon-blue-200: #D8EAEC;   /* rgb(216,234,236) */
	--tijon-blue-100: #F2F6F8;   /* rgb(242,246,248) */

	/* Greens */
	--tijon-green-300: #C8D39C;  /* rgb(200,211,156) */
	--tijon-green-200: #D1DAAC;  /* rgb(209,218,172) */
	--tijon-green-100: #E6E8D1;  /* rgb(230,232,209) */

	/* Neutrals */
	--tijon-neutral-400: #DAC1A2; /* rgb(218,193,162) */
	--tijon-neutral-300: #EADCCC; /* rgb(234,220,204) */
	--tijon-neutral-200: #F2E9E1; /* rgb(242,233,225) */
	--tijon-neutral-100: #FAF6F5; /* rgb(250,246,245) */

	/* Alternate
	 * NOTE: the style guide lists this as "#95A4A9 rgb(43,72,82)". The rgb
	 * value is a copy/paste error in the source document - #95A4A9 is
	 * actually rgb(149,164,169). The hex is authoritative and is used here. */
	--tijon-alt: #95A4A9;         /* rgb(149,164,169) */

	/* Semantic aliases - use these in components, not the raw scale */
	--tijon-text:            var(--tijon-blue-900);
	/*
	 * Secondary text. NOT --tijon-alt: that brand grey is only 2.6:1 on white,
	 * which fails WCAG AA (4.5:1) and even the large-text threshold, so it is
	 * unreadable as body copy. This is the same hue darkened to 6.6:1 - well
	 * clear of AA, because the body font is Light (300) and thin strokes read
	 * fainter than their measured ratio suggests.
	 * --tijon-alt stays available for borders, rules and decorative fills.
	 */
	--tijon-text-muted:      #4C6069;
	--tijon-heading:         var(--tijon-blue-900);
	--tijon-link:            var(--tijon-blue-900);
	--tijon-surface:         #FFFFFF;
	--tijon-surface-muted:   var(--tijon-blue-100);
	/*
	 * The tinted band the document cards sit on. blue-100 was too close to
	 * white (1.09:1) for the white cards to read as cards at all; blue-200
	 * lifts that to 1.24:1, which is enough to see an edge.
	 */
	--tijon-surface-tint:    var(--tijon-blue-200);
	--tijon-surface-panel:   var(--tijon-alt);  /* the blue-grey content panels in the portal */
	--tijon-border:          rgba(43, 72, 82, 0.15);
	--tijon-on-dark:         #FFFFFF;

	/* ---------------------------------------------------------------
	 * TYPOGRAPHY
	 * Karin and Sofia Pro are licensed fonts and are not bundled.
	 * Drop the web font files into assets/fonts/ to activate them -
	 * see assets/fonts/README.md. Until then the fallbacks below apply.
	 * --------------------------------------------------------------- */

	--tijon-font-display: "Karin", "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
	--tijon-font-body: "Sofia Pro", "Poppins", "Century Gothic", "Segoe UI", -apple-system,
		BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

	/* Heading One (H1) - Karin Regular */
	--tijon-h1-family: var(--tijon-font-display);
	--tijon-h1-weight: 400;
	--tijon-h1-size: 53px;
	--tijon-h1-spacing: 0.02em;
	--tijon-h1-transform: uppercase;
	--tijon-h1-leading: 0.8em;

	/* Heading Two (H2) - Karin Regular */
	--tijon-h2-family: var(--tijon-font-display);
	--tijon-h2-weight: 400;
	--tijon-h2-size: 27px;
	--tijon-h2-spacing: 0.075em;
	--tijon-h2-transform: uppercase;
	--tijon-h2-leading: 1em;

	/* Heading Three (H3) - Sofia Pro Medium */
	--tijon-h3-family: var(--tijon-font-body);
	--tijon-h3-weight: 500;
	--tijon-h3-size: 17px;
	--tijon-h3-spacing: 0.18em;
	--tijon-h3-transform: uppercase;
	--tijon-h3-leading: 1.8em;

	/* Body Text (P) - Sofia Pro Light */
	--tijon-body-family: var(--tijon-font-body);
	--tijon-body-weight: 300;
	--tijon-body-size: 14px;
	--tijon-body-spacing: 0.04em;
	--tijon-body-transform: none;
	--tijon-body-leading: 1.8em;

	/* Buttons - Sofia Pro Medium */
	--tijon-btn-padding: 10px 40px;
	--tijon-btn-bg: var(--tijon-blue-900);
	--tijon-btn-color: #FFFFFF;
	--tijon-btn-family: var(--tijon-font-body);
	--tijon-btn-weight: 500;
	--tijon-btn-size: 10px;
	--tijon-btn-spacing: 0.2em;
	--tijon-btn-transform: uppercase;

	/* Primary navigation - Sofia Pro Medium */
	--tijon-nav-family: var(--tijon-font-body);
	--tijon-nav-weight: 500;
	--tijon-nav-size: 12px;
	--tijon-nav-spacing: 0.05em;
	--tijon-nav-transform: uppercase;
	--tijon-nav-link-spacing: 1.06em;

	/* ---------------------------------------------------------------
	 * HEADER FORMATTING
	 * --------------------------------------------------------------- */
	--tijon-header-space-x: 40px;   /* Element Spacing (Horizontal) */
	--tijon-header-space-y: 30px;   /* Element Spacing (Vertical)   */
	--tijon-logo-width: 227px;      /* Logo Width                   */

	/*
	 * Header bar height. The style guide gives a logo width (227px) but no bar
	 * height; the portal header is a fixed 60px band, so the logo is capped by
	 * height and its width scales below the 227px maximum.
	 */
	--tijon-header-height: 60px;
	--tijon-logo-height: 38px;

	/* ---------------------------------------------------------------
	 * LAYOUT (not in the style guide - portal-specific)
	 * --------------------------------------------------------------- */
	--tijon-container: 1140px;
	--tijon-container-wide: 1400px;
	--tijon-gutter: 24px;
	--tijon-radius: 0px;         /* buttons stay square, per the style guide */
	--tijon-radius-card: 3px;    /* cards and rows: just enough to read as modern */
	--tijon-transition: 180ms ease;
}


/* ===================================================================
 * BASE TYPOGRAPHY
 * =================================================================== */

body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--tijon-body-family);
	font-weight: var(--tijon-body-weight);
	font-size: var(--tijon-body-size);
	letter-spacing: var(--tijon-body-spacing);
	line-height: var(--tijon-body-leading);
	text-transform: var(--tijon-body-transform);
	color: var(--tijon-text);
	background-color: var(--tijon-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p {
	font-family: var(--tijon-body-family);
	font-weight: var(--tijon-body-weight);
	font-size: var(--tijon-body-size);
	letter-spacing: var(--tijon-body-spacing);
	line-height: var(--tijon-body-leading);
	color: var(--tijon-text);
	margin: 0 0 1.2em;
}

h1, .tijon-h1,
h2, .tijon-h2,
h3, .tijon-h3,
h4, h5, h6 {
	color: var(--tijon-heading);
	margin: 0 0 0.6em;
}

h1, .tijon-h1 {
	font-family: var(--tijon-h1-family);
	font-weight: var(--tijon-h1-weight);
	font-size: var(--tijon-h1-size);
	letter-spacing: var(--tijon-h1-spacing);
	text-transform: var(--tijon-h1-transform);
	line-height: var(--tijon-h1-leading);
}

h2, .tijon-h2 {
	font-family: var(--tijon-h2-family);
	font-weight: var(--tijon-h2-weight);
	font-size: var(--tijon-h2-size);
	letter-spacing: var(--tijon-h2-spacing);
	text-transform: var(--tijon-h2-transform);
	line-height: var(--tijon-h2-leading);
}

h3, .tijon-h3 {
	font-family: var(--tijon-h3-family);
	font-weight: var(--tijon-h3-weight);
	font-size: var(--tijon-h3-size);
	letter-spacing: var(--tijon-h3-spacing);
	text-transform: var(--tijon-h3-transform);
	line-height: var(--tijon-h3-leading);
}

/* H4-H6 are not defined in the style guide. They step down from H3 and
 * keep the same family so long documents stay consistent. */
h4 {
	font-family: var(--tijon-h3-family);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.8em;
}

h5,
h6 {
	font-family: var(--tijon-h3-family);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.8em;
}

a {
	color: var(--tijon-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--tijon-transition), opacity var(--tijon-transition);
}

a:hover,
a:focus {
	opacity: 0.7;
}


/* ===================================================================
 * BUTTONS
 * =================================================================== */

.tijon-btn,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link {
	display: inline-block;
	padding: var(--tijon-btn-padding);
	background-color: var(--tijon-btn-bg);
	color: var(--tijon-btn-color);
	font-family: var(--tijon-btn-family);
	font-weight: var(--tijon-btn-weight);
	font-size: var(--tijon-btn-size);
	letter-spacing: var(--tijon-btn-spacing);
	text-transform: var(--tijon-btn-transform);
	line-height: 1.8em;
	text-decoration: none;
	border: 1px solid var(--tijon-btn-bg);
	border-radius: var(--tijon-radius);
	cursor: pointer;
	transition: background-color var(--tijon-transition), color var(--tijon-transition);
}

.tijon-btn:hover,
.tijon-btn:focus,
button:hover,
input[type="submit"]:hover {
	background-color: transparent;
	color: var(--tijon-btn-bg);
	opacity: 1;
}

/* Inverted primary - for use on the dark blue background */
.tijon-btn--inverted {
	background-color: #FFFFFF;
	color: var(--tijon-blue-900);
	border-color: #FFFFFF;
}

.tijon-btn--inverted:hover,
.tijon-btn--inverted:focus {
	background-color: transparent;
	color: #FFFFFF;
}


/* ===================================================================
 * FORM FIELDS
 * =================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
	width: 100%;
	padding: 10px 14px;
	font-family: var(--tijon-body-family);
	font-weight: var(--tijon-body-weight);
	font-size: var(--tijon-body-size);
	letter-spacing: var(--tijon-body-spacing);
	color: var(--tijon-text);
	background-color: #FFFFFF;
	border: 1px solid var(--tijon-border);
	border-radius: var(--tijon-radius);
	transition: border-color var(--tijon-transition);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--tijon-blue-900);
}


/* ===================================================================
 * ACCESSIBILITY
 * =================================================================== */

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

.screen-reader-text:focus {
	background-color: #FFFFFF;
	clip: auto !important;
	clip-path: none;
	color: var(--tijon-blue-900);
	display: block;
	font-size: 14px;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--tijon-blue-900);
	outline-offset: 2px;
}