/* Base styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	font-family: var(--font-family);
	font-size: var(--font-size-md);
	line-height: var(--line-height-normal);
	color: var(--color-text-primary);
	background-color: var(--color-background);
	height: 100%;
	width: 100%;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

button {
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	color: inherit;
}

button:focus, input:focus {
	outline: none;
}

img {
	max-width: 100%;
	height: auto;
}

input {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: none;
	border: none;
}

h1, h2, h3, h4, h5, h6 {
	line-height: var(--line-height-tight);
	font-weight: var(--font-weight-semibold);
}

h1 {
	font-size: var(--font-size-xl);
}

h2 {
	font-size: var(--font-size-lg);
}

h3 {
	font-size: var(--font-size-md);
}

/* Custom scrollbar */
::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--color-surface-lighter);
	border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-surface-light);
}

/* Status colors */
.status {
	font-size: var(--font-size-xs);
	color: var(--color-text-secondary);
}

/* Time display */
.time {
	font-size: var(--font-size-xs);
	color: var(--color-text-tertiary);
}

/* App container */
.app-container {
	display: flex;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	background-color: var(--color-background);
	max-height: -webkit-fill-available;
}