/* Buffet -- the typeface, declared once.
 *
 * Instrument Sans (SIL Open Font License, see fonts/Instrument_Sans/OFL.txt) replaces the system
 * font stack as the interface's default. That REVERSES the position app.css used to state in its
 * header -- "system fonts throughout, because this should look like the OS it is used on" -- and the
 * reversal is deliberate rather than accidental: Buffet is acquiring an identity of its own, and a
 * repository people publish from is not improved by being indistinguishable from Finder. The system
 * stack stays behind it as the fallback, so nothing regresses if the font fails to load.
 *
 * THIS FILE IS THE ONLY PLACE @font-face IS ALLOWED TO APPEAR. Everything else asks for the family
 * through --font-ui. A second @font-face somewhere is a second statement of where the font lives and
 * which weights exist, and those two drift (CLAUDE.md §5).
 *
 * Three details that are not obvious:
 *
 *   1. ONE FILE COVERS EVERY WEIGHT AND WIDTH. These are variable fonts -- wght 400-700, wdth
 *      75-100, read out of the fvar table rather than trusted from the vendor README -- so the
 *      `font-weight` and `font-stretch` RANGES below are what tell the browser it may interpolate.
 *      Declare a single value there instead and the browser synthesises fake bold from the 400
 *      master while the real 700 sits unused in the same file.
 *   2. THE COMMA IN THE FILENAME IS WHY THE URLS ARE QUOTED. `wdth,wght` inside a bare url() ends
 *      the value early; a quoted string does not. The vendor's name is kept as downloaded so that a
 *      re-download from Google Fonts is a copy rather than a rename.
 *   3. THE ITALIC IS A SEPARATE FILE AND COSTS NOTHING UNTIL USED. A browser fetches only the faces
 *      a page actually needs, so a page with no italic never pays its 201 KB.
 *
 * These are .ttf, not .woff2, because this host has neither woff2_compress nor fontTools and a
 * conversion nobody can reproduce is worse than 190 KB. Compressing them is worth doing when the
 * tooling exists; it is a swap of two urls in this file and nothing else.
 */

@font-face
{
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;

	/* Two entries, most specific first: a browser that does not recognise the -variations format
	   keyword skips that entry and takes the plain truetype one, which is the same file. */
	src: url( "fonts/Instrument_Sans/InstrumentSans-VariableFont_wdth,wght.ttf" ) format( "truetype-variations" ),
	     url( "fonts/Instrument_Sans/InstrumentSans-VariableFont_wdth,wght.ttf" ) format( "truetype" );
}

@font-face
{
	font-family: "Instrument Sans";
	font-style: italic;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;

	src: url( "fonts/Instrument_Sans/InstrumentSans-Italic-VariableFont_wdth,wght.ttf" ) format( "truetype-variations" ),
	     url( "fonts/Instrument_Sans/InstrumentSans-Italic-VariableFont_wdth,wght.ttf" ) format( "truetype" );
}

/* BITTER, THE DOCUMENT FACE (D547, closing deferred.md C131). A rendered Markdown file is a document
   and not the application, and Jon chose a serif for it: Bitter by Sol Matas (SIL OFL, see
   fonts/Bitter/OFL.txt), a variable font on one axis, wght 100-900 (the family's METADATA.pb). Two
   files as with Instrument Sans, and the same two-entry src for the same reason.

   ONE READER, AND IT IS NOT A <link>: the Markdown frame's document (lib/markdownframe.php) has an
   opaque origin and a policy of `default-src 'none'`, so it cannot load this file. It COPIES these
   two blocks into its own <style> at render time, with the urls made absolute and its `font-src`
   naming the font path with its scheme -- read from here rather than restated there, so this file
   stays the only place @font-face appears. The brackets in the filenames are the vendor's, kept so a
   re-download is a copy rather than a rename; quoted urls, as above. */
@font-face
{
	font-family: "Bitter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;

	src: url( "fonts/Bitter/Bitter[wght].ttf" ) format( "truetype-variations" ),
	     url( "fonts/Bitter/Bitter[wght].ttf" ) format( "truetype" );
}

