/* Import DM Serif Display + Figtree */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree&display=swap');


:root {
	--color-primary: rgb(144 122 108);
	--color-primary-dark: #5f4b8b;
	--color-primary-light: #c7b198;
	--color-secondary: rgb(196 146 114);
	--color-secondary-dark: #a37f5d;
	--color-secondary-light: #f0d9c8;
	--color-accent: #FFA07A;
	--color-accent-dark: #00c08b;
	--color-accent-light: #5effe8;
	--color-success: #00b7d9;
	--color-success-dark: #008ba3;
	--color-success-light: #62e2ff;
	--color-success-text: #ffffff;
	--color-error: #d75050;
	--color-error-dark: #c60000;
	--color-error-light: #ff7373;
	--color-error-text: #ffffff;
	--color-background: rgb(250 242 239);
	--color-disabled: #e8dbdb;
	--color-text: rgb(51 0 3); 
	/* var(--color-primary-dark); */
	--color-text-secondary: var(--color-background);
	--color-text-invert: #ffffff;
	--color-body-background: #f5f5f5;
	--color-button-primary-background: var(--color-primary);
	--color-button-primary-background-hover: color-mix(in srgb, var(--color-text) 50%, var(--color-text-secondary) 50%);
	--color-button-primary-background-active: color-mix(in srgb, var(--color-text) 50%, var(--color-text-secondary) 50%);
	--color-button-primary-background-disabled: var(--color-text-secondary);
	--color-button-primary-text-disabled: color-mix(in srgb, var(--color-text) 50%, var(--color-text-secondary) 50%);
	--color-button-primary-text: #ffffff;
	--color-button-secondary-background: var(--color-secondary);
	--color-button-secondary-text: #ffffff;
	--color-card-background: #ffffff;
	--color-progressbar-background: #e0e0e0;
	--color-progressbar-foreground: var(--color-primary-light);
	/* a darker shade of the primary color */
	--color-toolbar-background: color-mix(in srgb, var(--color-primary) 70%, black 30%);
	--color-toolbar-text: #ffffff;
	--color-border: rgb(195 144 114);
	--color-grid: color-mix(in srgb, var(--color-primary) 10%, rgba(0, 0, 0, 0.1) 90%);
	--width-border: 2px;
	--border-radius: 0.5rem;
	--font-family-primary: 'Figtree', serif;
	--font-family-secondary: 'DM Serif Display', sans-serif;
	--app-view-height: calc(100vh - 2.4rem);
	--dropshadow-1: 0 0 1rem rgba(0, 0, 0, 0.15);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-family-primary);
	background-color: var(--color-body-background);
	color: var(--color-text);
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-secondary);
}

a {
	color: var(--color-primary);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

hr {
	border: none;
	border-top: var(--width-border) solid var(--color-border);
}