// ============================================================================
// LAYOUT & DIMENSIONS
// ============================================================================

export const layout = {
	// Navbar
	navbarHeight: 60, // px
	navbarMaxWidth: 1400, // px
	navbarZIndex: 1000,

	// Container
	containerMaxWidth: 1200, // px
	containerPadding: '1.5rem',

	// Grid
	gridGap: '1.5rem',
	gridMinColumnWidth: 300, // px

	// Page margins
	pageBottomMargin: 80, // px (desktop)
	pageMobileBottomMargin: 60, // px (mobile)
};

// ============================================================================
// RESPONSIVE BREAKPOINTS
// ============================================================================

export const breakpoints = {
	mobile: 768, // px
	tablet: 1024, // px
	desktop: 1400, // px
};

// ============================================================================
// FONTS
// ============================================================================

export const fonts = {
	mono: "'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace",
	sans: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
	monoWeight: 600,
};

// ============================================================================
// NAVBAR
// ============================================================================

export const navbar = {
	height: 60, // px - also update layout.navbarHeight if changing
	maxWidth: 1400, // px
	padding: '0.75rem 1.5rem',
	gap: '2rem',
	zIndex: 1000,

	// Brand
	brandFontSize: '0.9rem',
	cursorWidth: 8, // px

	// Hamburger menu
	hamburgerWidth: 24, // px
	hamburgerHeight: 2, // px
	hamburgerSpacing: 7, // px

	// Links
	linksGap: '1.5rem',
	linkFontSize: '0.85rem',
	linkPadding: '0.5rem 0.75rem',
	linkBorderRadius: 4, // px
	linkUnderlineHeight: 2, // px

	// Mode toggle
	modeToggleSize: 40, // px
	modeToggleBorderRadius: 8, // px
	themeButtonBorderRadius: 6, // px

	// Dropdown
	dropdownMinWidth: 180, // px
	dropdownBorderRadius: 8, // px
	dropdownZIndex: 1001,
	backdropZIndex: 999,
	mobileExpandedHeight: 200, // px
};

// ============================================================================
// SCROLLBAR
// ============================================================================

export const scrollbar = {
	width: 8, // px
	borderRadius: 4, // px
	trackColor: 'rgba(0, 0, 0, 0.1)',
	thumbColor: 'rgba(128, 128, 128, 0.5)',
	thumbHoverColor: 'rgba(128, 128, 128, 0.7)',
};