@font-face
{
	font-family: "Bitter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;

	src: url( "fonts/Bitter/Bitter-Italic[wght].ttf" ) format( "truetype-variations" ),
	     url( "fonts/Bitter/Bitter-Italic[wght].ttf" ) format( "truetype" );
}

:root
{
	/* The one name the rest of the stylesheets use. The tail is the stack that was hard-coded in
	   app.css, item.css and upload.css before this file existed, kept intact as the fallback. */
	--font-ui: "Instrument Sans", var( --font-system );

	/* The fallback tail, under a name of its own since D432. One thing asks for it directly: the
	   type bench's panel (typebench.css), which must stay legible while --font-ui is being replaced
	   by whatever a System Admin is trying, and which may not restate the stack -- task9 asserts
	   this file is the only one that spells it out. */
	--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* The document face (D547): what a rendered Markdown file is set in, inside its sealed frame.
	   A serif, because a document is not the application; a stack of serifs behind it, because the
	   frame's font request can fail and the fallback should still read as a document. */
	--font-document: "Bitter", Georgia, "Times New Roman", serif;

	/* The width axis, exposed as a knob rather than left buried in the font file. Nothing sets it
	   yet -- it is here because a variable axis you cannot find is a variable axis nobody uses. Set
	   `font-stretch` (75%-100%) on any element to narrow it. */
	--font-ui-width: 100%;

	/* THE TYPE SCALE (Claude, 2026-09-18, on Jon's instruction). Eight steps, and every rem
	   `font-size` in every stylesheet is one of them. Before this there were about sixty distinct
	   values between .62rem and 1.75rem -- .84, .85, .86, .875 and .88 all in use, none of them a
	   decision -- and the small end had drifted below what anybody can read: a card's type label at
	   .66rem is 10.6px. The consolidation also BUMPS: each step sits at or a little above the top
	   of the band of old values it replaced, following the sizes Jon had been trying in
	   experiments.css (card title .86 -> .9, card meta .72 -> .8, tile meta .74 -> .8).

	   It lives HERE rather than in app.css because this is the one stylesheet every page links --
	   the embed page loads this and embed.css and nothing else.

	     step   was              for
	     2xs    .62 - .68rem     uppercase micro-labels: card type, list head, person chip
	     xs     .7  - .765rem    card meta and status, badges, row counts, section headings, hints
	     sm     .78 - .82rem     control pills, toolbar buttons, notes, toasts, the dock
	     base   .84 - .9rem      THE BODY: rows, titles, tables, forms. `body` itself is this step
	     md     .92 - 1.02rem    prose, inputs, glyph buttons
	     lg     1.05 - 1.18rem   the wordmark, small headings
	     xl     1.3 - 1.45rem    a view's h1, tile glyphs
	     2xl    1.6 - 1.75rem    the item page's title, large tile glyphs

	   To change a size, change the STEP a rule uses, or change the step. A new literal is how the
	   sixty values happened. The exceptions that stay literal are relative on purpose: `em` sizes
	   inside prose and chips, `max( 16px, 1em )` on inputs (iOS zooms the page on focus below 16px),
	   and one .5rem drawn dot. */
	--text-2xs: .74rem;
	--text-xs: .8rem;
	--text-sm: .84rem;
	--text-base: .9rem;
	--text-md: 1rem;
	--text-lg: 1.1rem;
	--text-xl: 1.4rem;
	--text-2xl: 1.7rem;
}

/* A PHONE GETS THE NEXT SIZE UP, and gets it here, once. Everything was too small on mobile and the
   reason was structural: sizes were tuned on a desktop at arm's length and no rule ever revisited
   them for a screen held in a hand. With the scale in tokens that is one block instead of three
   hundred overrides. `base` lands on 1rem = 16px, which is also the size below which iOS zooms a
   focused input. The breakpoint is the shell's own sheet breakpoint (app.css); width only, not
   `pointer: coarse`, because a tablet at desk distance reads the desktop scale fine. */
@media ( max-width: 46rem )
{
	:root
	{
		--text-2xs: .8rem;
		--text-xs: .86rem;
		--text-sm: .92rem;
		--text-base: 1rem;
		--text-md: 1.06rem;
		--text-lg: 1.15rem;
		--text-xl: 1.45rem;
	}
}