/*
  Design tokens for pyxiion.dev.

  Concept: the page is laid out like a linker map — hard-edged regions, each
  carrying a real measured value. Hence: zero radii, hairline rules, one signal
  colour, monospace for every number so columns line up.

  Typeface: IBM Plex. It is an engineering typeface with a matching mono and
  full Cyrillic coverage, which this site needs because posts are written in
  English and Russian. Vendored woff2 subsets from @fontsource/ibm-plex-sans
  and @fontsource/ibm-plex-mono, both pinned at 5.3.0, under OFL 1.1 — see
  public/fonts/PROVENANCE.md, LICENSE.txt and SHA256SUMS.
*/

@font-face {
	font-family: 'Plex Sans';
	src: url('/fonts/plex-sans-latin-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
		U+FFFD;
}

@font-face {
	font-family: 'Plex Sans';
	src: url('/fonts/plex-sans-cyrillic-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Plex Sans';
	src: url('/fonts/plex-sans-latin-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
		U+FFFD;
}

@font-face {
	font-family: 'Plex Sans';
	src: url('/fonts/plex-sans-cyrillic-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Plex Mono';
	src: url('/fonts/plex-mono-latin-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
		U+FFFD;
}

@font-face {
	font-family: 'Plex Mono';
	src: url('/fonts/plex-mono-cyrillic-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
	/* Palette. One signal colour, everything else is ink on cool paper. */
	--ink: #14161a;
	--paper: #eceef0;
	--surface: #ffffff;
	--rule: #c9ced4;
	--muted: #5a626b;
	--signal: #1f35d6;

	/* Type */
	--font-sans: 'Plex Sans', system-ui, sans-serif;
	--font-mono: 'Plex Mono', ui-monospace, monospace;

	--text-meta: 0.75rem; /* region values, dates */
	--text-small: 0.8125rem;
	--text-body: 1.0625rem;
	--text-lead: 1.1875rem;
	--text-title: 1.375rem; /* tile titles */
	--text-h2: 1.75rem;
	--text-h1: clamp(2.5rem, 6vw, 4rem);

	/* 4px base. Tight inside a region, wide between regions. */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;

	/* Structure. Three widths on purpose: the map is wide, prose is not, and the
	   section index is a column beside prose. */
	--width-map: 74rem;
	--width-prose: 40rem;
	--width-contents: 15rem;
	--gutter: 0.25rem; /* Metro-tight tile gap */
	--edge: 1.5rem;
	--hairline: 1px;
	--underline: 3px;
}