/** global.css */

:root {
	--be-bg: white;
	--be-txt: hsl(0, 0%, 20%);

	--sl-color-primary-50: hsl(214, 45%, 94%);
	--sl-color-primary-100: hsl(214, 45%, 84%); 
	--sl-color-primary-200: hsl(214, 45%, 74%); 
	--sl-color-primary-300: hsl(214, 45%, 63%); 
	--sl-color-primary-400: hsl(214, 45%, 55%); 
	--sl-color-primary-500: hsl(214, 45%, 47%); 
	--sl-color-primary-600: hsl(214, 45%, 45%);
	--sl-color-primary-700: hsl(214, 45%, 42%);
	--sl-color-primary-800: hsl(214, 45%, 39%); 
	--sl-color-primary-900: hsl(214, 45%, 34%);
	--sl-focus-ring-color-primary: hsl(214, 45%, 28%, .33);

	--lumo-primary-color: var(--sl-color-primary-900);
	--lumo-primary-text-color: var(--sl-color-primary-900);
	--lumo-primary-color-50pct: var(--sl-color-primary-900);
	--lumo-primary-color-10pct: var(--sl-focus-ring-color-primary);
}

*,
*::before,
*::after  { 
  box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

html, body {
	width: 100%;
	height: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var(--be-bg);
	color: var(--be-txt);
	margin: 0;
	font-family: -apple-system, "Epilogue", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 16px;
}

span {
	color: var(--sl-color-gray-500);
}

h1, h2, h3 {
	margin: 0;	
}


/* Shoelace Custom Propeties */
sl-input, sl-select {
	width: 250px;
}

sl-input.small, sl-select.small {
	width: calc(125px - 1.5rem/2);
}

sl-input.large, sl-select.large {
	width: calc(250px + 2 * 1.5rem);
}

/* Shoelace Component Parts */
sl-badge::part(base) {
	padding: 6px 10px;
}

sl-input::part(label), sl-select::part(label) {
	font-size: 1rem;
	font-weight: 500;
	margin-left: .5rem;
	margin-bottom: .5rem;
}

.flex, sl-tab-panel::part(base) {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}