/*
 * Summer's End Angus: design tokens.
 * Everything in this file is a custom property or an @font-face.
 * Nobody redefines these values anywhere else.
 */

/* ---------------------------------------------------------------- fonts */

@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/barlow-condensed-800.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('../fonts/barlow-condensed-900.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow Semi Condensed';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/barlow-semi-condensed-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow Semi Condensed';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/barlow-semi-condensed-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow Semi Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/barlow-semi-condensed-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/barlow-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/barlow-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/barlow-600.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}

/* --------------------------------------------------------------- tokens */

:root {
	/* surfaces */
	--se-black: #0B0A09;
	--se-night: #14110F;
	--se-field: #211C18;
	--se-cocoa: #1D140F;
	--se-cocoa2: #2E1D15;
	--se-cocoa3: #4A3226;

	/* warm accents */
	--se-copper: #C8865F;
	--se-peach: #E3A883;

	/* paper */
	--se-bone: #F3EEE5;
	--se-bone2: #E7DFD2;

	/* signal */
	--se-red: #B3261E;
	--se-red-hot: #D0342A;
	--se-tab-edge: #CA8881;

	/*
	 * QA-MOBILE added --se-red-text. --se-red-hot on --se-black measures
	 * 3.96:1, which passes AA for large type only, and the design uses red at
	 * 12 to 18px in the index numerals, the note band label and the active FAQ,
	 * legal and gallery chips. This is the same red lifted until it clears 4.5:1
	 * on both black (4.82:1) and --se-night (4.58:1), which is where the note
	 * band label sits. Use --se-red-hot for anything 24px and over, for hover
	 * states and for focus rings, and --se-red-text below that.
	 */
	--se-red-text: #DC4B3C;

	/* greys */
	--se-grey: #9A948B;
	--se-grey-dark: #5E5850;

	/* text on dark */
	--se-text: var(--se-bone);
	--se-text-soft: rgba(243, 238, 229, 0.82);
	--se-text-mute: rgba(243, 238, 229, 0.70);
	--se-text-ghost: rgba(243, 238, 229, 0.15);

	/* families */
	--se-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--se-font-label: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
	--se-font-body: 'Barlow', system-ui, sans-serif;
	--se-font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

	/* rhythm. Side padding is 64px at 1920 and scales with the root size. */
	--se-pad: clamp(1.25rem, 3.333vw, 4rem);
	--se-gap: clamp(1.5rem, 3vw, 3.5rem);
	--se-block: clamp(3.5rem, 7.3vw, 8.75rem);
	--se-header-h: clamp(4.5rem, 6.875vw, 8.25rem);

	/* motion */
	--se-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--se-dur: 200ms;

	/* the rounded CRT frame */
	--se-screen-radius: clamp(1rem, 2.34vw, 2.25rem);
	--se-screen-radius-sm: clamp(0.75rem, 1.82vw, 1.75rem);
}

/*
 * The fluid scale that stops the design becoming an A4 island on a big screen.
 * Up to 1920 the root stays 16px and layout is fluid through vw and percent.
 * Above 1920 the root grows with the viewport, so 2560 gives 21.33px and
 * 3840 gives 32px: a 4K screen shows the 1920 design at 2x, edge to edge.
 */
html {
	font-size: 16px;
}

@media (min-width: 1921px) {
	html {
		font-size: calc(100vw / 120);
	}
}