// Import themes
@use 'themes/themes';
@use 'themes/spacing';
@use 'themes/tooltip';

:root {
	--main-max-width: 820px; // Default max-width for main content
}

html {
	background-color: var(--background);
	font-size: 62.5%;
	height: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
	font-family: var(--font-family);
	font-size: 1.4rem;
	height: 100%;
	margin: 0;
	overflow: hidden; // Prevent body scroll since we handle scrolling in layout

	&.no-scroll {
		overflow: hidden;
	}
}

ul {
	padding-inline-start: 0;
	margin: 0;
	list-style: none;
}

// Main content styling - now applied within the scrollable container
.main-content {
	> * {
		max-width: var(--main-max-width);
		margin: 0 auto;
		width: 100%;
		transition: max-width 0.3s ease;

		// Responsive padding for smaller screens
		@media (max-width: 768px) {
			padding: 0 spacing.$unit;
		}

		// Wider layout for database pages
		&.database-layout {
			max-width: 1400px;
		}
	}
}

// Utility classes for different container widths
.content--wide {
	max-width: 1200px;
}

.content--narrow {
	max-width: 600px;
}

.content--full {
	max-width: none;
	padding: 0;
}

// Global variables
$primary-color: #007bff;
$font-size-base: 16px;

// Global mixins
@mixin button-reset {
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
}