/* JSST 2026 — design tokens (#115, slice 1).
 *
 * ONE source of colour, radius and spacing for the three custom frontends:
 * the management dashboard (/jsst-admin), the door kiosk (/jsst-scan) and the
 * participant's own page (/ma-reservation). Each of those grew its own
 * vocabulary, and by the time #81 folded the kiosk into the dashboard, three
 * token names carried two different values and a fourth surface used none at
 * all.
 *
 * Extracted from what those sheets already contained rather than invented —
 * every value below was in use somewhere. Where two disagreed, the conflict
 * was settled on measured contrast, not preference, and the reasoning is
 * beside the token.
 *
 * `tests/test-design-tokens.php` recomputes every ratio claimed here. If a
 * value is edited to something that no longer clears its threshold, the suite
 * says so — the numbers in these comments are checked, not decorative.
 */

:root {
	/* ---------------------------------------------------------- brand
	   The CPS identity, used as-is. These are given, not chosen. */
	--navy:       #1C3C6D;
	--navy-press: #152e54;  /* navy under a finger. 13.54:1 behind white text. */
	--cyan:       #00C1DE;
	--on-cyan:    #06303a;  /* 6.49:1 — cyan is bright, so text on it is dark */
	--pale:       #D4E5F9;

	/* Dropped in #115: --navy-deep (#002053) was declared and referenced
	   nowhere. An unused token is a colour waiting to be picked by accident. */

	/* ---------------------------------------------------------- surfaces */
	--paper:     #f4f8fd;  /* the page behind the cards */
	--surface:   #fff;     /* cards, rows, sheets */
	--surface-2: #f6f9fd;  /* a recessed area inside a surface */
	--press:     #e8f0fa;  /* a row under a finger — 1.15:1, a wash, never behind text */
	--line:      #e0eaf6;  /* hairlines. 1.22:1 — decorative by definition,
	                          and the darker of the two former values, because
	                          a hairline that vanishes on a bright tablet in a
	                          hotel lobby is not a hairline. */

	/* ---------------------------------------------------------- dark panel
	   The door's counters bar sits on a dark ground so the numbers stay legible
	   with a bright camera preview directly beneath them. It is the one dark
	   surface in the product, and it needs its own ink. */
	--dark:      #0d1b2e;
	--dark-line: #1e3352;  /* 1.36:1 on --dark — a hairline */
	--on-dark:   #c7d6ea;  /* 11.73:1 on --dark */
	--on-dark-2: #8ba3c4;  /* 6.70:1 on --dark — secondary */

	/* Status ON the dark panel. The white-background ramp cannot be reused
	   here: --door-admitted measured 3.38:1 against --dark, --warn-ink 2.73:1
	   and --door-waitlist 1.84:1 — the waiting count was all but invisible on
	   the one screen read at arm's length, and had been since the counters
	   shipped. Same meanings, inverted for the ground they sit on. */
	--good-on-dark:     #7bd39a;  /* 9.58:1 on --dark */
	--warn-on-dark:     #f0b357;  /* 9.31:1 on --dark */
	--waitlist-on-dark: #c9a3e8;  /* 8.15:1 on --dark */

	/* ---------------------------------------------------------- text
	   Every one of these clears 4.5:1 on both --surface and --paper, because
	   all three are used for body-sized text somewhere. */
	--ink:   #17305a;  /* 13.07:1 on white. The dashboard's value, kept over the
	                      kiosk's #0f2340 (15.73:1): both pass comfortably, and
	                      near-black is harsh over the long reading the
	                      management screens ask for. */
	--ink-2: #4a5f82;  /* 6.46:1 — secondary text */
	--muted: #5c6f8e;  /* 5.10:1. The kiosk's value, and the reason this file
	                      exists: the dashboard's #6b7d9c measured 4.17:1 and
	                      was used for labels, counts and timestamps. It failed
	                      AA for body text on every management screen, and the
	                      fix was already sitting in the other stylesheet. */

	/* ---------------------------------------------------------- status
	   TWO ramps, and the distinction is the point.

	   A MARK is a fill, a dot, a border, a meter — non-text UI, which needs
	   3:1. INK is the same meaning set in type, which needs 4.5:1.

	   The dashboard sheet had only the mark ramp and said "marks only, never
	   text" — then seventeen rules set it as colour anyway, seven of them
	   below 4.5:1. A rule written in a comment is not a rule. Both ramps are
	   declared here and the test enforces each against its own threshold. */
	--good: #2F8F5B;  /* 4.04:1 — mark */
	--warn: #C26F00;  /* 3.77:1 — mark */
	--crit: #b3261e;  /* 6.54:1 — mark, and dark enough to double as ink */

	--good-ink: #1d6b45;  /* 6.48:1 */
	--warn-ink: #8a5300;  /* 6.33:1 */
	--crit-ink: #b3261e;  /* 6.54:1 — the same value; it already clears both */

	/* Each meter track is a light step of its own fill, so the state reads
	   across the whole bar and not only in the filled part. */
	--good-track: #e4f2ea;
	--warn-track: #fbeddd;
	--crit-track: #f7e3e1;

	/* ---------------------------------------------------------- the door
	   §12.2's five colours. A DOMAIN vocabulary, not a severity scale: "already
	   scanned" is not a warning and "waitlisted" is not an error. They are kept
	   separate from the status ramp for that reason, and must never be
	   substituted for it.

	   Used as full-bleed overlay backgrounds behind white text, read at arm's
	   length in a noisy room. Every one clears 4.5:1 against white. */
	--door-admitted: #2e7d32;  /* 5.13:1 */
	--door-already:  #1565c0;  /* 5.75:1 */
	--door-early:    #B45F00;  /* 4.59:1 — darkened from #e86a00 (3.23:1),
	                              which was also being used as text on white in
	                              the counters. It is the one door colour that
	                              did not clear the bar. */
	--door-waitlist: #6a1b9a;  /* 9.39:1 */
	--door-refused:  #c62828;  /* 5.62:1 */

	/* ---------------------------------------------------------- form */
	--radius: 16px;
	--pill:   999px;

	/* Minimum touch target. Set by #79 for door controls and promoted here:
	   every one of these surfaces is used standing up, on a phone or a tablet,
	   by somebody with one hand free. */
	--tap: 44px;
}