/**
 * Design tokens.
 *
 * FirstHand is a dark surface on purpose: the evidence is photographs and
 * footage, and a dark ground lets them carry the colour instead of competing
 * with a bright page. Amber marks the thing you are looking at; blue marks
 * everything else that is known.
 *
 * @package FirstHand
 */

.fh__root {
	--fh-bg: #0f1115;
	--fh-bg-2: #161a20;
	--fh-bg-3: #1d222a;
	--fh-line: #262c36;
	--fh-line-2: #333b47;

	--fh-ink: #e9edf3;
	--fh-ink-2: #a8b2c0;
	--fh-ink-3: #6f7a8a;

	--fh-accent: #e08a1e;
	--fh-accent-soft: rgba(224, 138, 30, 0.14);
	--fh-known: #3d8fb8;
	--fh-known-soft: rgba(61, 143, 184, 0.16);
	--fh-alert: #c2452d;
	--fh-good: #4f9d76;

	--fh-radius: 6px;
	--fh-radius-lg: 10px;

	--fh-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);

	/* Bars that float over the map, and the scrim behind Discover's copy. */
	--fh-glass: rgba(22, 26, 32, 0.97);
	--fh-glass-2: rgba(15, 17, 21, 0.82);
	--fh-scrim: 15, 17, 21;

	--fh-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--fh-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;

	--fh-top: 56px;
	--fh-time: 92px;
	--fh-strip: 132px;
	--fh-panel: 380px;
}

/*
 * Light.
 *
 * Same accents, same meaning: amber is still what you are looking at, blue is
 * still what is known. Only the ground and the ink change, and the ink is a
 * cool near-black rather than pure black so photographs do not look cut out.
 */
.fh__root[data-fh-theme="light"] {
	--fh-bg: #f4f6f9;
	--fh-bg-2: #ffffff;
	--fh-bg-3: #e9edf2;
	--fh-line: #d6dce4;
	--fh-line-2: #c0c8d3;

	--fh-ink: #171b22;
	--fh-ink-2: #4a5462;
	--fh-ink-3: #7b8594;

	--fh-accent: #c9760f;
	--fh-accent-soft: rgba(201, 118, 15, 0.14);
	--fh-known: #2f7ea5;
	--fh-known-soft: rgba(47, 126, 165, 0.14);
	--fh-alert: #b93f28;
	--fh-good: #3f8a65;

	--fh-shadow: 0 8px 28px rgba(23, 27, 34, 0.18);

	--fh-glass: rgba(255, 255, 255, 0.96);
	--fh-glass-2: rgba(244, 246, 249, 0.86);
	--fh-scrim: 244, 246, 249;
}