@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');
@import "../../common/style/reset.css";
@import "../../common/style/flex.css";

:root {

	--color-fg: #111;
	--color-focus: var(--color-fg);

	--color-deco-r: 0;
	--color-deco-g: 120;
	--color-deco-b: 170;

	--color-deco: rgba(var(--color-deco-r), var(--color-deco-g), var(--color-deco-b), 1);
	--color-deco-bg: rgba(var(--color-deco-r), var(--color-deco-g), var(--color-deco-b), .25);

	--color-wind: #FFF;
	--color-pane: #CCC;
	--color-high: #FFF;
	--color-dark: #888;

	--color-shadow: #111;

	--flat-border: 1px solid var(--color-dark);
	--embossed-border: 2px solid var(--color-dark);

	--font-size-s: .8rem;
	--font-size-m: 1.25rem;
	--font-size-l: 2rem;

	--space-s: .5rem;
	--space-m: 1rem;
	--space-l: 2rem;
	--space-x: 3rem;
}

/*
------------------------------------------------------------------------------------------------------------------------
Page layout.
*/

body {

	display: flex;
	flex-direction: column;

	max-width: 80vw;
	min-height: 100dvh;

	margin: 0 auto;
}

/*
------------------------------------------------------------------------------------------------------------------------
Typography.
*/

body {

	color: #111;

	font-family: "Mona Sans", sans-serif;
	font-size: var(--font-size-m);
}

h1, h2, h3 {

	font-size: var(--font-size-l);
	font-weight: bold;
}

a { color: #0F80CD; }

.align-text-right { text-align: right; }

/*
------------------------------------------------------------------------------------------------------------------------
Button.
*/

.button {

	color: #FFF;
	background: #0F80CD;

	padding: var(--space-s) var(--space-m);
}

.button:not(:disabled) { cursor: pointer; }

/*
------------------------------------------------------------------------------------------------------------------------
Text input.
*/

input[type="text"],
input[type="number"],
input[type="password"] {

	border-bottom: 1px solid #AAA;
}

input[size] {

	width: calc((var(--input-width) * 1ch) + 2rem);
}

input[size="2"] { --input-width: 2; }

/*
------------------------------------------------------------------------------------------------------------------------
Table.
*/

table {

	border-spacing: 0 var(--space-m);

	width: 100%;
}

th { font-weight: bold; }

/*
------------------------------------------------------------------------------------------------------------------------
Error.
*/

.notice {

	color: var(--notice-color);
	border: 1px solid var(--notice-color);

	display: inline-block;

	padding: var(--space-s);
}

.notice--info { --notice-color: #44F; }
.notice--good { --notice-color: #48be48; }
.notice--warn { --notice-color: #FA4; }
.notice--errr { --notice-color: #F44; }