/* ============================================================
   Design tokens, taken from the master mockup.

   Every colour and metric here was extracted from
   oxegen_mockup.svg with spec.py rather than chosen, so a value
   that looks odd is probably right. Change the mockup first.
   ============================================================ */
:root {

	/* ---- 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 */
	--orange:	#f29e4c;	/* scope chips (World, Perth) */
	--green:	#16db93;	/* balance, positive amounts */
	--red:		#ff3c38;	/* expiring share */
	--white:	#ffffff;
	--off-white:	#f9f9f9;	/* chip label text */
	--pale:		#caf0f8;	/* gesture strip */
	--grey:		#e6e6e6;	/* inactive track, alternate card */
	--grey-mid:	#999999;	/* tag chip text */
	--grey-hint:	#cccccc;	/* placeholder text */
	--grey-dark:	#333333;	/* context chip label */
	--black:	#000000;

	/* ---- Typography ---- */
	/* 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-body:	'Liberation Sans', Arial, Helvetica, sans-serif;

	--fs-title:	21.8px;		/* app name, headings */
	--fs-sender:	14.6px;		/* card sender, control labels */
	--fs-body:	11.4px;		/* card message */
	--fs-chip:	10.4px;		/* chip labels */
	--fs-instruction: 12.5px;	/* the blue line under a heading */
	--fs-meta:	8.3px;		/* elapsed time, geo, comment count */
	--fs-micro:	6.5px;		/* meter labels */

	/* ---- Frame metrics ---- */
	--frame-w:	390px;		/* the mockup's phone frame */
	--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;
}