/*
 * The whole visual system in one place. Every value below is decided in
 * docs/DESIGN.md and nothing outside this file may invent a colour, a size or
 * a spacing step: a screen that needs a value it cannot find here is a screen
 * whose design has not been decided yet.
 *
 * The direction is a printed record rather than a dashboard. The ground is
 * warm paper, the cards on it are white, the accent is the blue-black of iron
 * gall ink, which is the ink an unalterable record has always been written in.
 */
:root {
	/* The product is drawn light and only light. Saying so stops a browser on
	   a machine set to dark from rendering the parts of a control it still owns
	   (the date picker's own panel, a scrollbar, the autofill wash) in its dark
	   palette on top of a white card, which is how a warm paper page acquires
	   one black box in the middle of it. */
	color-scheme: light;

	--page-max: 1200px;

	/* The ground is a warm off-white so a white card reads as a document laid
	   on a desk. A cool grey ground with white cards reads as software. */
	--bg: #f5f5f2;
	--surface: #ffffff;
	--surface-2: #ebebe6;

	/* Ink is cool and near black against the warm ground, the tension printed
	   ink has on paper. ink-2 carries body prose, ink-3 labels and captions. */
	--ink: #1a1d21;
	--ink-2: #4a5058;
	--ink-3: #767d87;
	--line: #dcdcd6;

	/* One accent, used for the primary action, the focus ring and selection,
	   and for nothing else. It is dark enough to carry white text at 14px and
	   quiet enough that a page full of records does not look decorated. */
	--accent: #1b3a57;
	--accent-ink: #12293f;
	--on-accent: #ffffff;

	/* Status colours are deliberately close in weight to the ink so a row of
	   badges does not out-shout the names being read.

	   Amber moved from #9a6512 to #8a5b0f when the washes below arrived. A
	   status is now a chip on its own tint rather than a word on white, and the
	   old amber measured under four and a half to one on --warn-bg: a colour
	   that is only legible on the surface it is never used on is not a status
	   colour. Every one of the three now measures above five to one on its own
	   wash, which is the ground each of them is actually read on. */
	--ok: #1f6b45;
	--warn: #8a5b0f;
	--danger: #a32219;

	/* A SURFACE AND A LINE FOR EVERY STATUS, so a state can be a chip rather
	   than a word.

	   A word coloured green among six words in ink is a difference a reader has
	   to hunt for, and roughly one man in twelve cannot separate it from the red
	   one beside it at all. A chip has a shape before it has a colour: it is
	   found by its outline, read by its word, and only then confirmed by its
	   tint. That is why these arrived as pairs. Nothing in this product is ever
	   distinguished by hue alone. */
	--ok-bg: #e4efe8;
	--ok-line: #bcd8c8;
	--warn-bg: #f6eeda;
	--warn-line: #e2cf9f;
	--danger-bg: #f6e4e2;
	--danger-line: #e6bdb8;

	/* The rule between two rows of one list, which is a lighter thing than the
	   rule around a card. --line is still the only weight on a boundary; this is
	   the weight of a separator inside one, and it exists because a list given
	   real vertical rhythm reads worse with the card's own rule repeated down
	   it: eight full strength lines make a table of a list of sentences. */
	--line-soft: #e8e8e2;

	/* The recessed tone of a quiet chip and of a block of figures read beside
	   prose. It sits between the page's warm ground and the navigation rail's
	   --surface-2, which is the tone of a thing that is pressed rather than of a
	   thing that is merely quiet. */
	--sunk: #f0f0ec;

	/* THE FOCUS HALO. Three pixels of the accent at a fifth, outside a border
	   that has itself gone to the accent. The two together are the focus
	   indicator and neither is decoration: the border carries the contrast and
	   the halo carries the size, which is what makes a focused control findable
	   across a screen of thirty fields without the hard outline sitting a
	   further two pixels out and colliding with the field beside it. It is
	   never removed without something else taking its place. */
	--focus-ring: rgba(27, 58, 87, .20);

	/* The one shadow in the product, and it points inwards. A control is a
	   ruled blank cut into the page rather than an object raised off it, which
	   is the same reason .btn has no lift: nothing here floats. It is barely
	   three and a half percent, which is enough to say "this is where you
	   write" and not enough to be seen as a shadow. */
	--inset: inset 0 1px 1px rgba(26, 29, 33, .035);

	/* The pressed and hovered state of the destructive button, which is to
	   --danger what --accent-ink is to --accent. It was written as a literal
	   in the button rule, which is exactly the drift this file exists to stop:
	   the one colour nobody could find here was the one on the button that
	   deletes things. */
	--danger-ink: #841a13;

	/* A pale wash of the accent. It backs the (i) explanation and the selected
	   row, which keeps selection in the accent family without a second hue. */
	--info-bg: #e8edf2;

	/* Four pixels, not six. A crisper corner sits closer to a printed form and
	   further from a consumer app. It is the corner of a CARD, a badge, a panel
	   and a tile: everything the page is made of. */
	--radius: 4px;

	/* The corner of a thing a hand operates, which is a softer corner than the
	   paper it sits on. Seven pixels rather than four, because a control is the
	   one part of a printed record that is not printed: a reader has to be able
	   to tell at a glance which boxes on the page take typing, and the corner is
	   what says so before the pointer is anywhere near it. */
	--radius-control: 7px;

	/* One height for everything a hand operates: a text box, a select, a date,
	   a file chooser and a button are all this tall, so a filter row and the
	   button that applies it sit on the same two lines rather than on four.

	   Thirty eight, raised from thirty two. Thirty two was sized for density
	   alone and read as software from fifteen years ago; six pixels is the
	   single largest thing that separates a control drawn this decade from one
	   drawn in 2010, and it buys the value inside the box room to sit off its
	   own border, which was the other half of the complaint. It is still not
	   forty four: these screens are dense, they are worked with a mouse and a
	   keyboard on a desk, and a control sized for a wet thumb belongs on a phone
	   in a kitchen. The density rule is unchanged and is checked rather than
	   assumed: a filter row and the button that applies it still take two lines
	   on the monitoring page and on the audit page, which is where it was
	   measured. */
	--control-h: 38px;

	/* The tick box and the radio, which are stamps rather than boxes and are
	   sized on their own. They are here beside --control-h because a coarse
	   pointer has to move both, and a value that is only in app.css is a value
	   the pointer rule below cannot reach. */
	--stamp: 16px;

	/* The two marks a control draws for itself, inline so no page ever fetches
	   an image to say "this opens" or "this is ticked", and here rather than in
	   app.css because each one carries a colour: the chevron is --ink-3 and the
	   tick is --on-accent, and a colour written anywhere but this file is a
	   colour that will drift away from the one it was matched to. A data URI
	   cannot read a custom property, which is the whole reason the hex is
	   spelled out twice in this product instead of once. */
	--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23767d87' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--check-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2l2.6 2.6L9 1.2' fill='none' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	/* No web font is loaded. This product is installed on a firm's own server
	   and handles names of sanctioned and politically exposed people, so a page
	   that calls a font CDN would leak who is being looked at, to somebody
	   else's log, on every screen. System faces cost nothing and leak nothing.

	   Three roles: sans for the interface, a transitional serif for the single
	   voice above the fold, and mono wherever characters must be compared one
	   by one. The product's core object is a name on a document, and a name
	   reads better in a serif. */
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--fs: 14px;
	--lh: 1.5;

	/* The step is eight. Half steps of four are allowed inside a control and
	   nowhere else, which is what keeps a dense table dense and a page calm. */
	--space: 8px;
}

