/*
 * Everything the look is built from. Change the palette here, nowhere else.
 *
 * The board is the shape of a crossword board without being any particular one:
 * a green field under a white lattice, premiums as flat panels of colour filling
 * their squares, cream tiles with the letters printed in the board's own green.
 * The tiles sit in a light wooden rack and the whole thing is on a dark table.
 *
 * The pairings below are measured, not chosen by eye. The green field is what
 * makes it work — a cream tile reads against it at 5.7:1, so a filled square is
 * obvious at the 14px squares a 320px phone gets. What the tile then has to hold
 * its own against is the lattice, at 1.07:1: hence --tile-edge, 3:1 against the
 * lattice and 3.2:1 against the tile face, plus a drop shadow, which is the
 * on-screen stand-in for a real tile's thickness.
 */
:root {
	/* The table the board sits on. */
	--surface: #0d2b24;
	--surface-raised: #163a31;
	--surface-sunk: #09211b;

	/*
	 * The mat the welcome screen's poster is centred on. The artwork is shown
	 * whole, so on a tall phone it cannot fill the window: a 848x1264 poster in a
	 * 428x926 window is 428x638, and this is what the 288px left over is. A step
	 * darker and greener than the table, so it reads as the wall behind a picture
	 * rather than as the game's own surface run out of artwork.
	 */
	--poster-mat: #0a221a;

	/* The board: a green field under a white lattice, and nothing outside the
	   outermost grid line — the board runs to the edge of the window. A cooler,
	   deeper green than the grass green of the retail board, at the same
	   luminance, so every ratio measured against the field still holds. */
	--board: #2c6b3f;
	--board-line: #e7ebe2;

	/* Premium squares, warm for words and cool for letters, deepening with the
	   multiplier. Each is a flat field of colour filling its whole square, and
	   carries the ink its label needs, at 4.5:1 or better.
	   Rust and ochre for the words, teal and aqua for the letters: near enough
	   to warm-for-words that the board is still read at a glance, far enough
	   from the retail red, pink and blue that it is not that board. */
	--triple-word: #cd5f33;
	--triple-word-ink: #2b0d02;
	--double-word: #d9a445;
	--double-word-ink: #33240a;
	--triple-letter: #4a8dad;
	--triple-letter-ink: #0a1c24;
	--double-letter: #b3d4e0;
	--double-letter-ink: #123039;
	/* The centre is a double word square with a star on it, and is coloured as one. */
	--centre: #d9a445;
	--centre-ink: #33240a;

	/* Tiles: cream, with the print in the board's green. */
	--tile-light: #fdfaf0;
	--tile: #f5f1e2;
	--tile-deep: #e7e1cd;
	--tile-edge: #8a866f;
	--tile-ink: #33573a;
	/* A blank's chosen letter, printed in red so a word's blanks are countable at
	   a glance — which matters, because a blank is worth nothing and doubling it
	   still is. Deep rather than bright: the triple word square's rust is 3.5:1
	   as ink on a tile face and cannot be read at 14px, this is 5.9:1. It shares its
	   value with --board-danger, the only red on the board that carries as ink,
	   but is its own token because a blank is not a mistake. */
	--tile-blank-ink: #a8281c;
	/* A tile in a word the lexicon refused: the same face, washed red. A pink of
	   its own rather than the cream mixed with --board-danger, which against a
	   warm face comes out tan and reads as a dirty tile rather than a wrong one.
	   What the wash costs is measured and affordable: the printed green is 6.1:1
	   on the middle of the face where it is 7.2:1 on the cream, a blank's red ink
	   5.2:1 where it is 6.2:1, and the face is 4.7:1 against the green field
	   against the cream's 5.7:1, so a filled square is still plain at 14px. What
	   it does cost is --tile-edge, 2.7:1 on this face where it needs 3:1, which is
	   why a refused tile takes its edge from --board-danger instead: 5.2:1 on the
	   face and 5.8:1 on the lattice, better than the cream edge manages on cream. */
	--tile-refused-light: #fdeae7;
	--tile-refused: #f8d7d3;
	--tile-refused-deep: #eabfba;
	/* A tile in a word the last play scored: the same face, washed green — the
	   counterpart of the refusal above, and measured the same way. Every ratio
	   comes out ahead of the red's: the printed green is 6.7:1 on the middle of
	   the face against the red wash's 6.1:1, a blank's red ink 5.7:1 against
	   5.2:1, and the face is 5.2:1 on the green field against 4.8:1 — so a filled
	   square is still plain at 14px, which is the number that matters.
	   It needs its own edge for the same reason the refusal does: --tile-edge is
	   3.0:1 on the middle of this face and 2.5:1 at the deep end of the gradient,
	   so it stops doing its job. A washed tile takes --board instead, the board's
	   own green, at 5.2:1 on the face and 5.3:1 on the lattice. */
	--tile-scored-light: #e9f8ee;
	--tile-scored: #d3efdb;
	--tile-scored-deep: #b6ddc2;

	/* The rack: wood, kept quiet enough that the tiles in it are what the eye goes
	   to, and dark enough that a cream tile stands off it at 3.4:1. */
	--wood-light: #b89a70;
	--wood: #9c7d54;
	--wood-dark: #6f5738;

	--ink: #f4f1e6;
	--ink-dim: #a6bdb4;
	--accent: #d8ab4a;
	--accent-ink: #33230a;
	/* The second line on a gold fill — a status, an icon — where --ink-dim is what
	   it would be on the dark table. Dim by being nearer the gold rather than by
	   being transparent, so it can be printed over a gradient without the fill
	   showing through it: 4.7:1 on the gold against --accent-ink's 7.1:1, which is
	   about the step the dark cards make between --ink and --ink-dim. */
	--accent-ink-soft: #543e17;
	/* Refusals and warnings. Bright enough to read on the dark table, which the
	   rust of a triple word square is not — and light enough to fill a button on
	   the dark table, at 5.1:1 against a sheet's panel where the board's own red
	   manages 1.8:1 and simply sinks into it. --danger-ink is what may be printed
	   on that fill, at 6.9:1. */
	--danger: #e98d7f;
	--danger-ink: #3a0d06;
	/* A step lighter again, for a warning carried by a mark rather than by a word
	   or a fill. --danger itself is 5.1:1 on a player's card, which is fainter than
	   the status line beside it at 6.3:1 — and the marks on that card are the
	   smallest thing on it and must not also be the faintest. This is 6.5:1, and
	   holds 3.4:1 through the trough of the pulse the low tile count wears. */
	--danger-light: #f4a89a;
	--good: #4fa885;

	/*
	 * Where a player stands, on the rosette in the corner of their card.
	 *
	 * Four fills on a 16px disc, each of which has to hold 3:1 on the two grounds
	 * it straddles at once — the card at --surface-raised and the table it hangs
	 * over — because the mark is centred on the card's own corner. Measured, on the
	 * card and on the table: gold 5.85 and 7.09, silver 8.42 and 10.21, bronze 3.78
	 * and 4.58, lead 3.51 and 4.26.
	 *
	 * First place is --accent rather than a fifth gold of its own. It lands on the
	 * gold card whenever the leader is to move, which is most of the time somebody
	 * is looking at it, and gold on gold is why the ring below is not decoration.
	 *
	 * One dark carries both the ring and the numeral, and --surface-sunk is already
	 * that dark: 4.5:1 or better as ink on all four fills, worst on the lead at
	 * 4.75, and 7.91:1 against the gold card, which is the ratio that matters —
	 * there it is the disc's only edge.
	 *
	 * Bronze and lead are 1.08:1 apart and that is the floor rather than a choice.
	 * A fill on this card cannot go below 0.212 of luminance without losing its 3:1,
	 * and cannot go below about 0.22 without the numeral losing its 4.5:1, so the
	 * bottom two rungs of the ladder are 0.268 and 0.246 and there is nowhere lower
	 * for either to stand. In greyscale they are one colour. The numeral is what
	 * says which place it is and the hue only reinforces it, which is the rule the
	 * welcome screen's two buttons keep below for the same reason.
	 */
	--rosette-silver: #ced6d2;
	--rosette-bronze: #c07f45;
	--rosette-lead: #7d8b86;

	/*
	 * The two ways into a game, on the welcome screen and nowhere else: green
	 * starts a table, blue joins somebody else's.
	 *
	 * Neither may be the quieter of the two, and that is measured rather than
	 * eyed: the faces are matched in luminance to the fourth decimal — 0.4614
	 * apiece — so both are 7.37:1 against the table, next to the gold's 7.09:1,
	 * and the only difference between them is hue. Each ink holds the gold
	 * pairing's 7.1:1 on its own face, at 7.6:1 and 8.1:1, and better again on the
	 * lit top of the gradient.
	 *
	 * Hue is the reinforcement and never the message. The icon and the label are
	 * what say which button is which, because two colours matched in luminance are
	 * by definition indistinguishable to anyone reading the screen in greyscale.
	 */
	--start: #5ec98f;
	--start-ink: #062a1a;
	--join: #57c0f2;
	--join-ink: #062033;

	/*
	 * The same two jobs down on the board and rack. Violet is the one hue the
	 * board does not use, so nothing wearing it can be mistaken for a premium.
	 * Gold is 1.9:1 on a cream tile and 1.8:1 on the wood and simply is not there.
	 *
	 * It takes both the dark and the soft to mark a square, because no single
	 * colour is 3:1 against a green field, an ochre premium and a cream tile at
	 * once: the soft fill carries on the field at 4.1:1 and the dark ring carries
	 * on the fill at 7.8:1, so the pair reads whatever it lands on. The dark
	 * alone does for a tile face (10.6:1) and the rack's wood (3.1:1).
	 */
	--board-accent: #4a1f78;
	--board-accent-soft: #dcc8f6;
	--board-danger: #a8281c;

	/*
	 * What a play scored, printed white on a pill with nothing round it, lit from
	 * the same side a tile is. Blue is yours — both the play you are building and
	 * the one you have just made — and red is somebody else's, which is the whole
	 * of what the two colours say.
	 *
	 * The blue is as bright as a blue can be here and no brighter. The fill is the
	 * pill's own edge everywhere but the green field, so it has to hold 3:1 against
	 * everything a pill can land on, and the rust triple word square is what decides
	 * how far it can go: a luminance of 0.038 is the ceiling, which --badge-light
	 * sits just under at 3.1:1 on the rust and 3.3:1 on the teal triple letter,
	 * 10.8:1 on a cream tile and 10.1:1 on the lattice. So the cheer comes out of
	 * saturation rather than lightness — a washed-out blue at this luminance is the
	 * one thing to avoid. White on it is 12.2:1 at the light end of the gradient.
	 *
	 * The one thing it cannot beat is the green field, at 1.9:1, and no blue can:
	 * 3:1 under that field needs a luminance of 0.005, which is black, and white
	 * could not then be said to be printed on a blue. So the pill's edge on the
	 * field is the drop shadow's job, not the fill's — see .score-badge__pill.
	 */
	--badge-light: #12209e;
	--badge: #0f1c92;
	--badge-deep: #0b1578;
	--badge-ink: #ffffff;

	/*
	 * Somebody else's score, and every ratio above holds for it unchanged, because
	 * contrast is luminance and nothing else: matched stop for stop against the
	 * blue — 0.0362 against 0.0363 — a red pill is the same 3.1:1 on the rust,
	 * 3.3:1 on the teal, 10.8:1 on a tile and 10.1:1 on the lattice, with the same
	 * white at 12.2:1 on it. So the ceiling the blue is held to is the ceiling this
	 * is held to, and the same shadow carries its edge on the green field. Any red
	 * brighter than this needs a ring round the pill, which is the thing the pill
	 * does not have.
	 *
	 * Crimson rather than a pure red, to be a hue away from the rust triple word
	 * square it can land on. It is not the board's other red: --board-danger marks
	 * a word the lexicon refused, and that is a pale wash over a tile's face rather
	 * than a saturated pill, so the two do not read as the same mark.
	 */
	--badge-rival-light: #720013;
	--badge-rival: #680011;
	--badge-rival-deep: #55000e;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.5rem;

	--radius: 0.375rem;
	--radius-lg: 0.75rem;

	/*
	 * Two typefaces, both already on the machine: the client has no npm
	 * dependencies and is not going to download a font either.
	 *
	 * The interface is a plain system sans. Anything that is a game piece — a
	 * tile, a score, a title — is set in the serif, which is what gives the game
	 * a face of its own rather than looking like a form.
	 */
	--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-game: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	/*
	 * Everything printed on the board itself — the letters, their values, the
	 * premium labels — is set in a grotesque, which is what a printed game tile
	 * uses. Named faces first and system-ui only as the fallback: the
	 * interface font is whatever the platform likes, but a tile should read the
	 * same on every one of them.
	 */
	--font-tile: "Helvetica Neue", Helvetica, Arial, Roboto, "Liberation Sans", sans-serif;

	/*
	 * The type scale, and every size in the interface comes off it. A step that is
	 * used and not declared here is not a smaller size, it is no size at all: a
	 * font-size of an undefined custom property is invalid at computed-value time,
	 * and font-size inherits, so the element quietly takes its parent's — which for
	 * a caption is bigger than the step above it and for a headline is the body
	 * text. Nothing may reach past either end of this list.
	 */
	--step--1: 0.8125rem;
	--step-0: 1rem;
	--step-1: 1.25rem;
	--step-2: 1.6rem;
	--step-3: 2.2rem;
	--step-4: 3rem;

	--shadow-panel: 0 0.75rem 2rem rgb(0 0 0 / 0.45);

	/*
	 * What is over what, as one list. A stacking order kept as a bare number in
	 * one stylesheet and another number in the next is one nobody can read whole,
	 * and every question it has to answer is about a pair of layers that are
	 * never edited together.
	 *
	 * Bottom up, with the ones that are not obvious spelled out:
	 *
	 *   flying    a tile on its way home to the rack, over the trough it lands in
	 *   menu      a chooser's list, over the panel it drops out of
	 *   arrival   somebody else's tiles coming down from their card, over the board
	 *             and the header they cross and under everything else. A tile in
	 *             the air is the one thing on the screen that is neither being read
	 *             nor being aimed at, so it gives way to all of it: what a flight
	 *             costs when it passes behind the toast naming the play is the
	 *             first part of the flight, and what it would cost in front is the
	 *             words it is about.
	 *   cheer     the bingo card and its confetti, over the board and the header it
	 *             falls across and under the toast naming the play: the toast is
	 *             words and this is decoration, so it gives way exactly as an
	 *             arriving tile does
	 *   toast     what just happened, over the board and the header
	 *   drag      the tile on the pointer, over everything it can be carried across
	 *   lesson,
	 *   callout,
	 *   sheet,
	 *   panel     anything the player has to answer: the teacher's report, the
	 *             call-out, the sheets, the result and the help. Between themselves
	 *             the order is only ever needed when one opens over another, which
	 *             is the confirmation sheet under the result panel it leads to, and
	 *             the call-out over the report whose suggestion it is glossing.
	 *   takeover  turn your phone upright, which is not a thing to be flown over.
	 */
	--layer-flying: 2;
	--layer-menu: 10;
	--layer-arrival: 25;
	--layer-cheer: 28;
	--layer-toast: 30;
	--layer-drag: 34;
	--layer-lesson: 36;
	--layer-callout: 37;
	--layer-sheet: 38;
	--layer-panel: 39;
	--layer-takeover: 40;
}