@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');

:root {

	/*
		The fonts and font colours the site will use
	*/
	--fonts: "Roboto", "Open Sans", sans-serif;
	--input-fonts: "Roboto Slab", var(--fonts);
	--light-font-colour: #dac8b0;
	--dark-font-colour: #000f3d;

	/* The full-site background used for the game view area only */
	--game-view-background: #29170c;

	/*
		The darkest colour in the trio for backgrounds, this is used for the
		site-wide background and modal content.
	*/
	--background1: #111113;
	--background1-darken: #09090a;
	--background1-lighten: #1c1c1f;
	--background1-text: var(--light-font-colour);

	/*
		The middle colour in the trio for backgrounds.
		Used for hand background, buttons, regions, etc.
	*/
	--background2: #4f5156;
	--background2-darken: #3d3e42;
	--background2-lighten: #676a70;
	--background2-text: var(--light-font-colour);

	/* The colours used for the lightest shades of the background regions. */
	--background3: #e5d9ba;
	--background3-darken: #bbae8f;
	--background3-lighten: #fff4d7;
	--background3-text: var(--dark-font-colour);

	/*
		The colours for the cards in the hands of the players
	*/
	--card-background: var(--background1);
	--card-text: var(--light-font-colour);
	--card-button: var(--background3);
	--card-button-darken: var(--background3-darken);
	--card-button-lighten: var(--background3-lighten);

	/*
		The colours used for the main game board. While playing, the alt colour
		is used for the text input backgrounds.
	*/
	--board-background: var(--background1);
	--board-background-alt: var(--background3);
	--board-background-alt-darken: var(--background3-darken);
	--board-background-alt-lighten: var(--background3-lighten);
	--board-background-text: var(--background1-text);
	--board-background-alt-text: var(--background3-text);

	/* The colours for the object cards that the spirits pick from */
	--object-card-background: var(--background3);
	--object-card-text: var(--background3-text);
	--object-button-default: var(--background2);
	--object-button-hover: var(--background2-lighten);
	--object-button-focus: var(--background2-darken);
	--object-button-text: var(--background2-text);

	/*
		Colours used for the past questions insert and button
	*/
	--past-questions-button-default: var(--background3);
	--past-questions-button-hover: var(--background3-lighten);
	--past-questions-button-focus: var(--background3-darken);
	--past-questions-background: var(--background3);
	--past-questions-field: var(--background1);


	/* The fill colour of the eyes on the game board */
	--eye-colour: #000000;

	/* The colours for the modals */
	--modal-background-blur: #000000a6;
	--modal-content-background: var(--background1);
	--modal-content-text: var(--background1-text);

	/* The colours used for the buttons in the modal that are for confirming actions */
	--confirm-background: #018501;
	--confirm-background-darken: #006600;
	--confirm-background-lighten: #00aa00;
	--confirm-text: white;
	--cancel-background: #c94a4a;
	--cancel-background-darken: #a54141;
	--cancel-background-lighten: #fa7d7d;
	--cancel-text: white;

	/* Trash button */
	--trash-button-background: var(--background2);
	--team-reminder-background: var(--background2);
	--object-reminder-background: var(--background2);
}