/* ============================================================
   Design tokens and fonts, ported from runs-on.com
   (src/styles/design-tokens.css and the --rl-* tokens of
   src/styles/site-look.css) so go.runs-on.com and runs-on.com read as
   one product. Keep the values in step with runs-on.com; component
   styles live in base.css and finder.css. The site is light only.

   IBM Plex Sans and Mono (SIL OFL 1.1, fonts/OFL.txt), the latin subset
   from @fontsource 5.2.8, served from /static/fonts: only the weights the
   pages use (mono 400-700, sans 400 and 600). Text in other scripts falls
   back to the metric-matched local fonts below.
   ============================================================ */
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-display: swap;
	font-weight: 600;
	src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 600;
	src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 700;
	src: url("../fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Metric-matched local fallbacks, so the swap to Plex doesn't rewrap the
   headings (values from runs-on.com, computed with @capsizecss/unpack). */
@font-face {
	font-family: "IBM Plex Sans Fallback";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
	font-weight: 100 500;
	size-adjust: 101.17%;
	ascent-override: 101.32%;
	descent-override: 27.18%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "IBM Plex Sans Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold");
	font-weight: 600 900;
	size-adjust: 97.3%;
	ascent-override: 105.34%;
	descent-override: 28.26%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "IBM Plex Mono Fallback";
	src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono");
	font-weight: 100 500;
	size-adjust: 99.98%;
	ascent-override: 102.52%;
	descent-override: 27.5%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "IBM Plex Mono Fallback";
	src: local("Courier New Bold"), local("CourierNewPS-BoldMT"), local("Liberation Mono Bold");
	font-weight: 600 900;
	size-adjust: 99.98%;
	ascent-override: 102.52%;
	descent-override: 27.5%;
	line-gap-override: 0%;
}

:root {
	/* typography */
	--mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--sans: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

	color-scheme: light;

	/* ink & paper (monochrome core) */
	--paper: #ffffff;
	--paper-2: #f8f8f8;
	--paper-3: #f1f1f1;
	--ink: #101010;
	--ink-2: #484848;
	--faint: #6e6e6e; /* >= 4.5:1 on paper, paper-2 and paper-3 */
	--ink-4: #a0a0a0; /* faintest labels / separators */
	--line: #e6e6e6;
	--line-2: #d4d4d4;

	/* text on the yellow accent fill: always --on-accent, never --ink */
	--on-accent: #101010;

	/* the one accent: a fill, never text on paper (use --accent-ink for that) */
	--accent: #f0c868;
	--accent-2: #e3b649;
	--accent-hover: #f3d27e;
	--accent-wash: #fbf2da;
	--accent-ink: #866610; /* the accent as small text on paper (>= 4.5:1) */

	/* terminal / code surface */
	--code-bg: #101010;
	--code-ink: #e8e8e8;
	--code-faint: #8a8a8a;
	--code-amber: #f0c868;

	/* semantic signals, used sparingly */
	--green: #2a7640;
	--red: #b83a2e;

	--maxw: 1080px;
	--gutter: clamp(20px, 5vw, 56px);
	/* data pages are wider than the reading column, like runs-on.com's EC2 board */
	--maxw-data: 84rem;

	/* motion */
	--dur-fast: 140ms;
	--dur-med: 320ms;
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* the panel look (site-look.css): grained canvas, paper panels in a 2px
	   ink frame with a hard offset shadow */
	--rl-canvas: #eeeeec;
	--rl-panel: var(--paper);
	--rl-frame-c: var(--ink);
	--rl-frame: 2px solid var(--rl-frame-c);
	--rl-hard: #cdcdc9;
	--rl-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.1 .62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
	--rl-hatch-line: rgba(16, 16, 16, 0.45);
	--rl-soft-line: rgba(16, 16, 16, 0.28);
	--rl-hatch: repeating-linear-gradient(-45deg, var(--rl-hatch-line) 0 1.2px, transparent 1.2px 5px);
}
/* --faint is 4.5:1 on paper; on the grey canvas it needs a step darker */
body.site-canvas {
	--faint: #626262;
}