/* ============================================================
   Design tokens. See css/STYLE.md.

   Two tiers. Tier 1 is the PALETTE: the colours measured out of
   the master mockup with spec.py and named for what they are.
   Tier 2 is the ROLES: what a colour is for, each one pointing at
   a tier-1 name. Everywhere else names a role; a palette name is
   used only where the colour is intrinsically itself — an
   identity's declared colour, the map's own sea.

   Change a role to restyle the app, a palette entry to recolour
   it. Nothing outside this file holds a colour of its own.
   ============================================================ */
:root {

	/* ── Tier 1: the palette ──────────────────────────────── */

	--cyan:		#00b4d8;	/* status bar */
	--indigo:	#1e00ff;	/* app header, kind chips, primary buttons */
	--magenta:	#ff00ff;	/* a host app's frame, in capable-app screens */
	--magenta-dim:	#a100a1;	/* that host app's own header */
	--lilac:	#dab6fc;	/* header accents, small controls */
	--yellow:	#ffff00;	/* huser context chip */
	--yellow-soft:	#efea5a;	/* identity card, oxecoin pills */
	--yellow-wash:	#ebebad;	/* the pale ground the pay notes end on */
	--orange:	#f29e4c;	/* scope chips (World, Perth) */
	--green:	#16db93;	/* balance, positive amounts */
	--red:		#ff3c38;	/* expiring share */
	--blue-sea:	#a9c8e8;	/* the water the map is drawn on */
	--white:	#ffffff;
	--off-white:	#f9f9f9;	/* chip label text */
	--pale:		#caf0f8;	/* gesture strip */
	--grey:		#e6e6e6;	/* inactive track, alternate card */
	--grey-plate:	#f2f2f2;	/* the pale plate most rows and cards sit on */
	--grey-tile:	#cdcdcd;	/* the deeper plate, where a pale one would vanish on cyan */
	--grey-hint:	#cccccc;	/* placeholder text */
	--grey-soft:	#b3b3b3;	/* a muted figure, and a hint on the deeper plate */
	--grey-mid:	#999999;	/* tag chip text */
	--grey-dark:	#333333;	/* context chip label */
	--black:	#000000;

	/* Translucent black and white: what dims a screen, and what a placeholder
	   shows through. */
	--black-veil:	rgba(0, 0, 0, 0.25);		/* behind a popup */
	--black-shade:	rgba(0, 0, 0, 0.35);		/* behind the oxegen menu */
	--black-drop:	rgba(0, 0, 0, 0.6);		/* keeps camera text legible */
	--white-ghost:	rgba(255, 255, 255, 0.12);	/* the world-map placeholder */
	/* A wash is a ramp rather than a flat colour. This one lifts the map's foot
	   so the confirm button reads over a coastline. */
	--wash-map:	linear-gradient(to bottom,
		rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 34%, rgba(255, 255, 255, 0.88));

	/* ── Tier 2: the roles ────────────────────────────────── */

	/* Text */
	--ink:		var(--black);		/* what is read by default */
	--ink-soft:	var(--grey-mid);	/* a label that is not the point */
	--ink-hint:	var(--grey-hint);	/* placeholder text, waiting to be replaced */
	--ink-inverse:	var(--white);		/* read against indigo, cyan or a photograph */

	/* Surfaces */
	--ground:	var(--white);		/* a screen's own ground */
	--ground-raised: var(--grey-plate);	/* a card, a row or a plate standing on it */
	--ground-sheet:	var(--indigo);		/* the pull-up launcher */

	/* Meaning */
	--accent:	var(--indigo);		/* the app's own colour: buttons, marks, arrows */
	--accent-alt:	var(--cyan);		/* the second voice: chrome, knobs, panels */
	--good:		var(--green);		/* a credit, a balance, an on state */
	--alert:	var(--red);		/* a debit, an expiry, a capture not taken */
	--mint:		var(--yellow-soft);	/* an oxecoin brought into existence */

	/* Lines */
	--stroke:	var(--indigo);		/* the outline of a control */
	--stroke-soft:	var(--white);		/* a hairline drawn between things on colour */

	/* What dims the screen behind an overlay */
	--scrim:	var(--black-veil);
	--scrim-deep:	var(--black-shade);

	/* ── Type ─────────────────────────────────────────────── */
	/* The mockup sets body text in Liberation Sans, whose metrics Arial and
	   Helvetica match exactly, so text measures the same width here as there. */
	--font-display:	'GRAYSTROKE', 'Courier New', monospace;
	--font-script:	'Magnolia Script', cursive;
	--font-body:	'Liberation Sans', Arial, Helvetica, sans-serif;

	--size-display:	21.8px;		/* app name, headings */
	--size-row:	18.7px;		/* a row's label, and what is typed into a field */
	--size-label:	14.6px;		/* card sender, control labels */
	--size-note:	12.5px;		/* the blue line under a heading */
	--size-body:	11.4px;		/* a card's message */
	--size-chip:	10.4px;		/* chip labels */
	--size-meta:	8.3px;		/* elapsed time, geo, comment count */
	/* A size drawn once, on one screen, stays written where it is used. */

	--weight-regular: normal;
	--weight-bold:	bold;
	/* ── Shape ────────────────────────────────────────────── */
	--radius-tile:	3.9px;		/* a small plate or a swatch */
	--radius-soft:	5px;		/* the joining flow's buttons, a filter row */
	--radius-field:	7px;		/* the passphrase field and the plate it sits on */
	--radius-control: 7.8px;	/* the corner nearly every plate, row and button takes */
	--radius-sheet:	9.8px;		/* the pull-up's top corners */
	--radius-chip:	11.7px;		/* an identity chip, an identity card */
	--radius-card:	19.5px;		/* the guide plate, the lamp panel */
	--radius-popup:	23.4px;		/* a popup card */
	--radius-pill:	50%;		/* a circle, or a fully rounded end */

	/* ── Motion ───────────────────────────────────────────── */
	--motion-fade:	0.15s;		/* the refresh mark appearing */
	--motion-settle: 0.18s;		/* the feed returning to rest */
	--motion-tap:	140ms;		/* a small control answering a press */
	--motion-turn:	180ms;		/* a mark rotating open */
	--motion-slide:	220ms;		/* the pull-up sheet travelling */
	--motion-beat:	0.7s;		/* the pulse while refreshing */
	--motion-pulse:	1.4s;		/* the pulse while waiting on the network */
	--motion-spin:	1.6s;		/* the splash's ring of dots */
	--ease-sheet:	cubic-bezier(0.22, 0.61, 0.36, 1);

	/* ── Frame metrics ────────────────────────────────────── */
	/* Geometry, not style: where a thing sits, measured off the mockup. */
	--frame-w:	390px;		/* the mockup's phone frame */
	/* Mobile browsers overlay a toolbar across the foot of the viewport, so the
	   last thing on a screen — the Join button — was landing underneath it.
	   Every screen is lifted by roughly a button's height to clear it. */
	--lift:		46.8px;
	--status-h:	54.6px;
	--header-h:	54.6px;
	--dock-h:	86.2px;		/* stowed sheet + gesture strip */
	--gutter:	3.9px;		/* card side margin and card gap */
	--card-w:	382.2px;

	/* ── Depth ────────────────────────────────────────────── */
	--z-chrome:	20;
	--z-dock:	30;
	--z-overlay:	40;
}