/*
 * A COARSE POINTER GETS FORTY FOUR, AND THAT IS THE PARAGRAPH ABOVE FINISHED
 * RATHER THAN A SECOND OPINION.
 *
 * --control-h is 38 BECAUSE these screens are dense and are worked with a mouse
 * and a keyboard at a desk. That reasoning does not say 38 is the height of a
 * control; it says 38 is the height of a control under a pointer that can land
 * on four pixels. Under a pointer that cannot, the same argument gives 44, and
 * a product that took the first half of it and not the second would be one that
 * had decided a desk is the only place this work happens.
 *
 * It does. An officer approving a case on a phone at the weekend is operating
 * the same thumb as a client photographing a passport on the secure link page,
 * and being careful about one of them and careless about the other is not a
 * position anybody would defend out loud. So this is product wide and not
 * scoped to the surface a stranger sees.
 *
 * The question is the POINTER and never the width. A phone held in one hand and
 * a touchscreen laptop are the same hand; a narrow window on a desktop is still
 * a mouse, and shrinking a browser must not make the controls grow, because the
 * reader who did it is the same reader who had the mouse a second ago. That is
 * why this is (pointer: coarse) rather than a width, and why it sits with the
 * value it changes rather than among the layout rules in app.css.
 *
 * The stamp goes to 22 rather than to 44. A tick box is a stamp on a form and a
 * 44px square would be the largest object on a checklist of fourteen scopes;
 * the tap target is what has to be 44, and every one of them in this product is
 * inside a label the finger can also land on.
 */
@media (pointer: coarse) {
	:root {
		--control-h: 44px;
		--stamp: 22px;
	}
}