/*
	CORE STYLES – TRAILS OF
	© 2021 David Blanchard – All Rights Reserved

	Styles shared across the application, including themes and core layout.
*/

@import url(remedy.css);

/* FONTS *********************************************************************/
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-display: block;
	font-weight: 100 900;
	src: url('rubik_wght.ttf')  format('truetype');
}

@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-display: block;
	font-weight: 100 900;
	src: url('libreFranklin_wght.ttf')  format('truetype');
}

@font-face {
	font-family: 'Libre Franklin';
	font-style: italic;
	font-display: block;
	font-weight: 100 900;
	src: url('libreFranklin_italic_wght.ttf')  format('truetype');
}

/* THEMING *******************************************************************/
:root {
	--trails-color-200: #BEB5A8;
    --trails-color-300: #A89C8A;
    --trails-color-400: #92846D;
    --trails-color-500: #7C6B50;
    --trails-color-600: #645032;
    --trails-color-700: #4A3B25;
    --trails-color-800: #3E3628;
	--trails-color: var(--trails-color-600);
	--trails-color-accent: #AC8D11;
	--trails-color-background: #fbf9f7;
	--trails-color-text: black;

	--trails-font: "Libre Franklin", "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
	--trails-font-head: Rubik, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;

	--trails-focus-width: 2px;
	--trails-focus-color: #379947;
	--trails-focus-outline: var(--trails-focus-width) solid var(--trails-focus-color);
}

sp-theme {
	margin: 0;
	padding: 0;
	width: inherit;
	height: inherit;

}

:root,
sp-theme {
	--spectrum-alias-body-text-font-family: var(--trails-font);
	--spectrum-global-color-gray-800: var(--trails-color-text);
	--spectrum-dialog-confirm-padding: 12px;

	--spectrum-semantic-cta-color-background-default: var(--trails-color-600);
	--spectrum-semantic-cta-color-background-down: var(--trails-color-800);
	--spectrum-semantic-cta-color-background-hover: var(--trails-color-700);
	--spectrum-progresscircle-medium-track-fill-color: var(--trails-color-600);

	--spectrum-card-border-color-key-focus: var(--trails-focus-color);
	--spectrum-actionbutton-m-quiet-border-color-key-focus: var(--trails-focus-color);
	--spectrum-alias-border-color-focus: var(--trails-focus-color);

	--spectrum-alias-border-radius-regular: 0px;

}

/* CORE LAYOUT ***************************************************************/

html,
body,
trails-layout {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overscroll-behavior: none;
	overflow: hidden;
}

@supports(-webkit-overflow-scrolling: auto) {
	html,
	body,
	trails-layout {
		-webkit-overflow-scrolling: auto;
	}
}

body {
	font-size: 14px;
	font-family: var(--trails-font);
	color: var(--trails-color-text);
	background-color: white;
}

section > h2 {
	margin: 20px 0 10px 0;
	font-size: 1.7em;
	font-weight: bold;

	color: var(--trails-color-800);
	border-bottom: 2px solid var(--trails-color-600);
}

section > h2.sticky {
	position: sticky;
	top: 0;

	background-color: white;
}